JQuery事件绑定live方法
2012-01-11 09:35
246 查看
来自jquery1.4.1API
使用 .bind() 时,选择器匹配的元素会附加一个事件处理函数,而以后再添加的元素则不会有。为此需要再使用一次 .bind() 才行。
可以给这个元素绑定一个简单的click事件:
当点击了元素,就会弹出一个警告框。然后,想象一下这之后有另一个元素添加进来了。
尽管这个新的元素也能够匹配选择器 ".clickme" ,但是由于这个元素是在调用 .bind() 之后添加的,所以点击这个元素不会有任何效果。
.live() 就提供了对应这种情况的方法。如果我们是这样绑定click事件的:
然后再添加一个新元素:
然后再点击新增的元素,他依然能够触发事件处理函数。
事件委托
.live() 方法能对一个还没有添加进DOM的元素有效,是由于使用了事件委托:绑定在祖先元素上的事件处理函数可以对在后代上触发的事件作出回应。传递给 .live() 的事件处理函数不会绑定在元素上,而是把他作为一个特殊的事件处理函数,绑定在 DOM 树的根节点上。在我们的例子中,当点击新的元素后,会依次发生下列步骤:
生成一个click事件传递给 <div> 来处理
由于没有事件处理函数直接绑定在 <div> 上,所以事件冒泡到DOM树上
事件不断冒泡一直到DOM树的根节点,默认情况下上面绑定了这个特殊的事件处理函数。
执行由 .live() 绑定的特殊的 click 事件处理函数。
这个事件处理函数首先检测事件对象的 target 来确定是不是需要继续。这个测试是通过检测 $(event.target).closest('.clickme') 能否找到匹配的元素来实现的。
如果找到了匹配的元素,那么调用原始的事件处理函数。
由于只有在事件发生时才会在上面的第五步里做测试,因此在任何时候添加的元素都能够响应这个事件。
附加说明
.live() 虽然很有用,但由于其特殊的实现方式,所以不能简单的在任何情况下替换 .bind()。主要的不同有:
在jQuery 1.4中,.live()方法支持自定义事件,也支持所有的 JavaScript 事件。在jQuery 1.4.1中,甚至也支持 focus 和 blue 事件了(映射到更合适,并且可以冒泡的focusin和focusout上)。另外,在jQuery 1.4.1中,也能支持hover(映射到"mouseenter mouseleave")。然而在jQuery 1.3.x中,只支持支持的JavaScript事件和自定义事件:click, dblclick, keydown, keypress,
keyup, mousedown, mousemove, mouseout, mouseover, 和 mouseup.
.live() 并不完全支持通过DOM遍历的方法找到的元素。取而代之的是,应当总是在一个选择器后面直接使用 .live() 方法,正如前面例子里提到的。
当一个事件处理函数用 .live() 绑定后,要停止执行其他的事件处理函数,那么这个函数必须返回 false。 仅仅调用 .stopPropagation() 无法实现这个目的。
参考 .bind() 方法可以获得更多关于事件绑定的信息。
在jQuery 1.4.1中,你可以一次绑定多个事件给 .live() ,跟 .bind() 提供的功能类似。
有个die方法与live正好想法,会解除用live注册的自定义事件。
使用 .bind() 时,选择器匹配的元素会附加一个事件处理函数,而以后再添加的元素则不会有。为此需要再使用一次 .bind() 才行。
<body> <div class="clickme">Click here</div> </body>
可以给这个元素绑定一个简单的click事件:
$('.clickme').bind('click', function() { alert("Bound handler called."); });
当点击了元素,就会弹出一个警告框。然后,想象一下这之后有另一个元素添加进来了。
$('body').append('<div class="clickme">Another target</div>');
尽管这个新的元素也能够匹配选择器 ".clickme" ,但是由于这个元素是在调用 .bind() 之后添加的,所以点击这个元素不会有任何效果。
.live() 就提供了对应这种情况的方法。如果我们是这样绑定click事件的:
$('.clickme').live('click', function() { alert("Live handler called."); });
然后再添加一个新元素:
$('body').append('<div class="clickme">Another target</div>');
然后再点击新增的元素,他依然能够触发事件处理函数。
事件委托
.live() 方法能对一个还没有添加进DOM的元素有效,是由于使用了事件委托:绑定在祖先元素上的事件处理函数可以对在后代上触发的事件作出回应。传递给 .live() 的事件处理函数不会绑定在元素上,而是把他作为一个特殊的事件处理函数,绑定在 DOM 树的根节点上。在我们的例子中,当点击新的元素后,会依次发生下列步骤:
生成一个click事件传递给 <div> 来处理
由于没有事件处理函数直接绑定在 <div> 上,所以事件冒泡到DOM树上
事件不断冒泡一直到DOM树的根节点,默认情况下上面绑定了这个特殊的事件处理函数。
执行由 .live() 绑定的特殊的 click 事件处理函数。
这个事件处理函数首先检测事件对象的 target 来确定是不是需要继续。这个测试是通过检测 $(event.target).closest('.clickme') 能否找到匹配的元素来实现的。
如果找到了匹配的元素,那么调用原始的事件处理函数。
由于只有在事件发生时才会在上面的第五步里做测试,因此在任何时候添加的元素都能够响应这个事件。
附加说明
.live() 虽然很有用,但由于其特殊的实现方式,所以不能简单的在任何情况下替换 .bind()。主要的不同有:
在jQuery 1.4中,.live()方法支持自定义事件,也支持所有的 JavaScript 事件。在jQuery 1.4.1中,甚至也支持 focus 和 blue 事件了(映射到更合适,并且可以冒泡的focusin和focusout上)。另外,在jQuery 1.4.1中,也能支持hover(映射到"mouseenter mouseleave")。然而在jQuery 1.3.x中,只支持支持的JavaScript事件和自定义事件:click, dblclick, keydown, keypress,
keyup, mousedown, mousemove, mouseout, mouseover, 和 mouseup.
.live() 并不完全支持通过DOM遍历的方法找到的元素。取而代之的是,应当总是在一个选择器后面直接使用 .live() 方法,正如前面例子里提到的。
当一个事件处理函数用 .live() 绑定后,要停止执行其他的事件处理函数,那么这个函数必须返回 false。 仅仅调用 .stopPropagation() 无法实现这个目的。
参考 .bind() 方法可以获得更多关于事件绑定的信息。
在jQuery 1.4.1中,你可以一次绑定多个事件给 .live() ,跟 .bind() 提供的功能类似。
有个die方法与live正好想法,会解除用live注册的自定义事件。
相关文章推荐
- jQuery中事件绑定bind、live、delegate、on方法
- 浅谈jQuery代码优化之事件委托(事件绑定)——bind()|live()|delegate()|on()|off()|one()方法
- 原生JS事件绑定方法以及jQuery绑定事件方法bind、live、on、delegate的区别
- 解析jQuery的三种bind/One/Live事件绑定使用方法
- jquery live()方法绑定事件
- BIND?LIVE?DELEGATE?还是ON?–JQUERY事件绑定方法研究
- jQuery中bind(),live(),delegate(),on()绑定事件方法实例详解
- BIND?LIVE?DELEGATE?还是ON?–JQUERY事件绑定方法研究
- jQuery事件绑定方法bind、 live、delegate和on的区别
- jQuery的三种bind/One/Live/On事件绑定使用方法
- jQuery的三种bind/One/Live事件绑定使用方法
- jquery的on、off、one、bind、delegate、live、die绑定事件方法研究
- jQuery事件绑定方法bind、 live、delegate和on的区别
- BIND?LIVE?DELEGATE?还是ON?–JQUERY事件绑定方法研究
- jquery移除了live()、die(),新版事件绑定on()、off()的方法
- [TOP]原生JS事件绑定方法以及jQuery绑定事件方法bind、live、on、delegate的区别
- toggle不支持事件代理的解决办法: jquery live绑定toggle/live绑定toggle的方法
- jQuery页面元素动态添加后绑定事件丢失方法,非 live
- jQuery中bind(),live(),delegate(),on()绑定事件方法实例详解
- Jquery的事件绑定live方法在ios版的微信网站无法正常工作