jquery事件委托的原理和用途
事件委托
声明：这一篇文章只是阐述了委托事件的原理和用委托的好处还有就是在什么时候要委托合适.在这里用的是on()和off()而对于委托的其他方法(delegate()、live()等)和各个方法的比较在这里并没有详细阐述,以后如果有机会在发一篇
1.什么是委托呢？
a)定义：把一件事交给别人代做就叫做委托
b)问题：为什么要把事交给别人来做呢？
原因很简单：第一、自己不想做,所以交给别人 第二、自己不会做,所以交给别人来做 第三、让别人来做这一件事更有优势等等(这也是为什么要使用委托的原因)
c)为了方便理解举个简单例子(转载：http://www.cnblogs.com/secying/archive/2012/03/22/2411780.html)：有三个同事预计会在周一收到快递。为签收快递，有两种办法：一是三个人在公司门口等快递；二是委托给前台MM代为签收。现实当中，我们大都采用委托的方案（公司也不会容忍那么多员工站在门口就为了等快递）。前台收到快递后，她会判断收件人是谁，然后按照收件人的要求签收，甚至代为付款。这种方案还有一个优势，那就是即使公司里来了新员工（不管多少），前台也会在收到寄给新员工的快递后核实并代为签收(即让前台来做这件事更具优势)。 这个样子理解就比较容易懂了
2.那事件委托呢(至于什么是事件就不再这里阐述,不懂的朋友请自己谷歌)？如果将事件比作是一件要做的事,那么事件委托即将事件这件事交个别人来做,而在js里面就是将一个事件交给别的元素代劳
3.Jquery是怎么具体实现事件委托？
a)事件委托的例子,看下面代码：
<head>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<scrpty type="text/JavaScript">
$(function(){
//将span的单击事件委托给div
$(‘div‘).on(‘click‘,‘span‘,function(e){alert("this is span label");});
//单击span标签-执行结果弹出 this is span label
});
</scrpty>
</head>
<body>
<div>
<span id="span">hello</span>
<input type="text" >
</div>
</body>
分析以上的代码其实click事件是绑定在div这个元素上的,所以按道理点击div这个事件是会触发的,但事实是不会.让我们来分析一下原因(委托实现的原理)：
第一、委托的事件是以冒泡的形式向外传播的所以只要点击div的子元素都会触发委托的事件
第二、当事件传播到被委托元素(这里指div)的时候会首先判断e.type和e.target这两个属性.
综合以上两点只有点击委托事件的元素(这里指span)才会触发绑定在div元素上的单击事件
b)分析以下一种情况,将以上js代码改成：
<scrpty type="text/JavaScript">
//只是为span标签绑定单击事件
$(‘span‘).on(‘click‘,function(e){alert("this is span label");});
//动态增加10个span标签
for(var i=0;i<10;i++){
$(‘.div‘).append($(‘<span>span1</span><br />‘));
}
</scrpty>
在这种情况下只有id为span的标签绑定了单击事件,而后面动态增加的span标签确没有,
在这种情况下怎么为后续的span标签添加事件呢？在添加span标签代码的后面加上 $(‘span‘).on(‘click‘,function(e){});是不是很简单呢？既然可以这样写那么委托有存在
的必要吗？
根据以上的第一点可知：委托的事件是绑定在一个以存在的元素上的,所以他只绑定一次,而$(‘span‘).on(‘click‘,function(e){});这段代码是为每一个span元素绑定一次,
就是说如果有200个span元素就要绑定两百次,增加的代码的冗余和降低了性能,所以委托不仅增强了性能而且增加了代码的可读性.
总结：一、为了给动态生成的元素增加事件时用委托 二、如果是一次性要给很多个相同的元素绑定事件时用委托 好处：增强性能和代码可读性
本文出自 “坚持原则旨在改变” 博客，请务必保留此出处http://iteaing.blog.51cto.com/8800269/1565672
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
