事件委托是利用事件流的特征解决一些开发需求的知识技巧
优点:减少注册次数,提高程序性能
原理:利用事件冒泡的特点。
给父元素注册事件,当我们触发子元素的时候,会冒泡到父元素上,从而触发父元素事件。
真正触发的元素:e.target.tagName
<body>
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
<p>我不变红</p>
</ul>
<script>
//获取父元素
const t = document.querySelector('ul')
t.addEventListener('click', function (e) {
//console.log(e.target) 点击的对象
// e.target.style.color = 'red' //点击后变红
if (e.target.tagName === 'LI') {
e.target.style.color = 'red'
}
})
</script>
</body>