JQuery中的bind()和unbind(),提供了事件的绑定和取消机制,既可以绑定html默认支持的事件,也能够绑定自定义的事件。JQuery支持自定义事件,这显然给编程带来了极大的灵活性。下面就一起学习下,jquery事件处理的一些特性。
1、JQuery中事件可以重复绑定,不会覆盖。
$("#button1").bind("click",function(){ alert("func1"); }); $("#button1").bind("click",function(){ alert("func2"); });
当点击button1的时候,这2个事件处理函数都会触发。也许你会说,上面绑定的是不同的匿名函数,占用不同的内存空间。的确是这样的,不过就算是同一个处理函数,依然存在重复绑定问题。当button1被点击的时候,下面的事件处理函数同样会被调用2次。
$("#button1").bind("click",sameFunc); $("#button1").bind("click",sameFunc); function sameFunc() { alert("func"); }
绝大部分场景下,事件处理函数都只需要绑定一次,所以一定要注意JQuery事件的重复绑定这个特性,事件多次执行,就算没有bug,终究也不是好的做法。
2、使用bind一次绑定多个事件和处理函数。
如果多个事件需要注册相同的处理函数,那么可以使用如下代码进行简化(事件名称使用空格分隔):
$("#button1").bind("mousedown mouseup",function(){ console.log(11); });
如果每个事件的处理函数不同,那么可以使用如下的方式(json对象):
$("#button1").bind( { "mousedown":function(){ console.log("mousedown"); }, "mouseup":function(){ console.log("mouseup"); } } );
3、传递event对象和自定义参数。
一般来说,使用jquery的时候我们很少需要event对象,也不需要向事件处理函数传递自定义的参数。不过如果我们真的需要这么做,JQuery也是支持的。
$("#button1").bind("click", {name:"aty"}, function(eventObject){ alert("params=" + eventObject.data.name); });
eventObject很像IE和FF中的event对象,通过它能够获取事件发生时更详细的信息。如果我们指定了自定义的参数,那么JQuery会将它放在事件对象的data属性中,即通过eventObject.data就能够拿到我们传递的参数值。
4、事件取消的三种形式。
unbind用来取消之前通过bind绑定的事件处理函数,总的来说有三种形式:取消所有事件、取消某种类型的事件、取消某种类型下的某个事件处理函数。
假如我们给button1绑定了click、mouseup、mousedown事件,其中click事件绑定2个处理函数。
$("#button1").bind("click",function(eventObj){ console.log("click1"); }); $("#button1").bind("click",function(eventObj){ console.log("click2"); }); $("#button1").bind("mouseup",function(eventObj){ console.log("mouseup"); }); $("#button1").bind("mousedown",function(eventObj){ console.log("mousedown"); });
$("#button1").unbind():取消button1上所有已经绑定的事件处理函数。
$("#button1").unbind("click"):只取消button1上绑定的click类型的事件处理函数。
这2种形式很好理解,也是我们平时编程最常用的做法。上面的代码我们注册了2个click类型的事件处理函数,如果要取消第2个click事件处理函数,第1个保留,应该怎么办呢?由于我们注册的是匿名函数,所以没有办法实现。下面的代码是错误的,达不到预期的效果。
$("#button1").bind("click",function(eventObj){ console.log("click1"); }); $("#button1").bind("click",function(eventObj){ console.log("click2"); }); // try to cancel function2 $("#button1").unbind("click",function(eventObj){ console.log("click2"); });
虽然bind和unbind是用的匿名函数功能是相同的,但是这2个函数不是同一个javascript对象,因为它们占用不同的内存空间。聪明的你可能已经想到:如果bind和unbind使用不同函数,是不是就能达到目的了?确实是这样,下面的代码是正确的。
$("#button1").bind("click",func1); $("#button1").bind("click",func2); // try to cancel function2 $("#button1").unbind("click",func2); function func1() { console.log("click1"); } function func2() { console.log("click2"); }
这就是unbind的第三种使用形式,可以看到这种做法非常的不好,因为这种做法不允许使用匿名函数,我们不得不暴露全局的函数(至少要求unbind的时候能够看得见)。JQuery提供了事件命名空间机制,个人感觉就是为了解决这个问题。
5、事件命名空间。
上面已经提到,事件命名空间就是为了解决unbind第三种形式遇到的问题。下面是JQuery官方API文档的解释:
Instead of maintaining references to handlers in order to unbind them, we can namespace the events and use this capability to narrow the scope of our unbinding actions.