DOM事件冒泡和事件委托

最新推荐文章于 2023-07-05 22:21:38 发布

段茜琳

最新推荐文章于 2023-07-05 22:21:38 发布

阅读量182

点赞数

分类专栏：笔记文章标签： dom js javascript event

本文链接：https://blog.csdn.net/weixin_45649686/article/details/113270182

版权

笔记专栏收录该内容

88 篇文章 3 订阅

订阅专栏

1.事件冒泡

1.DOM模型是一个树形结构，在DOM模型中，HTML元素是有层次的。当一个HTML元素产生一个事件时，该事件会在DOM树中元素节点与根结点之间按特定的顺序传播，路径所经过的节点都会收到该事件，这个传播过程就是DOM事件流。
2.DOM事件标准定义了两种事件流，分别是捕获事件和冒泡事件。事件捕获的是从document到触发事件的那个节点，即自上而下得去触发事件。相反的，事件冒泡是自下而上的去触发事件。
3.阻止事件冒泡：
event.stopPropagation()方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			function fu(){
				alert("父标签")
			}
			function zi(e){
				alert('子标签')
				e.stopPropagation();//阻止事件向上传播
			}
			function test(e){
				alert()
				e.preventDefault()//阻止默认事件的发生
			}
			function test1(e){
				var res = e.target;
				console.log(res.innerHTML)
			}
		</script>
	</head>
	<body>
		<div onclick="fu()">
			div
			<!-- 当子集标签事件触发后，会向上冒泡，从而触发父级标签事件 -->
			<input type="button" value="按钮" onclick="zi(event)"/>
		</div>
		<a href="http://www.baidu.com" onclick="test(event)">冒泡</a>
		<!-- 事件委托：
		当子标签事件触发后，会冒泡到父级标签，那么就利用这一特点，为父级标签添加事件，只需要绑定一次即可 -->
		<ul onclick="test1(event)">
			<li>li1</li>
			<li>li2</li>
			<li>li3</li>
			<li>li4</li>
		</ul>
	</body>
</html>

2.事件委托

当子标签事件被触发后，会冒泡到父级标签，那么就利用这一特点，为父级标签添加事件，只需要绑定一次即可。
使用event.target获得所点的字节点标签。

段茜琳

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM事件冒泡和事件委托

1.事件冒泡1.DOM模型是一个树形结构，在DOM模型中，HTML元素是有层次的。当一个HTML元素产生一个事件时，该事件会在DOM树中元素节点与根结点之间按特定的顺序传播，路径所经过的节点都会收到该事件，这个传播过程就是DOM事件流。2.DOM事件标准定义了两种事件流，分别是捕获事件和冒泡事件。事件捕获的是从document到触发事件的那个节点，即自上而下得去触发事件。相反的，事件冒泡是自下而上的去触发事件。3.阻止事件冒泡：event.stopPropagation()方法<!DOCTY
复制链接

扫一扫