JavaScript事件监听器 - 触发顺序

Question

如果一个元素有多个事件监听器，执行顺序是否基于绑定事件的位置/时间（从上到下在代码中的位置）？是否保证100％的时间？

或者是否存在任何“随机性”？在同一元素上混合使用jQuery和vanilla事件监听器呢？

- Bruffstar

---

你的意思是为同一个事件声明多个事件监听器吗？ - Mteuahasan

请尝试展示您的代码。 - HassanUsman

你是指触发监听器的顺序吗？ - Mehdi

不，我的意思是我有一个按钮，在代码的不同区域附加了3个单独的点击事件，执行不同的操作。我想添加第4个点击事件，它会首先发生，如果我将其放在顶部，它会100%地首先被触发。（这一切都基于我无法修改代码，使1个点击事件触发不同的函数） - Bruffstar

我没有代码，这是一个一般性问题。 - Bruffstar

Answer 1

（假设你正在谈论相同的事件类型和元素）无论是在处理jQuery句柄还是JavaScript句柄（捕获阶段在冒泡之前运行）时，事件处理程序将按照注册处理程序的顺序执行。当您使用混合处理程序时，jQuery将在首次尝试为元素注册类型的处理程序时添加一个vanila处理程序，因此它将按顺序遵循vanilla处理程序的顺序（但当触发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>

- Arun P Johny

---

这很好知道，谢谢。通过将您的第一个jQuery事件移动到顶部，它会首先清除所有jQuery事件，然后是vanilla事件，非常有趣。 - Bruffstar

Answer 2

历史上有两种行为模式。

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

Microsoft认为element2上的事件优先级更高。这被称为事件冒泡。

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

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

如果最后一个参数为true，则事件处理程序设置为捕获阶段，如果为false，则事件处理程序设置为冒泡阶段。 这里详细解释了一切。

- onerror

---

该问题涉及到绑定在同一元素上的多个事件。 - Sean

Answer 3

这是一个非常有用的关于EventListeners的讨论。我已经尝试过多次使用示例中的语法...

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

我在将其与单独的函数配合使用时遇到了很多问题。如果可能的话，最好直接将该函数链接到事件。

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

然而，我可以记得可能的原因是您并不总是能在每个场合都这样做。也许在调用尚未被脚本定义或定位的元素时会出现这种情况。

- K. Jerry Alleyne