Javascript 事件侦听器 - 触发顺序

Question

如果一个元素附加了多个事件侦听器，执行顺序将基于where/when事件绑定（位于代码中从上到下）。保证 100% 的时间？

或者有没有"randomness"参与其中。在同一个元素上混合 jQuery 和普通事件监听器怎么样？

Answer 1

（假设您谈论的是相同的事件类型和元素）事件处理程序将按照处理程序注册的顺序执行。当您单独处理 jQuery 句柄或 javascript 处理程序（捕获阶段在冒泡之前运行）而不是混合处理时，这是正确的。

当你有混合处理程序时，jQuery 将在第一次尝试为元素注册某种类型的处理程序时添加一个原始处理程序，因此它将按照原始处理程序的顺序依次进行（但所有 jQuery 处理程序将在 jQuery 自己的本地处理程序被触发时执行）

var el = document.getElementById('clickme');

el.addEventListener('click', function() {
  snippet.log('o - 1');
});
el.addEventListener('click', function() {
  snippet.log('o - 2');
});

$('#clickme').click(function() {
  snippet.log('jq - 1(o -3)')
});
el.addEventListener('click', function() {
  snippet.log('o - 4');
});
$('#clickme').click(function() {
  snippet.log('jq - 2')
});
$('#clickme').click(function() {
  snippet.log('jq - 3')
});
el.addEventListener('click', function() {
  snippet.log('o - 5');
});
el.addEventListener('click', function() {
  snippet.log('o - 6');
});
$('#clickme').click(function() {
  snippet.log('jq - 4')
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>

<button id="clickme">This is for testing</button>

Answer 2

历史上有两种行为模式。

Netscape 说 element1 上的事件最先发生。这叫做事件捕获。

Microsoft 认为 element2 上的事件优先。这称为事件冒泡。

现在您可以通过设置|取消设置 AddEventListener 的最后一个参数来决定使用哪个（从上到下或从下到上）：

element1.addEventListener('click',doSomething2,true);
element2.addEventListener('click',doSomething,false);

如果最后一个参数为真，则为捕获阶段设置事件处理程序，如果为假，则为冒泡阶段设置事件处理程序。

Here and here一切都解释得很完美

Answer 3

这是对 EventListeners 非常有用的讨论。我曾多次尝试使用语法，例如...

element.addEventListener("event", callFunction(this.val))

我遇到了很多问题才能让它很好地提供给一个单独的函数。如果可能，最好将函数直接 link 到事件中。即

element.event = function() { /* enter your function contents */ };

但是，我记得您并非总是能够在所有情况下都执行此操作的可能原因。也许在您调用的元素尚未被脚本定义或定位的情况下。

Javascript 事件侦听器 - 触发顺序

Javascript Event Listeners - Firing order

javascript

jquery

dom-events