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

本文链接：https://blog.youkuaiyun.com/ZopaulCode/article/details/97762088

本文探讨了JavaScript中事件的两种传递机制：冒泡和捕获。冒泡现象是指事件首先从最内层元素开始触发，然后逐级向上层元素传播；而捕获则是从最外层元素开始，向下层元素传递。通过代码示例进行了解和验证这两种事件处理方式。

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

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

以下是测试代码示例：

<!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>