事件委托、事件冒泡

最新推荐文章于 2024-07-25 08:06:37 发布

我是一个小稻米

最新推荐文章于 2024-07-25 08:06:37 发布

阅读量619

点赞数

分类专栏：前端文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/weixin_44669966/article/details/123277456

版权

前端专栏收录该内容

49 篇文章 2 订阅

订阅专栏

事件委托

不在事件的发生地（直接dom）上设置监听函数，而是在其父元素上设置监听函数，通过事件冒泡，父元素可以监听到子元素上事件的触发，通过判断事件发生元素dom的类型，来做出不同的响应。事件委托发生在冒泡阶段。

例子：
比如说在ul上绑定事件，依然可以通过e.target获得li的内容

<body>
    <ul>
        <li>评估</li>
        <li>几点</li>
        <li>得分</li>
    </ul>
</body>
<script>
    let ul = document.querySelector('ul')
    ul.onclick = function(e) {
        ul.removeChild(e.target);
        console.log(e.target)
    }
</script>

在这里插入图片描述
优点：

新添加的子元素也会有监听函数，也可以有事件触发机制。
减少内存消耗，节约效率

事件冒泡

如果在父元素上设置了事件监听机制，当点击第一个p标签时，会在p1上查找是否有事件处理函数。
如果没有，就向父元素上查找是否有事件处理函数。
如果有，就是自身的事件被触发后，再向父元素查找是否有相同类型的事件，如果有，就出发。
父元素的相同事件也会一级一级的向外触发，直到document/window,冒泡过程结束。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<!-- <script type="text/javascript">
			var a = document.getElementById('container').innerText
			console.log("head中：", a)
		</script> -->
	</head>
	<body>
		<div id="list1">
			<p id="p1">取消</p>
			<p id="p1">取消</p>
			<p id="p1">取消</p>
		</div>
		
		<div id="list2">
			<p id="p4">取消</p>
			<p id="p5">确定</p>
		</div>
		
		<script type="text/javascript">
		// 定义一个绑定事件的函数
			function bindEvent(elem, type, fn) {
				// elem：要绑定的对象
				// type：绑定的类型，例：click
				// fn：事件处理函数
				elem.addEventListener(type, fn);
			}
			// 仅绑定p1
			const p1 = document.getElementById('p1');
			bindEvent(p1, 'click', function (event) {
				// 阻止冒泡
				event.stopPropagation();
				console.log('click')
			})
			
			// 父元素设置事件监听
			const list1 = document.getElementById('list1');
			bindEvent(list1, 'click', function () {
				console.log('clicklist')
			})
		</script>
	</body>
</html>