事件委托
事件委托是利用事件流的特征解决一些开发需求的知识技巧
优点:减少注册次数,可以提高程序性能
原理:事件委托其实是利用事件冒泡的特点
做法:给父元素注册事件,当我们触发子元素的时候,会冒泡到父元素身上,从而触发父元素的事件
实现:事件对象.target.tagName
可以获得真正触发事件的元素
例如:
<body>
<ul>
<li>变色1</li>
<li>变色2</li>
<li>变色3</li>
<p>不变色</p>
</ul>
<script>
const ul = document.querySelector('ul')
ul.addEventListener('click',function(e) {
if(e.target.tagName === 'LI') {
e.target.style.color = 'red'
}
})
</script>
</body>