在javascript中，如果在HTML元素及其祖先上声明了事件触发器，它首先触发？

Question

有两个onchange触发器：一个在INPUT上，一个来自包含INPUT的FORM。

document.getElementByTagName('form')[0].addEventListener('change',funcForm);
document.getElementByTagName('input')[0].addEventListener('change',funcInput);

1. 先funcForm或funcInput开火吗？

2. 这种行为是否已定义且一致？

3. 如果在第一个触发触发器上发出e.stopPropagation()，那么第二次触发吗？

Answer 1

首先应触发输入的处理程序，然后如果它冒泡，事件应该冒出DOM层次结构。来自DOM Events specification：

  

将事件调度到其目标EventTarget，并且触发任何发现的事件侦听器。然后，冒泡事件将触发通过跟随EventTarget的父链向上发现的任何其他事件侦听器   [...]
  任何事件处理程序都可以通过调用stopPropagation接口的Event方法来选择阻止进一步的事件传播。如果任何EventListener调用此方法，则会触发当前EventListeners上的所有其他EventTarget，但会在该级别停止冒泡。只需拨打一次stopPropagation即可防止进一步冒泡。

第二段适用于stopPropagation，并表示如果input上的听众调用e.stopPropagation()，则该事件不应该达到<form>。但是，<input> 上的任何剩余侦听器都会看到更改事件，stopPropagation只会使事件不再在{{1}的级别上冒泡树。被称为。

此外，change event does bubble：

  

更改
  当控件失去输入焦点并且自获得焦点后其值已被修改时，会发生更改事件。此事件对INPUT，SELECT和TEXTAREA有效。元件。

     

  
• 气泡：是的
  

Answer 2

这取决于是否为捕获阶段或冒泡阶段设置了事件处理程序。 addEventListener函数有一个名为useCapture的第三个参数，默认为false。如果useCapture为真，则祖先元素在沿着DOM树的路上捕获事件并首先触发其处理程序。如果useCapture为false（默认值），则事件沿DOM树向下移动到事件目标，子元素首先触发其处理程序，然后事件 bubbles 直到祖先。

所以你现在拥有它的方式：funcInput将首先开火;行为是定义和一致的;并且e.stopPropagation()会阻止funcForm和任何其他事件处理程序触发。

查看http://www.quirksmode.org/js/events_order.html和https://developer.mozilla.org/en/DOM/element.addEventListener了解详情。