如果同一元素存在兩個事件處理程序，則按什么順序處理事件？

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)