使用addEventListner和簡單的Onclick/Ondblclick調用函數有什麼區別？

Question

使用addEventListner和簡單的Onclick/Ondblclick調用函數有什麼區別？

Answer 1

onclick等是DOM 0級事件。他們在每個瀏覽器中工作，但他們不允許您輕鬆地將多個處理程序添加到同一元素中的相同事件。這意味着，使用像

window.onload = function() { 
    // THE CODE TO RUN 
}; 

東西將刪除已經沒有任何功能，所以你不得不用這樣的招數：

(function (oldonload) { 
    window.onload = function() { 
     // THE CODE TO RUN 
     oldonload(); 
    }; 
}(window.onload)); 

用的addEventListener你沒有做到這一點。你只是寫：

window.addEventListener("load", function() { 
    // THE CODE TO RUN 
}, false); 

它只是工作...但不是在IE瀏覽器！在IE上，你必須使用attachEvent，它除了在 IE之外不能在任何地方使用。所以，你還是要這樣寫代碼：

function yourCode() { 
    // THE CODE TO RUN 
} 
if (window.addEventListener) { 
    window.addEventListener('load', yourCode, false); 
} else { 
    window.attachEvent('onload', yourCode); 
} 

而在所有情況下，你還需要檢查文件是否已經加載，所以你只要運行你的代碼瞬間，而不是將它綁定到一個已經發生的事件而不會再發生了 - 這意味着更多的代碼：

function yourCode() { 
    // THE CODE TO RUN 
} 
if(document.loaded) { 
    yourCode(); 
} else { 
    if (window.addEventListener) { 
     window.addEventListener('load', yourCode, false); 
    } else { 
     window.attachEvent('onload', yourCode); 
    } 
} 

的一點是，如果你想讓你的事件處理代碼保持強勁，並與所有瀏覽器兼容，那麼它很快變得非常複雜。這就是爲什麼我總是建議使用像jQuery庫做出來給你，讓你不必擔心這些細節，只是寫：

$('some-id').click(function() { 
    // THE CODE TO RUN 
}); 

，它神奇地運行在所有瀏覽器。

Answer 2

addEventListner允許您添加多個偵聽器。

Answer 3

當您直接在節點上添加onclick/onmouseover時，您會將結構/數據與行爲耦合在一起，這並不好，特別是如果您關心能否維護代碼。 （使用addEventListener）你：（a）獲得對你的JS單獨進行增量更改的能力（反之亦然），（b）有能力在不同的JS上重複使用相同的JS HTML（在另一頁上說），（c）獲得單獨緩存JS的能力（假設你把它放在一個外部文件中），從而提高總體性能。

最重要的是（正如@JohnPick的回答），它允許您將多個偵聽器添加到同一個節點。