1.概念:事件委托就是事件目标自身不处理事件,而是把处理任务委托给其父元素或者祖先元素,甚至根元素(document)。
例如:有三个同事预计会在周一收到快递。为签收快递,有两种办法:一是三个人在公司门口等快递;二是委托给前台MM代为签收。现实当中,我们大都采用委托的方案(公司也不会容忍那么多员工站在门口就为了等快递)。前台MM收到快递后,她会判断收件人是谁,然后按照收件人的要求签收,甚至代为付款。这种方案还有一个优势,那就是即使公司里来了新员工(不管多少),前台MM也会在收到寄给新员工的快递后核实并代为签收。
2.原理:事件冒泡机制;
3.区别:.bind():只能给调用它的时候已经存在的元素绑定事件,不能给未来新增的元素
delegate()绑定事件解决“事件传播链”过长的问题(类似于新来的员工收不到快递)。
ps:在下列情况下,应该使用.live()或.delegate(),而不能使用.bind():
为DOM中的很多元素绑定相同事件;
为DOM中尚不存在的元素绑定事件;
4.特点:优化性能,减少代码冗余;
<ul><!--ul事件委托的执行者-->
<li>1.为DOM中的很多元素绑定相同事件</li>
<li>发出事件委托的人</li>
<li>利用冒泡原理触发事件</li>
<li>我是事件委托的幕后者</li>
</ul>
$(document).ready(function(){
var parentNode = $('ul');
parentNode.on('click',function(e){
var target = e.target;
var $target = $(target);
// $target.parent().find('p').remove();
//找到需要操作的元素
if($target.is('li')){
var block = '<p style="color:red">我是由事件委托产生的新增元素</p>';
$target.parent().append(block);
}
});
});
點(diǎn)擊查看更多內(nèi)容
4人點(diǎn)贊
評論
評論
共同學(xué)習(xí),寫下你的評論
評論加載中...
作者其他優(yōu)質(zhì)文章
正在加載中
感謝您的支持,我會繼續(xù)努力的~
掃碼打賞,你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃,即可進(jìn)行掃碼打賞哦