【Javascript】事件的冒泡与捕获传递方式

关注

原创最新推荐文章于 2026-07-15 13:27:31 发布 754 阅读 AI 写同款· GEO 优化 ›

Spring Boot应用Docker化实战：从Dockerfile编写到镜像推送完整流程本文详细介绍了将Spring Boot应用Docker化的完整实战流程。从环境准备、项目审视，到编写高效且安全的Dockerfile，重点讲解了多阶段构建、镜像层优化、Spring Boot分层JAR等核心技巧，并涵盖了镜像构建、验证、调试以及最终推送至仓库并集成CI/CD的最佳实践，帮助开发者构建生产级Docker镜像。阅读详情

事件有冒泡和捕获两种传递方式，冒泡传递方式先触发内部元素的事件，后触发外部元素的事件，捕获传递方式则相反。

以下是测试代码示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>冒泡与捕获</title>
    </head>
    <style>
    .divTest {
		margin: 20px auto;
		width: 300px;
		height: 180px;
		border: 2px solid red;
	}
	.pTest {
		width: 100px;
		border: 2px solid green;
		cursor: pointer;
		margin-left: 75px;
		text-align: center;
	}
    </style>
    <body>
        <div class="divTest" id="id1">
            <p class="pTest" id="bubbing1">
                冒泡
            </p>
        </div>
        <div class="divTest" id="id2">
            <p class="pTest" id="bubbing2">
                阻止冒泡
            </p>
        </div>
        <div class="divTest" id="id3">
            <p class="pTest" id="capture1">
                获捕
            </p>
        </div>
        <div class="divTest" id="id4">
            <p class="pTest" id="capture2">
                阻止获捕
            </p>
        </div>
        <script>
            // 冒泡
			var x = document.getElementById("id1");
			var y = document.getElementById("bubbing1");
			x.addEventListener('click', function () { alert("我是外层元素-div"); }, false);
			y.addEventListener('click', function () { alert("我是内层元素-p"); }, false);
			// 阻止冒泡
			x = document.getElementById("id2");
			y = document.getElementById("bubbing2");
			x.addEventListener('click', function () { alert("我是外层元素-div"); }, false);
			y.addEventListener('click', function (e) {
				alert("我是内层元素-p，阻止冒泡行为要加到内层事件上");
				stopBubble(e);
			}, false);

		    // 捕获
			x = document.getElementById("id3");
			y = document.getElementById("capture1");
			x.addEventListener('click', function () { alert("我是外层元素-div"); }, true);
			y.addEventListener('click', function () { alert("我是内层元素-p"); }, true);
			// 阻止捕获
			x = document.getElementById("id4");
			y = document.getElementById("capture2");
			x.addEventListener('click', function (e) {
				alert("我是外层元素-div，阻止捕获行为要加到外层事件上");
				stopBubble(e);
			}, true);
			y.addEventListener('click', function () { alert("我是内层元素-p"); }, true);


			function stopBubble(e) {
				if (e && e.stopPropagation) {
					e.stopPropagation();
				} else {
					window.event.cancelBubble = true;
				}
			}
        </script>
    </body>
</html>