事件處理程序和偵聽器之間有什么區別？

Question

JavaScript 中的事件處理程序和事件偵聽器有什么區別？ 當事件出現時，它們都執行一個函數。 我真的不知道何時使用事件處理程序以及何時使用事件偵聽器。

Answer 1

處理程序和偵聽器是同一個——只是處理事件的函數的同義詞。 “處理程序”可能是更被接受的術語，對我來說在語義上肯定更正確。 術語“偵聽器”源自用於向元素添加事件的代碼：

element.addEventListener('click', function() { /* do stuff here*/ }, false);

但是，您可以變得非常挑剔並將兩者分解為不同的含義。 如果您如此傾向，“處理程序”可能是當您添加“偵聽器”時將要處理事件的函數的術語，因此可以有多個“偵聽器”使用單個“處理程序”。 考慮：

// handler is synonymous with function 
function someFunction(e) {
  if (typeof e == 'undefined')
   alert('called as a function');
  else
   alert('called as a handler');
}


// use someFunction as a handler for a 
// click event on element1 -- add a "listener"
element.addEventListener('click', someFunction, false);
// use an anonymous function as a handler for a 
// click event on element1 -- add another "listener"
element.addEventListener('click', function () { alert('anonymoose'); }, false);


// use someFunction as a handler for a 
// click event on element2 -- add a "listener"
element2.addEventListener('click', someFunction, false);

// call someFunction right now
someFunction();

所以在上面的代碼中，我有 2 個“處理程序”（someFunction 和一個匿名函數）和 3 個“偵聽器”。

同樣，這就是全部語義 - 出於所有實際目的，術語偵聽器和處理程序可互換使用。 如果需要區分，那么偵聽器是對事件的訂閱，該事件將觸發對處理程序（這是一個函數）的調用。

清如泥？

Answer 2

沒有區別； 這只是同一件事的不同術語。

為了事件處理的目的，有多種方法可以將函數與 DOM 元素相關聯，僅此而已。 當標准不斷變化時（或者僅僅因為實施者脾氣暴躁或困難），差異就會出現，但最終機制基本上是相同的。

如果您對使用哪種事件處理程序注冊感到困惑，您可以：

• 閱讀有關該主題的更多信息並選擇一種使用方法，可能是在逐個瀏覽器的基礎上；
• 選擇一種流行的 JavaScript 框架並使用其附加處理程序的機制

Answer 3

這個網站，（有趣的是，其中一個評論循環引用了此處）另有說明，即人們在此處回答的內容（說明他們是相同的）； 粘貼其中一個答案：

一個區別是，如果您為同一個按鈕單擊添加兩個事件處理程序，則第二個事件處理程序將覆蓋第一個事件處理程序，並且只會觸發該事件。 例如：

document.querySelector('.btn').onclick = function() {
  console.log('Hello ');
};

document.querySelector('.btn').onclick = function() {
  console.log('World!');
};

// This logs "World!" out to the console.

但是，如果您改用 addEventListener，則兩個觸發器都將運行。

document.querySelector('.btn').addEventListener('click', function() {
  console.log('Hello ');
});

document.querySelector('.btn').addEventListener('click', function() {
  console.log('World!');
});

// This logs "Hello" and "World!" out to the console.

Answer 4

我發現這個解釋特別實用：

事件處理程序由事件偵聽器和回調函數組成。 事件偵聽器指定將檢測到的事件類型。 回調函數在事件發生時執行。 一切都在一起是事件處理程序。

Answer 5

它們都用於在事件發生時關聯函數，如果使用事件偵聽器，您可以在指定的事件（重復）中多次偵聽，例如將“單擊”事件偵聽為獨立的事件偵聽器，但是在使用處理程序時這是不可能的，因為處理程序是你的 dom 對象的一個​​屬性，如果在同一個事件處理程序中多次分配一個函數，例如，當設置為 onClick 事件的元素拖拽處理程序時，最后一個事件處理程序分配是有效的。

myElement= document.querySelector('#btn');

myElement.onClick = function(){
alert('first event handler');
}

myElement.onClick = function(){
alert('second event handler');
}

// result : occur last handler >> alert('second event handler'); 


but if using the event listeners you can listen to how many times listen to the same 
event.

myElement.addEventListener('click',()=>{

alert('first listener')

})

myElement.addEventListener('click',()=>{

alert('second listener')

})


/* result : occur both listeners - alert('firstlistener') >> and next >> alert('second 
listener'); */

Answer 6

沒有太大區別。 我們可以說它們幾乎是相同的東西，除了三個微妙的東西：

1. 您可以使用一次事件處理程序。 如果您對一個元素使用兩次或更多次處理程序，則最后一個處理程序將覆蓋所有以前的處理程序。 另一方面，如果您多次使用事件偵聽器，則不會有這樣的事情。 您可以使用許多事件偵聽器，但不僅僅是一個。
2. 對於某些事件，處理程序僅適用於 addEventListener。 就像 DOMContentLoaded 事件，它在加載文檔和構建 DOM 時觸發。
3. 使用事件偵聽器，您可以通過在對象或類上使用 handleEvent 而不是將函數傳遞給處理程序來傳遞對象或類。 除了這些微妙的東西，我認為它不存在任何區別。

有關更多信息，請參閱

https://javascript.info/introduction-browser-events#object-handlers-handleevent