事件委托
2023-10-17 本文已影响0人
Goorln
思考：
1.如果同时给多个元素注册事件，我们怎么做的？for循环注册事件
<body>
<ul>
<li>第一个</li>
<li>第二个</li>
<li>第三个</li>
<li>第四个</li>
<li>第五个</li>
</ul>
<script>
const lis = document.querySelectorAll("ul li");
for (let i = 0; i < lis.length; i++) {
lis[i].addEventListener("click", function () {
alert(`第${i + 1}个被点击了`);
});
}
</script>
</body>
for循环注册事件.gif
2.有没有一种 技巧 注册一次事件就能完成以上效果呢？事件委托
事件委托 是利用事件流的特征解决一些开发需求的知识技巧
- 优点：减少注册次数，可以提高程序性能
- 原理：事件委托其实是利用 事件冒泡 的特点。
- 给父元素注册事件，当我们触发子元素的时候，会冒泡到父元素身上，从而触发父元素的事
件 - 实现：事件对象.target. tagName 可以获得真正触发事件的元素
uli父子元元素素 点击事件
ul.addEventListener('click', function(){}) 执行父级点击事件
<body>
<ul>
<li>第一个</li>
<li>第二个</li>
<li>第三个</li>
<li>第四个</li>
<li>第五个</li>
<p>不需要变色</p>
</ul>
<script>
const ul = document.querySelector("ul");
ul.addEventListener("click", function (e) {
console.log(e.target.tagName);
if (e.target.tagName === "LI") {
e.target.style.color = "pink";
}
});
</script>
</body>
事件委托.gif
