什么是事件冒泡和捕获?

2020/09/18 18:01 · javascript ·  · 0评论

事件冒泡和捕获之间有什么区别?什么时候应该使用冒泡与捕获?

事件冒泡和捕获是HTML DOM API中事件传播的两种方式,当事件发生在另一个元素内部的元素中,并且两个元素都已注册了该事件的句柄时。事件传播模式确定元素什么顺序接收事件

冒泡时,事件首先由最里面的元素捕获和处理,然后传播到外面的元素。

通过捕获,事件首先被最外面的元素捕获并传播到内部元素。

捕获也称为“滴答”,它有助于记住传播顺序:

down流,冒泡

过去,Netscape提倡事件捕获,而Microsoft提倡事件冒泡。两者都是W3C 文档对象模型事件标准(2000)的一部分。

IE <9 使用事件冒泡,而IE9 +和所有主流浏览器均支持。另一方面,对于复杂的DOM ,事件冒泡性能可能会稍低

我们可以addEventListener(type, listener, useCapture)在冒泡(默认)或捕获模式下使用来注册事件处理程序。要使用捕获模型,请将第三个参数传递为true

<div>
    <ul>
        <li></li>
    </ul>
</div>

在上面的结构中,假定li元素中发生了单击事件

在捕获模型中,事件将首先处理(将div首先div触发will 中的click事件处理程序),然后在中处理ul,然后在目标元素中最后处理li

在冒泡模型中,将发生相反的情况:事件将首先由li,然后由ul,最后由div元素处理。

有关更多信息,请参见

在下面的示例中,如果单击任何突出显示的元素,则可以看到事件传播流的捕获阶段首先发生,然后是冒泡阶段。

var logElement = document.getElementById('log');

function log(msg) {
    logElement.innerHTML += ('<p>' + msg + '</p>');
}

function capture() {
    log('capture: ' + this.firstChild.nodeValue.trim());
}

function bubble() {
    log('bubble: ' + this.firstChild.nodeValue.trim());
}

function clearOutput() {
    logElement.innerHTML = "";
}

var divs = document.getElementsByTagName('div');
for (var i = 0; i < divs.length; i++) {
    divs[i].addEventListener('click', capture, true);
    divs[i].addEventListener('click', bubble, false);
}
var clearButton = document.getElementById('clear');
clearButton.addEventListener('click', clearOutput);
p {
    line-height: 0;
}

div {
    display:inline-block;
    padding: 5px;

    background: #fff;
    border: 1px solid #aaa;
    cursor: pointer;
}

div:hover {
    border: 1px solid #faa;
    background: #fdd;
}
<div>1
    <div>2
        <div>3
            <div>4
                <div>5</div>
            </div>
        </div>
    </div>
</div>
<button id="clear">clear output</button>
<section id="log"></section>

JSFiddle的另一个示例

描述:

quirksmode.org对此有很好的描述。简而言之(从quirksmode复制):

事件捕捉

使用事件捕获时

               | |
---------------| |-----------------
| element1     | |                |
|   -----------| |-----------     |
|   |element2  \ /          |     |
|   -------------------------     |
|        Event CAPTURING          |
-----------------------------------

element1的事件处理程序首先触发,element2的事件处理程序最后触发。

事件冒泡

使用事件冒泡时

               / \
---------------| |-----------------
| element1     | |                |
|   -----------| |-----------     |
|   |element2  | |          |     |
|   -------------------------     |
|        Event BUBBLING           |
-----------------------------------

element2的事件处理程序首先触发,element1的事件处理程序最后触发。


使用什么?

这取决于您想做什么。没有更好的了。区别在于事件处理程序的执行顺序。在大多数情况下,在冒泡阶段触发事件处理程序是可以的,但也有必要更早地触发它们。

如果元素1和元素2有两个元素,则元素2位于元素1的内部,我们将事件处理程序与这两个元素连接在一起,我们说onClick。现在,当我们单击元素2时,两个元素的eventHandler将被执行。现在,这里的问题是事件将按什么顺序执行。如果首先执行元素1附加的事件,则称为事件捕获;如果首先执行元素2附加的事件,则称为事件冒泡。根据W3C,事件将在捕获阶段开始,直到到达目标并返回到元素,然后开始冒泡

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

eventTarget.addEventListener(type,listener,[,useCapture]);

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

var div1 = document.querySelector("#div1");
var div2 = document.querySelector("#div2");

div1.addEventListener("click", function (event) {
  alert("you clicked on div 1");
}, true);

div2.addEventListener("click", function (event) {
  alert("you clicked on div 2");
}, false);
#div1{
  background-color:red;
  padding: 24px;
}

#div2{
  background-color:green;
}
<div id="div1">
  div 1
  <div id="div2">
    div 2
  </div>
</div>

请尝试更改是非。

在javascript.info找到的本教程在解释该主题时非常清楚。最后,它的三点总结确实在说明关键点。我在这里引用:

  1. 首先将事件捕获到最深的目标,然后再冒泡。在IE <9中,它们只会冒泡。
  2. addEventListener最后一个参数外true所有处理程序都在冒泡阶段工作
    ,这是在捕获阶段捕获事件的唯一方法。
  3. 冒泡/捕获可以通过event.cancelBubble=true(IE)或event.stopPropagation()
    其他浏览器
    来停止

还有一个Event.eventPhase属性可以告诉您事件是目标事件还是其他事件。

请注意,尚未确定浏览器的兼容性。我已在Chrome(66.0.3359.181)和Firefox(59.0.3)上对其进行了测试,并且该设备受其支持。

从接受的答案扩展本来就很不错的代码段,这是使用eventPhase属性的输出

var logElement = document.getElementById('log');

function log(msg) {
  if (logElement.innerHTML == "<p>No logs</p>")
    logElement.innerHTML = "";
  logElement.innerHTML += ('<p>' + msg + '</p>');
}

function humanizeEvent(eventPhase){
  switch(eventPhase){
    case 1: //Event.CAPTURING_PHASE
      return "Event is being propagated through the target's ancestor objects";
    case 2: //Event.AT_TARGET
      return "The event has arrived at the event's target";
    case 3: //Event.BUBBLING_PHASE
      return "The event is propagating back up through the target's ancestors in reverse order";
  }
}
function capture(e) {
  log('capture: ' + this.firstChild.nodeValue.trim() + "; " + 
  humanizeEvent(e.eventPhase));
}

function bubble(e) {
  log('bubble: ' + this.firstChild.nodeValue.trim() + "; " + 
  humanizeEvent(e.eventPhase));
}

var divs = document.getElementsByTagName('div');
for (var i = 0; i < divs.length; i++) {
  divs[i].addEventListener('click', capture, true);
  divs[i].addEventListener('click', bubble, false);
}
p {
  line-height: 0;
}

div {
  display:inline-block;
  padding: 5px;

  background: #fff;
  border: 1px solid #aaa;
  cursor: pointer;
}

div:hover {
  border: 1px solid #faa;
  background: #fdd;
}
<div>1
  <div>2
    <div>3
      <div>4
        <div>5</div>
      </div>
    </div>
  </div>
</div>
<button onclick="document.getElementById('log').innerHTML = '<p>No logs</p>';">Clear logs</button>
<section id="log"></section>

起泡

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

捕捉

  Event propagate from body(root) element to eventTriggered Element is **CAPTURING**.
本文地址:http://javascript.askforanswer.com/shenmeshishijianmaopaohebuhuo.html
文章标签: ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!