jQuery事件处理器的绑定及解除方法

　　前几天用bind()方法做事件绑定的时候发现还有其他几种事件绑定的方法，查阅了之后对比总结一下。内容详情请点链接~欢迎讨论拍砖~

 

.bind()

　　.bind(eventType [, eventData], handler)    v1.0

　　给被选元素绑定一个事件处理程序。eventType为事件类型如"click","submit","mousedown"等; eventData为传给handler的数据（注意变量作用域）; handler为事件发生时运行的函数。通过 .unbind(eventType [, handler]) 解除绑定。

　　.bind({eventType:handler,eventType:handler,...})

　　给被选元素绑定多个事件处理程序。当然，如果是不同事件触发同一函数，我们可以这样： 

1 $(“#foo”).bind("mouseenter mouseleave", function(){
2     //do something
3 });

　　.bind(eventType [, eventData][, preventBubble])    v1.4.3

　　preventBubble参数默认值为true，如果设为false就相当于处理函数为： function(){ return false; } ，相当于调用preventDefault()和stopPropagation()。这个函数可以通过 .unbind(eventType,false) 解除绑定。

 

 .live()   v1.7弃用  v1.9移除

　　.live(events, handler)    v1.3

　　.live(events[, data], handler)    v1.4

　　.live(events)     v1.4.3

　　给被选元素绑定一个或多个事件处理程序。通过 .die(eventType[, handler]) 解除绑定。与.bind()最显著的区别是：该方法的被选元素可以是当前及未来的元素（比如由脚本创建的新元素）。

　　新版本中不建议使用该方法，是因为可能会出现一些问题：

• 调用该方法时，jQuery试图检索被选择到的具体元素，在大文件中这是比较耗时的；
• 不支持jQuery的一个很不错的优点-链式调用，如$("a").find(".offsite, .external" ).live( ... );；
• 由于所有.live()方法实际上都是绑定在document元素上的，处理函数在执行前会有较为复杂的过程：只要有事件冒泡到document节点上，它就查看该事件是否是匹配的事件，以及该事件的目标元素与被选元素是否匹配，如果都是的话，则执行函数。也因此可以看出该方法与.bind()的另一个区别：该方法要冒泡到实际绑定的元素上时才执行处理函数，而.bind()直接执行；
• 在IOS的移动设备上，大多元素的click事件不会冒泡到body，在应用到某些特定情形时才可以使用；
• 在document子元素上调用.stopPropogation()无效，因为事件已经传播至document；
• 其他方法有时会对该方法产生意想不到的影响，如$(document).off("click"); 会解除所有live()方法的绑定；

　　官方建议是，v1.7+使用.on()，旧版本使用.delegate()。

 

.delegate()

 　　.delegate(selector,eventType[, eventData], handler)    v1.4.2

　　 .delegate(selector,events)    v1.4.3

 　　给被选元素的子元素（即参数selector选中的元素）绑定一个或多个事件处理程序。该方法的被选元素也可以是未来元素。通过 .undelegate(selector,eventType[, handler]) 解除绑定。

　　该方法和.live()很相似，区别就在于：该方法把事件委托给了父元素，使得对元素的查询可以更便捷，内存消耗更小。如：

1 $('document').delegate('a','click',function(){
2     //do something
3 });
4 $('a').live('click',function(){
5     //do something
6 });

 

　　从这个例子中看，虽然都是绑定到了document元素，但后者会先查询所有a元素并存储为jquery对象，再去进行后面的冒泡等步骤。

 

 .on()

　　.on(events[, selector][, data], handler)    v1.7

　　.on(events[, selector][, data])    v1.7

　　.bind(), .live(), .delegate()其实都是通过.on()实现的，通过.off()解除绑定，.unbind(), .die(), .undelegate(),也都是通过.off()来实现的。

 

.one()

　　.one(events[, selector][, data][,handler])    v1.7

　　给被选元素绑定一个或多个事件处理程序，但只能运行一次处理函数。其他和.on()相同。

 

---

 

　　一些特定事件处理器可以直接绑定到元素，如'click','hover','mouseenter','mouseleave','focus','blur','load','scroll'和'error'等（要注意是否冒泡），直接绑定更加方便，当然也降低了灵活性。

　　jQuery的API文档中，关于Event Handler Attachment（事件处理器的绑定）还有其他部分：jQuery.proxy(), .trigger(), .triggerHandler(),在此先按住不表，以后用到再来做总结。

转载于:https://www.cnblogs.com/littleaway/p/4720180.html