您的位置:首页 > Web前端 > JavaScript

【JS深入学习】——事件代理/事件委托

2016-12-29 09:55 190 查看
事件代理/事件委托(event delegation)

需求一:当一个div内部有多个事件发生,给每个元素逐个添加事件十分麻烦...

需求二:在项目中我们常常需要动态的添加元素,不可避免的需要为那些未来添加的元素增加事件...

我们:怎么办呢?

事件委托:我可以!使用我能让你避免对特定的每个节点添加事件监听器。

我们:你到底是什么鬼?

事件委托:我又叫事件代理,说白了就是利用浏览器事件捕获和冒泡的原理,将事件监听器添加到特定节点的父元素上,我就会分析从子元素冒泡上来的事件,找到是哪个子元素的事件。

举个栗子:

$(parentsEle).click(function (e) {
var e = e || window.event,
targetEle = e.target || e.srcElement,
_this = this;
switch (targetEle.className) {
case "font_r":
$(targetEle).fadeOut();
_this.siblings(".header").fadeIn();
break;
}
})

明白了吗?


                                            
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: