Question

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

let name = Object.values( obj /*your main object*/ )
       .find( obj => obj.content.includes(x) )
       .name;

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

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

我知道如果单击myButton，将调用这两个事件。但是，我不知道这会发生什么样的顺序。两个事件处理程序都引用相同的ID，而不是单独的元素（我已经看过用户询问window.click与按钮相比的线程。点击，但这有完全相同的事件。）

据我所知，.js文件中的代码似乎首先运行。但我无法理解为什么会这样。

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

Answer 1

事件处理程序通常按添加顺序处理。你可以轻松地测试一下：

＆＃13;

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

＆＃13;

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

＆＃13;

在内部，事件侦听器作为数组存储在每个元素上。触发事件时，迭代数组并按顺序调用每个侦听器。这就是大多数＆＃34; PubSub＆＃34;系统工作。

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

listeners = []

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

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

如果同一元素存在两个事件处理程序，事件处理的顺序是什么？

1 个答案: