什么是事件冒泡和捕获?

当浏览器检测到事件时，它会尝试查找事件处理程序。这个过程有三个阶段。假设我们有这些元素

   <body>
      <div>
        <button>click</button>
      </div>
    </body>

1-Capture阶段

browser is going to take a look at the element that was just clicked. Then it will go to the top parent element which is body. if there is any click handle in body, the browser will call it. after checking the body element, it will look at the second top parent element which is div element. This process will repeat until the browser gets down to the button element at the very bottom. Once it sees the button element, Phase One- Capturing will be over. Most of the time we ignore this phase. This code ignores this phase

document.addEventListener('click',handleClick)

如果你想涉及到这一阶段，你必须这样写

document.addEventListener('click',handleClick,true)

当我们需要检测目标之外的点击时，我们就需要这个阶段。也许我们有一个打开的下拉菜单或者模态菜单如果用户点击了模态菜单或者下拉菜单之外的任何地方，我们想要关闭它

2-Target阶段

浏览器会查看被点击的按钮元素，如果按钮有事件处理程序，浏览器会调用它。

3-气泡阶段

与捕获阶段相反，在这个阶段，浏览器将从直接的父元素(在这种情况下是div元素)开始这个过程，然后它将访问body元素。这段代码将为气泡阶段设置事件处理程序

document.addEventListener('click',handleClick,false)

2022-12-20 04:40:04

冒泡

  Event propagate to the upto root element is **BUBBLING**.

捕捉

  Event propagate from body(root) element to eventTriggered Element is **CAPTURING**.

2019-03-27 05:46:19

当浏览器检测到事件时，它会尝试查找事件处理程序。这个过程有三个阶段。假设我们有这些元素

   <body>
      <div>
        <button>click</button>
      </div>
    </body>

1-Capture阶段

browser is going to take a look at the element that was just clicked. Then it will go to the top parent element which is body. if there is any click handle in body, the browser will call it. after checking the body element, it will look at the second top parent element which is div element. This process will repeat until the browser gets down to the button element at the very bottom. Once it sees the button element, Phase One- Capturing will be over. Most of the time we ignore this phase. This code ignores this phase

document.addEventListener('click',handleClick)

如果你想涉及到这一阶段，你必须这样写

document.addEventListener('click',handleClick,true)

当我们需要检测目标之外的点击时，我们就需要这个阶段。也许我们有一个打开的下拉菜单或者模态菜单如果用户点击了模态菜单或者下拉菜单之外的任何地方，我们想要关闭它

2-Target阶段

浏览器会查看被点击的按钮元素，如果按钮有事件处理程序，浏览器会调用它。

3-气泡阶段

与捕获阶段相反，在这个阶段，浏览器将从直接的父元素(在这种情况下是div元素)开始这个过程，然后它将访问body元素。这段代码将为气泡阶段设置事件处理程序

document.addEventListener('click',handleClick,false)

2022-12-20 04:40:04

我发现这个教程在javascript.info中非常清楚地解释了这个主题。它最后的3点总结是对关键点的讨论。我在这里引用:

事件首先被捕捉到最深的目标，然后向上冒泡。在 IE<9，它们只是冒泡。所有处理程序都在冒泡阶段上工作，除了 addEventListener的最后一个参数为真，这是唯一的方法在捕获阶段捕获事件。冒泡/捕获可以由事件停止。cancelBubble=true (IE)或event.stopPropagation() 对于其他浏览器。

2015-05-14 08:51:09

If there are two elements element 1 and element 2. Element 2 is inside element 1 and we attach an event handler with both the elements lets say onClick. Now when we click on element 2 then eventHandler for both the elements will be executed. Now here the question is in which order the event will execute. If the event attached with element 1 executes first it is called event capturing and if the event attached with element 2 executes first this is called event bubbling. As per W3C the event will start in the capturing phase until it reaches the target comes back to the element and then it starts bubbling

捕获和冒泡状态是通过addEventListener方法的useCapture参数知道的

eventTarget.addEventListener(类型、侦听器(useCapture]);

默认情况下useCapture为false。这意味着它处于冒泡阶段。

var div1 = document.querySelector("#div1"); var div2 = document.querySelector("#div2"); div1。addEventListener(“点击”，函数(事件){ 警报(“您点击了div 1”); },真正的); div2。addEventListener(“点击”，函数(事件){ 警报(“您点击了div 2”); },假); # div1 { 背景颜色:红色; 填充:24 px; ｝ # div2 { 背景颜色:绿色; ｝ < div id = " div1 " > div 1 < div id = " div2 " > div 2 < / div > < / div >

请试着改变真假。

2014-03-04 12:45:50

DOM Events描述了事件传播的3个阶段:捕获阶段——事件向下到元素。目标阶段——事件到达目标元素。冒泡阶段——事件从元素冒泡。

2021-05-01 12:50:24

什么是事件冒泡和捕获?

推荐文章

最新文章

标签