浏览器在发生一个事件时会从经过顶层到目标的捕获过程，目标到顶层的冒泡过程，不多解释，看代码理解
<html>
<head>
<style>
#outer{
width: 200px;
height: 200px;
background: #F08738;
}
#mid{
width: 150px;
height: 150px;
background: #293484;
}
#inner{
width: 100px;
height: 100px;
background: #783948;
}
#target{
width: 50px;
height: 50px;
background: #98fe99;
}
</style>
</head>
<body>
<div id="outer">
<div id="mid">
<div id="inner">
<div id="target"></div>
</div>
</div>
</div>
<script>
var o = document.getElementById('outer');
var m = document.getElementById('mid');
var i = document.getElementById('inner');
var t = document.getElementById('target');
</script>
</body>
</html>
四个div层次很清楚
下面为div绑定事件
o.addEventListener('click', function(){console.log('outer')});
m.addEventListener('click', function(){console.log('mid')});
i.addEventListener('click', function(){console.log('inner')});
t.addEventListener('click', function(){console.log('target')});
点击target的结果如下，依次输出target inner mid outer
冒泡的结果，点击target, 它父层的div的click事件也会执行
再看捕获阶段
o.addEventListener('click', function(){console.log('outer')}, true);
m.addEventListener('click', function(){console.log('mid')}, true);
i.addEventListener('click', function(){console.log('inner')}, true);
t.addEventListener('click', function(){console.log('target')}, true);
addEventListener最后加了个参数，指明此事件在捕获阶段执行，其结果是 outer mid inner target
可以看出来从顶层到目标元素的捕获阶段
捕获，冒泡一起绑定
o.addEventListener('click', function(){console.log('outer bubble')}, false);
o.addEventListener('click', function(){console.log('outer')}, true);
m.addEventListener('click', function(){console.log('mid bubble')}, false);
m.addEventListener('click', function(){console.log('mid')}, true);
i.addEventListener('click', function(){console.log('inner bubble')}, false);
i.addEventListener('click', function(){console.log('inner')}, true);
t.addEventListener('click', function(){console.log('target bubble')}, false);
t.addEventListener('click', function(){console.log('target')}, true);
点击target结果是
outer
mid
inner
target bubble
target
inner bubble
mid bubble
outer bubble
可以看到先是执行捕获阶段的函数，然后是冒泡阶段的函数
对于目标元素target没有捕获冒泡区分，指定冒泡阶段的函数在指定捕获阶段的函数先执行了。执行顺序不确定
相关推荐
javascript 中事件冒泡和事件捕获机制的详解 二者作用：描述事件触发时序问题 事件捕获：从document到触发事件的那个节点，即自上而下的去触发事件—由外到内 事件冒泡：自下而上的去触发事件—由内到外 绑定事件...
JavaScript中的事件处理机制是网页交互的核心，其中包括了两种主要的事件传播模式：事件冒泡（Bubbling）和事件捕获（Cropping）。事件冒泡是指事件从最深的节点开始，然后逐级向上传播到最外层的节点。而事件捕获则...
冒泡事件和事件捕获是JavaScript中处理事件传播的两种主要模型，它们定义了事件在DOM树中传播的顺序。在实际的Web开发中，深入理解这两种模型对于正确处理事件，避免潜在的问题至关重要。 冒泡事件是指当一个事件在...
本文将深入探讨JavaScript事件机制，特别是事件的捕获和冒泡阶段。 首先，理解JavaScript事件的基础概念至关重要。事件是用户或浏览器在与网页交互时发生的动作，比如点击按钮、页面加载或滚动等。当这些事件发生时...
JavaScript中的事件处理是Web开发中的核心概念，主要涉及事件冒泡、事件捕获以及事件委托。这三种机制在处理用户交互和DOM元素之间的事件时起着至关重要的作用。 1. **事件冒泡**：事件冒泡是事件处理的默认模式，...
事件触发时序问题中的两个重要概念是事件冒泡（event bubbling）和事件捕获（event capturing）。这两个术语描述了事件流（event flow）在DOM树中的传播顺序。 事件冒泡是指当一个元素上的事件被触发后，该事件会...
本文实例讲述了JS html事件冒泡和事件捕获操作。分享给大家供大家参考，具体如下： 今天学习了事件冒泡和捕获，记录一下。...点击事件捕获冒泡实验</title> </head> <body> <div i
在IE浏览器中，没有标准的捕获事件，只有冒泡事件处理。对于其他大多数现代浏览器，它们支持W3C标准，允许开发者在捕获阶段拦截事件。在JavaScript中，可以通过在addEventListener方法中设置第三个参数为true来指定...
总的来说，事件冒泡和事件捕获是JavaScript中处理事件传播的两种模式，它们提供了灵活性，使得开发者可以根据需求选择合适的事件处理方式。事件委托是一种利用事件冒泡机制优化事件处理的方法，它允许在父元素上设置...
事件冒泡和事件捕获是两种不同的事件处理机制，它们决定了事件如何在DOM（Document Object Model）层次结构中传播。了解这两者对于优化事件处理性能和编写高效代码至关重要。 事件冒泡是从最具体的节点（通常是DOM...
在JavaScript中，有多种事件模型，包括事件冒泡（Bubble Phase）和捕获阶段（Capture Phase）。事件冒泡是最常见的一种，它始于事件目标元素（例如，用户点击的按钮），然后依次经过其所有父元素，直到到达文档的根...
1、冒泡事件： 事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。通俗来讲就是，就是当设定了多个div的嵌套时；即建立了父子关系，当父div与子div共同加入了onclick事件时，当触发了子div...
总之，JavaScript的事件处理是构建动态网页的重要手段，熟练掌握事件绑定、事件冒泡、事件捕获和事件执行顺序能帮助开发者编写更高效、更易于维护的代码。通过实践和不断学习，可以更深入地理解和运用这些概念。
在JavaScript中，事件处理是网页交互的核心部分，而事件冒泡、事件捕获和事件委托则是JavaScript事件模型中的三个重要概念。理解这三个概念对于优化网页性能和编写高效代码至关重要。 事件冒泡是指事件从最深的节点...
事件模型分为三个阶段：冒泡、目标和捕获。在IE浏览器中，事件通常从最具体的元素（如一个按钮）开始，然后向上冒泡到更不具体的元素（如其父元素），直到到达文档的根节点。然而，通过事件捕获，我们可以选择在事件...
JavaScript事件冒泡是Web开发中的一个关键概念，它在网页交互和动态效果中扮演着重要角色。事件冒泡源于浏览器处理事件的...熟练掌握事件冒泡、事件捕获以及如何阻止冒泡，对于提升JavaScript的事件处理能力至关重要。