Javascript 事件监听器 - 触发顺序答案

【问题标题】：Javascript Event Listeners - Firing orderJavascript 事件监听器 - 触发顺序
【发布时间】：2015-08-06 09:38:22
【问题描述】：

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

或者这是否涉及任何“随机性”。在同一个元素上混合 jQuery 和 vanilla 事件监听器怎么样？

【问题讨论】：

你的意思是为同一个事件声明了多个 eventListener 吗？
尝试显示你的代码
你是指触发监听器的顺序吗？
不，我的意思是例如。我有一个按钮，在代码的不同区域附加了 3 个单独的单击事件，执行不同的操作。我想添加一个首先发生的第 4 次点击事件，如果我把它放在顶部，它会 100% 被首先触发。（这都是基于我无法修改代码以使 1 点击事件触发不同功能的事实）
我没有代码，这是一个普遍的问题

标签： javascript jquery dom-events

【解决方案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>

【讨论】：

很高兴知道谢谢。通过将您的第一个 jQuery 事件移到顶部，它会首先淘汰所有 jQuery 事件，然后是 vanillas，非常有趣。

【解决方案2】：

历史上有两种行为模式。

Netscape 说 element1 上的事件首先发生。这称为事件捕获。

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

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

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

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

Here 和here 一切都解释得很好。

【讨论】：

问题是指多个事件绑定到同一个元素。

【解决方案3】：

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

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

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

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

但是，我记得可能的原因，您不能总是在每种情况下都这样做。也许在您调用的元素尚未被脚本定义或定位的事件中。

【讨论】：