jQuery事件绑定on()、bind()与delegate() 方法详解

jquery中有四种事件绑定函数,bind(),live(),on(),delegate(),由于live现在并不常用,因此不做过多解释。

1. bind()用法

$("div p").bind("click",function(){
alert("点击");
});
同:
$("div p").click(function(){
alert("点击");
});
这里为div绑定了click事件,相应为弹出内容,绑定简单快捷,但是存在两个问题:
1;用了隐式迭代方法,如果匹配的元素特别多,例如div中有多个p标签,方法就绑定多次,影响性能。
2;对于尚未存在的元素无法绑定,点击页面上的按钮,将动态添加一个p元素,点击这个p元素会发现动作没有响应。
用delegate方法可以解决以上问题。 2.delegate()用法
$("div").delegate("p", "click", function () {
alert($(this).text());
});

这种方式采用了事件委托概念,不直接为p元素绑定事件而是为其父元素(或者祖先元素也可)绑定事件,当在div内点击任意元素时,事件一层层根据event target向上冒泡,直到到达绑定事件的元素,在冒泡过程中,如果事件的currentTarget与选择器匹配,就会执行代码。

这样就解决了bind()的问题,不用再一个个为p元素绑定事件,也可以为动态添加进来的p元素绑定,甚至如果将事件绑定到document上,不用等document准备就可以执行绑定。不过冒泡的方式也有会存在性能问题。

3.on()用法

on()将之前的绑定事件方法做了统一无论bind()还是delegate()其实都是通过on()方法实现的,只是参数不同罢了。因此我在工作中用的比较多的是on()。

on()在1.7版本之后出现。以上的代码便可以如下来改写:

$("div").on("click","p",function(){
alert($(this).text());
})

有绑定事件自然也有移除事件,以上的方法对应的解绑事件分别是:

$( "div p" ).unbind( "click", handler );
$( "div" ).undelegate( "p", "click", handler );
$( "div" ).off( "click", "p", handler );

当然我们可以根据自己的需要来选用合适的方法,需要注意的是:

1.选择器匹配到的元素比较多时,不要用bind()迭代绑定。

2.用id选择器时可以用bind()。

3.需要给动态添加的元素绑定事件时,用delegate(),或者on()。

4.用delegate(),和on(),dom树不要太深。

5.尽量使用on()

 
上一篇:【BZOJ】【2879】【NOI2012】美食节


下一篇:Codeforces Round #340 (Div. 2) E. XOR and Favorite Number