事件监视器，冒泡传递，捕获传递的区别

最新推荐文章于 2023-12-22 10:34:36 发布

原创最新推荐文章于 2023-12-22 10:34:36 发布 · 190 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#冒泡传递 #捕获传递

h5 同时被 3 个专栏收录

1 篇文章

订阅专栏

冒泡传递

1 篇文章

订阅专栏

捕获传递

1 篇文章

订阅专栏

本文深入探讨了HTML中事件监听器的使用，包括如何为不同元素添加点击事件，以及冒泡和捕获两种传递方式的区别。通过具体代码示例，展示了按钮和段落元素上事件的触发顺序和效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	
	</head>
	<body>
		
		<ul>
			<li>
				<button id="aa">aa</button>
			</li>
			<li>
				<button id="bb">bb</button>
			</li>
			<li>
				<button id="cc">cc</button>
			</li>
			<li id="li1"><p id="p1">冒泡传递</p></li>
			<li id="li2"><p id="p2">捕获传递</p></li>
		</ul>
			<script>
			document.getElementById("aa").addEventListener("click",
			function()
				{
					alert("hello");
				});
				document.getElementById("bb").addEventListener("click",
			function()
				{
					alert("world");
				});
	document.getElementById("cc").addEventListener("click",
			function()
				{
					alert("abc");
				});
					document.getElementById("p1").addEventListener("click",
			function()
				{
					alert("p");
				},false);
				document.getElementById("li1").addEventListener("click",
			function()
				{
					alert("li");
				},false);
			
				document.getElementById("p2").addEventListener("click",
			function()
				{
					alert("p");
				},true);
					document.getElementById("li2").addEventListener("click",
			function()
				{
					alert("li");
				},true);
		</script>
	</body>
</html>