jq解绑事件:为事件匿名函数指定变量、事件命名空间

jq解绑事件:为事件匿名函数指定变量、事件命名空间方法妙用!

解绑同类型多个事件其中一个事件:为事件匿名函数指定变量

解绑事件,一般我们使用.off(events[.selector])。但对同一元素绑定多个事件后,怎么实现解绑指定的其中一个事件?如.link1 绑定多个事件,怎么实现解绑多个点击事件中的其中一个?

实现方法:为事件匿名函数指定变量,实例:

<script src="http://code.jquery.com/jquery-2.1.1.min.js">script>
<div id="demo"> 
    <a href="javascript:;" class="test1">事件测试a> 
    <a href="javascript:;" class="unbind">解绑事件a> 
div>
<script type="text/javascript">
       $("#demo").on('click', '.test1', function(event) {
       console.log('demo.test1'); }); 
       $("#demo").on('click', '.link1', myFun2 = function(event) {
      
        console.log('click.myFun');
    });
       $(".unbind").click(function(event) {
      
           // .off()第2个参数不再是要解绑的元素对象,而是绑定事件时,为事件匿名函数指定变量(此变量指向点击事件的函数 )
            $("#demo").off("click",myFun2());
       });
script>
<script type="text/javascript">
    $("#demo").on('click.test', '.test1', function(event) {
      
    console.log('click.test'+ '.test1');
    });
    $("#demo").on('click', '.test1', function(event) {
      
    console.log('click'+'.test1');
    });
    $("#demo").on('mouseover.test', '.test1', function(event) {
      
    console.log('mouseover.test'+'.test1');
    });
    $(".unbind").click(function(event) {
      
        // 第1个参数不再是要解绑的事件类型,而是之前为要解绑事件指定的命名空间.test
        $("#demo").unbind(".test");
    });
script>

对同一元素绑定同类型多个事件后,可以“为事件匿名函数指定变量”的方法来实现解绑指定的其中一个事件。那么,快速解绑指定多个(同类型或不同类型)事件又怎么实现呢?

解绑同类型多个事件其中一个事件:为事件匿名函数指定变量

<script src="http://code.jquery.com/jquery-2.1.1.min.js">script>
<div id="demo">
    <a href="javascript:;" class="test1">事件测试a>
    <a href="javascript:;" class="unbind">解绑事件a>
div>
<script type="text/javascript">
    $("#demo").on('click', '.test1', function(event) {
      
        console.log('demo.test1');
    });
    $("#demo").on('click', '.test1', myFun2 = function(event) {
      
        console.log('click.myFun2');
    });
    $(".unbind").click(function(event) {
      
        // .off()第2个参数不再是要解绑的元素对象,而是绑定事件时,为事件匿名函数指定变量(此变量指向点击事件的函数 )

        $("#demo").off("click", myFun2());
    });
script>
<script type="text/javascript">
    $("#demo").on('click.test', '.test1', function(event) {
      
    console.log('click.test'+ '.test1');
    });
    $("#demo").on('click', '.test1', function(event) {
      
    console.log('click'+'.test1');
    });
    $("#demo").on('mouseover.test', '.test1', function(event) {
      
    console.log('mouseover.test'+'.test1');
    });
    $(".unbind").click(function(event) {
      
        // 第1个参数不再是要解绑的事件类型,而是之前为要解绑事件指定的命名空间.test
        $("#demo").unbind(".test");
    });
script>

再列:

$(document).on(touchend+'.move',function(){
     
    $(this).off('.move');

    //console.log(speed);

    clearInterval(timer);
    timer = setInterval(function(){
     
        var iTop = $(This).position().top;
        if(Math.abs(speed) <= 1 || iTop > 50 || iTop < parentH - childH - 50){
            clearInterval(timer);
            if(iTop >= 0){
                $(This).css('transition','.2s');
                $(This).css('transform','translate3d(0,0,0)');
            }
            else if(iTop <= parentH - childH){
                $(This).css('transition','.2s');
                $(This).css('transform','translate3d(0,'+(parentH - childH)+'px,0)');
            }
        }
        else{
            speed *= 0.9;
            $(This).css('transform','translate3d(0,'+(iTop + speed)+'px,0)');
        }

    },13);

});

你可能感兴趣的