jQuery 知识量:7 - 32 - 105
如果需要停用已经绑定的事件,可以使用.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链接将不会再出现警告框了。
如果一个元素绑定了两个或两个以上的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事件仍然有效。
如果要在一个事件被移除后,重新再次绑定,可以定义一个变量指向要绑定的函数,然后在需要的地方再次绑定该事件。
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; }); });
以上代码的意思是:
定义一个匿名函数并将其赋值给变量f。
给a.a1绑定click.remove事件。
给a.a2绑定click事件,当a.a2被点击时,移除a.a1的click.remove事件。
给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事件就会被移除,就再也不会弹出警告框了。
Copyright © 2017-Now pnotes.cn. All Rights Reserved.
编程学习笔记 保留所有权利
MARK:3.0.0.20240214.P35
From 2017.2.6