jQuery

jQuery 知识量:7 - 32 - 105

3.6 管理事件的绑定><

移除绑定的事件- 3.6.1 -

如果需要停用已经绑定的事件,可以使用.off()方法完全移除绑定的程序。

HTML代码如下:

<a href="#" class="a1">a1</a>
<a href="#" class="a2">a2</a>

对应的JavaScript代码如下:

$(document).ready(function () {
    $('a.a1').click(function () {
        alert('A1 works!');
        return false;
    });
    $('a.a2').click(function () {
        $('a.a1').off('click');
        return false;
    });
});

以上代码中分别为a.a1和a.a2两个链接绑定了click事件。其中,当点击a.a1链接时,会弹出警告框“A1 works!”,当点击a.a2链接时,会找到a.a1并移除a.a1绑定的click事件,再点击a.a1链接将不会再出现警告框了。

事件命名空间- 3.6.2 -

如果一个元素绑定了两个或两个以上的click事件,每个click事件会执行不同的动作,要想移除其中某一个特定click事件,就需要借助事件命名空间。

事件命名空间就是在绑定(同类)事件时添加附加信息,以区别不同的具体事件,就如同给每个事件发放身份证一样。

$(document).ready(function () {
    $('a.a1').on('click.remove1', function () {
        alert('ok');
        return false;
    });
    $('a.a1').on('click.remove2', function () {
        alert('no');
        return false;
    });
    $('a.a2').click(function () {
        $('a.a1').off('click.remove1');
        return false;
    });
});

以上代码中,通过.remove1和.remove2给a.a1的两个click事件进行了命名,然后在a.a2的click事件处理函数中,指定移除命名为remove1的click事件,当a.a2被点击后,a.a1的click.remove1事件将被移除,不再有效,而click.remove2事件仍然有效。

重新绑定事件- 3.6.3 -

如果要在一个事件被移除后,重新再次绑定,可以定义一个变量指向要绑定的函数,然后在需要的地方再次绑定该事件。

HTML代码如下:

<a href="#" class="a1">a1</a>
<a href="#" class="a2">a2</a>
<a href="#" class="a3">a3</a>

对应的JavaScript代码如下:

$(document).ready(function () {
    var f = function () {
        alert('ok');
        return false;
    };
    $('a.a1').on('click.remove', function () {
        alert('ok');
        return false;
    });
    $('a.a2').click(function () {
        $('a.a1').off('click.remove');
        return false;
    });
    $('a.a3').click(function () {
        $('a.a1').on('click.remove', f);
        return false;
    });
});

以上代码的意思是:

  1. 定义一个匿名函数并将其赋值给变量f。

  2. 给a.a1绑定click.remove事件。

  3. 给a.a2绑定click事件,当a.a2被点击时,移除a.a1的click.remove事件。

  4. 给a.a3绑定click事件,当a.a3被点击时,找到a.a1并重新绑定click.remove事件。这里将变量f作为参数传递给.on()方法,从而将变量f对应的匿名函数变为a.a1的click.remove事件的处理函数。

此外,对于只需要触发一次,随后立即移除事件的情况,可以使用.one()方法。

$(document).ready(function () {
    $('a.a1').one('click', function () {
        alert('ok');
        return false;
    });
});

以上代码中,a.a1的click事件只会触发一次,即点击a.a1,弹出警告框后,click事件就会被移除,就再也不会弹出警告框了。