API事件委托

jl_3288

已于 2024-02-25 22:05:53 修改

阅读量222

点赞数 2

分类专栏： API 文章标签： javascript 前端

于 2024-02-09 16:03:49 首次发布

本文链接：https://blog.csdn.net/jl_3288/article/details/136086948

版权

API 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

事件委托

事件委托是利用事件流的特征解决一些开发需求的知识技巧
优点：减少注册次数，可以提高程序性能
原理：事件委托其实是利用事件冒泡的特点
做法：给父元素注册事件，当我们触发子元素的时候，会冒泡到父元素身上，从而触发父元素的事件
实现：事件对象.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>