DOM文档事件中的事件委派事件委派

90 阅读 0 评论 60 点赞

我是靠谱客的博主勤恳金针菇，最近开发中收集的这篇文章主要介绍DOM文档事件中的事件委派事件委派，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

DOM文档事件中的事件委派

事件委派

事件委派

指通过只绑定一次事件，即可应用到多个的元素上，事件的委派，是指将事件统一绑定给元素的共同的父亲元素，这样当后代元素上的事件触发时，会一直冒泡到父亲元素，从而通过父元素的响应函数来处理事件。事件委派是利用了事件冒泡，通过委派可以减少事件绑定的次数，提高程序的性能。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<ul id="bind">
<li><a href="javascript:;" class="link">传输1</a></li>
<li><a href="javascript:;" class="link">传输2</a></li>
<li><a href="javascript:;" class="link">传输3</a></li>
</ul>
<script>
let bind = document.getElementById("bind");
// 为ul绑定一个单击响应函数
bind.onclick = function (event) {
event = event || window.event;
// 如果触发事件的对象是我们期望的元素，则执行，否则不执行
if (event.target.className == "link") {
console.log("我是ul的单击响应函数");
}
};
</script>
</body>
</html>