JQuery绑定事件bind（）方法和on（）方法的优缺点

jQuery绑定事件的方法有四种：bing（）、live（）、delegate（）、on（），其中live（），已经被淘汰了，其存在很多的问题，不适合使用，而delegate能够在绑定事件后，依然可以添加动态元素事件。on（）可以说是前三种方法的结合体。

1.bind（）方法：
bind()函数用于为每个匹配元素的一个或多个事件绑定事件处理函数。
2、bind（event，data，function）
参数描述：
event事件是必需要写的。规定添加到元素的一个或多个事件。由空格分隔多个事件。而且必须是有效的事件。
data数据可选。规定传递到函数的额外数据。
function 必需。规定当事件发生时运行的函数。
3、demo：

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").bind("click",function(){
    $("div").slideToggle();
  });
});
</script>
</head>
<body>
<div>This is a box.</div>
<button>请点击这里</button>
</body>
</html>

4、注意：
在执行bind()时，事件处理函数会绑定到每个匹配元素上。例如你使用bind()里面所有的button元素绑定了click事件，那么当时文档中所存在的每个button元素都会绑定click事件。如果之后你再向文档中添加了新button的元素，其绑定事件不会对其生效。如果你希望绑定事件对未来新添加的元素也生效，请使用on()、delegate()、live()等事件函数(尽量优先使用靠前的事件函数)。
另外，如果同一元素、同一事件类型绑定多个事件处理函数。那么触发事件时，jQuery会按照绑定的先后顺序依次执行绑定的事件。
如果想要解绑bind()绑定的事件，就用unbind()函数。
5、bing（）优缺点：
优点：
1.这个方法的兼容性好，能够提供出对每个事件的兼容问题的解决方案；
2.非常的方便，简单；
3.如.click(), .hover()…这些非常方便的事件，都是bind的一种简化处理方式；
4.对于利用ID选出来的元素是非常好的，不仅仅是很快的可以找到(因为一个页面只有一个id),而且当事件发生时，handler可以立即被执行(相对于后面的live, delegate)实现方式；

缺点：
1.它会绑定事件到所有的选出来的元素上；
2.它不会绑定到在它执行完后动态添加的那些元素上；
3.当元素很多时，会出现效率问题；
4.当页面加载完的时候，你才可以进行bind()，所以可能产生效率问题；

1、on（）
on() 方法在被选元素及子元素上添加一个或多个事件处理程序。
2、on（event，childSelector，data,function）
event必需。规定要从被选元素移除的一个或多个事件或命名空间。由空格分隔多个事件值。必须是有效的事件。
childSelector 可选。规定只能添加到指定的子元素上的事件处理程序（且不是选择器本身，比如已废弃的 delegate() 方法）。
data 可选。规定传递到函数的额外数据。
function 可选。规定当事件发生时运行的函数。
map 规定事件映射 ({event:function, event:function, …})，包含要添加到元素的一个或多个事件，以及当事件发生时运行的函数。
3、demo：

<!DOCTYPE html>
<html>
<head>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("p").on("click",function(){
    alert("The paragraph was clicked.");
  });
});
</script>
</head>
<body>

<p>Click this paragraph.</p>

</body>
</html>

4、其实.bind(), .live(), .delegate()都是通过.on()来实现的，.unbind(), .die(), .undelegate(),也是一样的都是通过.off()来实现的
这是1.8.2的源码：

bind: function( types, data, fn ) {
    return this.on( types, null, data, fn );
},
unbind: function( types, fn ) {
    return this.off( types, null, fn );
},

live: function( types, data, fn ) {
    jQuery( this.context ).on( types, this.selector, data, fn );
    return this;
},
die: function( types, fn ) {
    jQuery( this.context ).off( types, this.selector || "**", fn );
    return this;
},

delegate: function( selector, types, data, fn ) {
    return this.on( types, selector, data, fn );
},
undelegate: function( selector, types, fn ) {
    // ( namespace ) or ( selector, types [, fn] )
    return arguments.length === 1 ? this.off( selector, "**" ) : this.off( types, selector || "**", fn );
},

5、优缺点：
优点：
1.提供了一种统一绑定事件的方法；
2.仍然提供了.delegate()的优点，当然如果需要你也可以直接用.bind()；

缺点：
也许会对你产生一些困扰，因为它隐藏了一前面我们所介绍的三种方法的细节；

JQuery绑定事件bind（）方法和on（）方法的优缺点

猜你喜欢