Javascript 事件监听器 - 触发顺序

Question

如果一个元素附加了多个事件监听器，执行顺序是否基于事件绑定(bind)的位置/时间(位于代码中从上到下)。有保证，100% 成功吗？

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

Answer 1

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

当你有混合处理程序时，当 jQuery 第一次尝试为某个元素注册某种类型的处理程序时，它会添加一个普通处理程序，因此它将按顺序遵循普通处理程序的顺序(但所有 jQuery 处理程序)将在触发 jQuery 自己的 native 处理程序时执行)

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>