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

javascript中的事件委托（代理）

2017-09-05 14:53 441 查看

—–事件委托的原理用到的就是事件冒泡和目标元素，把事件处理器添加到父元素，等待子元素事件冒泡，并且父元素能够通过target（IE为srcElement）判断是哪个子元素，从而做相应处理。

传统的事件处理：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
</ul>
</body>
</html>
<script>
(function () {
var oli = document.getElementsByTagName("li");
for (var i = 0; i < oli.length; i++) {
oli[i].addEventListener("click",showCon,false);
}
function showCon() {
console.log(this.innerHTML);
}
})()
</script>

事件委托

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
</ul>
</body>
</html>
<script>
(function(){
var oul = document.getElementsByTagName("ul")[0];
oul.addEventListener('click',showCon,false);
function showCon(e) {
e=e||window.event;
var targetElement=e.target||e.srcElement;
if(targetElement.nodeName.toLowerCase()==="li"){
console.log(targetElement.innerHTML);
}
}
})();
</script>

事件委托的优点：

1.管理的函数变少了。不需要为每个元素都添加监听函数。对于同一个父节点下面类似的子元素，可以通过委托给父元素的监听函数来处理事件。

2.可以方便地动态添加和修改元素，不需要因为元素的改动而修改事件绑定。

3.JavaScript和DOM节点之间的关联变少了，这样也就减少了因循环引用而带来的内存泄漏发生的概率

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： js事件委托 javascript 事件委托事件代理

相关文章推荐

新的分享

章节导航