JQuery/DOM元素「點擊」事件註冊：on（「click」）VS點擊（）VS addeventlistener（「點擊」）

Question

我正在學習javascript，並且我看到了多種註冊點擊事件的方式：

$(DOMelement).click(function() {}); 
$(DOMelement).on('click',function() {}); 
(DOMelement).addEventListener('click', function() {}); 

有人能告訴我事件註冊的最佳做法是什麼？或者每個人的主要優點/缺點？我asuming on（）和click（）非常相似，但由於我剛剛開始使用，我想知道哪些是最常用的，所以我可以從頭開始編寫高效的代碼。另外，它是一個很好的做法，做HTML的onclick註冊？

<button onclick="function()"></button> 

Answer 1

$(DOMelement).click(function() {});是$(DOMelement).on('click',function() {});的快捷方式。這是一個少一點的字符，但$(DOMelement).on('click',function() {});更快。

$(DOMelement).addEventListener('click', function() {});將永遠不會工作，因爲它是一個本機JavaScript函數。您需要使用HTML元素，而不是jQuery元素。這將工作：

$(DOMelement)[0].addEventListener'click', function() {}); 

這是最快的之一，因爲它是天然的，但有some support issue，就像在IE 8和更低，因爲它使用.attachEvent()它會拋出一個錯誤。

您最後的解決方案（<button onclick="function()"></button>）是最糟糕的解決方案，因爲它不利於重複利用性，當您有多個元素時會進行大量的重複操作，這也是一種不好的做法。

基本上，你應該總是使用（當jQuery被加載時）.on()。

Answer 2

這兩種使用jQuery的事件回調綁定，並且是完全相同的功能（.on）的別名：

$(DOMelement).click(function() {}); 
$(DOMelement).on('click',function() {}); 

這一個使用瀏覽器的API將其綁定（有點較低的水平）：

DOMelement.addEventListener('click', function() {}); 

最後一個也工作原理類似於瀏覽器的API的方式，但它令人難以接受的：

<button onclick="function()"></button>