javascript - 如果同一元素存在两个事件处理程序，则事件按什么顺序处理？

Question

我有一个 MVC .cshtml 页面，其中包含 JavaScript 中按钮的事件处理程序:

$('#myButton').on('click', function () {
    //Do stuff
});

但是，在页面上的 javascript 文件 myPage.js 中，还创建了事件处理程序:

$('#myButton').on('click', function () {
    //Do stuff in the .js file
});

据我所知，如果单击 myButton，这两个事件都会被调用。但是，我不知道这将以什么顺序发生。两个事件处理程序都引用相同的 ID，而不是单独的元素(我见过用户询问 window.click 与 button.click 相比的线程，但这有完全相同的事件)。

据我所知，.js 文件中的代码似乎首先运行。但我不明白为什么会发生这种情况。

这背后有什么逻辑吗，还是纯粹是巧合？

Answer 1

事件处理程序通常按照添加的顺序进行处理。您可以轻松测试:

$('button').on('click', function() {
  console.log('first');
});

$('button').on('click', function() {
  console.log('second');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>click me</button>

在内部，事件监听器作为数组存储在每个元素上。当事件被触发时，数组将被迭代并按顺序调用每个监听器。这就是大多数“PubSub”系统的工作方式。

这里有一些伪代码来解释事件如何工作的基础知识。

listeners = []

addEventListener(name, handler):
    listeners += {name, handler}

trigger(name):
    for listener in listeners:
        if listener.name == name:
            call(handler)