Jquery 为什么总是在$（文档）之前调用$（&&x27；.myClass&&x27；）.on（"；输入属性更改"；，函数（）{}）。on（"；输入属性更改"；.myClass"；，函数（）{]）？

一个有效的例子：

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

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

$（document）.on（“InputPropertyChange”，“.myClass”，函数（）{
$（'#result'）。追加（“first
”；
});
$（'.myClass'）。在（“输入属性更改”，函数（）{
$（'#result'）。追加（“第二个
”）；
});

即使我在

第二个

之前定义了

第一个

代码块，它也总是先打印

第二个

---

为什么？我如何保证它们将以级联方式执行？

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

在调用上的第一个

会附加一个
单击
文档
上的
处理程序，调用该处理程序时，将检查事件是否通过与最终目标和
文档
匹配的
.myClass
元素传递，如果是，则调用处理程序。在
调用上的第二个
会附加处理程序directl在这两种情况下，都是挂接冒泡阶段（jQuery不支持挂接捕获阶段）。因此，在文档上匹配委托处理程序之前，会调用元素本身上的处理程序。（从技术上讲，当事件位于目标元素时，它处于目标阶段，而不是捕获或冒泡。但是捕获和冒泡处理程序都在目标元素上按顺序进行缩放。）

这是一个来自旧版本的很棒的一体式图表：


您可以在当前文档中找到详细信息

尽管jQuery不支持捕获阶段，但它在兼容浏览器上支持捕获阶段（因此，不是IE8和早期版本，它们没有捕获或
addEventListener
）。使用
addEventListener
的第三个参数可以决定是要捕获（
true
）还是冒泡（
false
）；它默认为
false
（在真正现代的系统上，第三个参数可以是具有各种标志的对象）

下面是一个示例，显示了事件的所有阶段：


//请参见：https://www.w3.org/TR/domcore/#dom-无事件
const eventPhases=[“无”、“捕获阶段”、“在目标阶段”、“冒泡阶段”]；
函数captureHandler（e）{
log（“captureHandler:”+eventPhases[e.eventPhase]+“on”+this.id）；
}
函数bubbleHandler（e）{
log（“bubbleHandler:”+eventPhases[e.eventPhase]+“on”+this.id）；
}
函数（元素）{
元素。addEventListener（“单击”，captureHandler，true）；
元素。addEventListener（“单击”，bubbleHandler，false）；
}
hookBoth（document.getElementById（“外部”））；
hookBoth（document.getElementById（“中间”）；
hookBoth（document.getElementById（“target”）；

点击我
您可以将工作示例放在此处，现场使用堆栈片段。）。想想冒泡是如何工作的……从顶部开始，一直向下。一个直接附加到元素，另一个附加到文档，然后查看单击的内容。