什么是事件冒泡和事件捕获的用法？ [英] What is the use of event bubbling and event capturing?

问题描述

事件冒泡和事件捕获的用途是什么？

解决方案如果你点击一个元素，例如一个链接这是结构在页面上，如下所示：

pre $

$ A

那么不仅A会得到onclick事件，而且所有的元素也都会得到onclick事件。第一轮是从下到上的捕捉阶段，每个元素都有onclick事件，并有能力打破事件。当捕获结束时，会发生定位阶段 - 这是被点击的最顶层的元素。然后冒泡发生，这几乎与捕获相同，但这次它倒退，从上到下。所以在下面的例子中，点击不是1个onclick事件，但实际上是5个（2个捕获，1个目标，2个冒泡）。

捕获阶段

  v --- BODY ---：onclick，break event？ 
 v --DIV--：onclick，中断事件？ 
  

定位阶段

  v -A-：onclick，中断事件？ 
  

冒泡阶段

  v --DIV--：onclick，break事件？ 
 v --- BODY ---：onclick，中断事件？ 
  

What is the use of event bubbling and event capturing?

解决方案

If you click on an element, for example a link which is structured on the page as follows:

- BODY
  - DIV
    - A

then not only A gets the onclick event but all the elements UNDER it too. The first round is the capturing phase which goes from bottom to top, every element gets the onclick event and has the ability to break the event. When capturing is over the targeting phase occurs - that is the topmost element that was clicked. And afterwards bubbling happens, that's almost the same as capturing but this time it goes backwards, from top to bottom. So in the following example after a click not 1 onclick event occurs but actually 5 (2 x capturing, 1 x targeting, 2 x bubbling).

Capturing phase

v ---BODY--- :onclick, break event?
v  --DIV--   :onclick, break event?

targeting phase

v    -A-     :onclick, break event?

bubbling phase

v  --DIV--   :onclick, break event?
v ---BODY--- :onclick, break event?

这篇关于什么是事件冒泡和事件捕获的用法？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！