jquery - 为什么 $ ('.myClass' ).on ("input propertychange", function() {}) 总是在 $(document).on ("input propertychange", ".myClass", function() {)) 之前调用？

Question

Here's一个工作示例:

$(document).on("input propertychange", ".myClass", function () {
    $('#result').append("first<br />");
});

$('.myClass').on("input propertychange", function () {
  $('#result').append("second<br />");
});

即使我在第二之前定义了第一个代码块，它也总是先打印第二个。

为什么？我怎样才能保证它们会级联执行？

Answer 1

因为这就是事件处理的工作原理。事件首先经历从窗口通过文档到目标元素的捕获阶段，然后从目标元素冒泡到窗口。

您的第一个 on 调用会在 document 上附加一个 click 处理程序，调用该处理程序时，将检查事件是否通过任何元素在最终目标和 document 之间匹配 .myClass，如果是这样，则调用您的处理程序。第二个 on 调用将处理程序直接附加到匹配的元素。在这两种情况下，您都会 Hook 冒泡阶段(jQuery 不支持 Hook 捕获阶段)。因此，元素本身的处理程序在文档上匹配的委托(delegate)处理程序之前被调用。 (从技术上讲，当事件位于目标元素时，它处于目标阶段，而不是捕获或冒泡。但是捕获和冒泡处理程序都会被调用 - 并且按照这个顺序- 在目标元素上。)

这是旧版 DOM3 Events spec 中的一个很棒的一体化图表。 :

您可以在当前DOM4 spec中找到详细信息.

虽然 jQuery 不支持捕获阶段，addEventListener在兼容的浏览器上执行此操作(因此，不适用于 IE8 及更早版本，因为它们没有 capture 或 addEventListener)。 addEventListener 的第三个参数让您决定是要捕获 (true) 还是冒泡 (false)；它默认为 false (在真正现代的系统上，第三个参数可以是具有各种标志的对象)。

以下示例显示了事件的所有阶段:

// See: https://www.w3.org/TR/domcore/#dom-event-none
const eventPhases = ["NONE", "CAPTURING_PHASE", "AT_TARGET", "BUBBLING_PHASE"];

function captureHandler(e) {
  console.log("captureHandler: " + eventPhases[e.eventPhase] + " on " + this.id);
}
function bubbleHandler(e) {
  console.log("bubbleHandler:  " + eventPhases[e.eventPhase] + " on " + this.id);
}

function hookBoth(element) {
  element.addEventListener("click", captureHandler, true);
  element.addEventListener("click", bubbleHandler, false);
}

hookBoth(document.getElementById("outer"));
hookBoth(document.getElementById("middle"));
hookBoth(document.getElementById("target"));

<div id="outer">
  <div id="middle">
    <div id="target">Click Me</div>
  </div>
</div>