前几天用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[, 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(),在此先按住不表,以后用到再来做总结。