jQuery绑定事件的⽅法四种⽅法
jq给元素绑定事件的⽅法有4种，
1.bind()
jquery源码在线
2.live()
3.live()
<()  //on常⽤
⼀：bind(type,[data],function(eventObject))
bind是使⽤频率较⾼的⼀种，作⽤就是在选择到的元素上绑定特定事件类型的监听函数，参数的含义如下：
type：事件类型，如click、change、mouseover等;
data：传⼊监听函数的参数，通过event.data取到。可选;
function：监听函数，可传⼊event对象，这⾥的event是jQuery封装的event对象，与原⽣的event对象有区别，使⽤时需要注意  bind的源码：
1 2 3 4 5 6 7
bind: function( types, data, fn ) { ( types, null, data, fn ); }
$('#myol li').bind('click',getHtml);
bind的特点就是会把绑定到⽬标元素上，有⼀个绑⼀个，在页⾯上的元素不会动态添加的时候使⽤它没什么问题。但如果列表中动态增加⼀个“列表元素5”，点击它是没有反应的，必须再bind⼀次才⾏。要想不这么⿇烦，我们可以使⽤live。
jQuery还有⼀种事件绑定的简写⽅式如a.click(function(){});、a.change(function(){})；等，它们的作⽤与bind⼀样，仅仅是简写⽽已。
⼆：live(type, [data], fn)
live的参数和bind⼀样，它⼜有什么蹊跷呢，我们还是先瞄⼀眼源码：
1 2 3 4 5 6 7live: function( types, data, fn ) {
jQuery( t ).on( types, this.selector, data, fn ); return this;
}
可以看到live⽅法并没有将绑定到⾃⼰(this)⾝上，⽽是绑定到了t上了。这个context是什么东西呢?其实就是元素的限定范围，看了下⾯的代码就清楚了：
1 2
3 4 5$('#myol li').context; //document $('#myol li','#myol').context; //document $('#myol li',$('#myol')[0]); //ol
通常情况下，我们都不会像第三种⽅式那样使⽤选择器，所以也就认为这个context通常就是document了，即live⽅法把绑定到了document上了。不把直接绑定在元素上，你是不是想起事件委托机制来了呢?若没有，可以点击这⾥回忆⼀下。live正是利⽤了事件委托机制来完成事件的监听处理，把节点的处理委托给了document。在监听函数中，我们可以⽤event.currentTarget来获取到当前捕捉到事件的节点。下⾯的例⼦来揭晓：
1$('#myol li').live('click',getHtml);
三：live存在那样的缺点，所以我们就思考，既然⽼爷⼦负担那么重，可不可以别把绑定在document上呢，绑定在就近的⽗级元素上不就好了。顺应正常逻辑，delegate诞⽣了。
参数多了⼀个selector，⽤来指定触发事件的⽬标元素，将被绑定在调⽤此⽅法的元素上。看看源码：
1 2 3 4 5delegate: function( selector, types, data, fn ) { ( types, selector, data, fn );
}
⼜是调⽤了on，并且把selector传给了on。看来这个on真的是举⾜轻重的东西。照样先不管它。看看⽰例先：
1$('#myol').delegate('li','click',getHtml);
看了这么多，你是不是迫不及待想看看这个on的真实⾯⽬了呢，这就来：
1on(type,[selector],[data],fn)
参数与delegate差不多但还是有细微的差别，⾸先type与selector换位置了，其次selector变为了可选项。交换位置的原因不好查证，应该是为了让视觉上更舒服⼀些吧。
我们先不传selector来看⼀个例⼦：
1$('#myol li').on('click',getHtml);
推荐就是尽量使⽤on，因为其他⽅法都是内部调⽤on来完成的，
直接使⽤on可以提⾼效率，⽽且你完全可以⽤on来代替其他三种写法。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。