使用addEventListener或onclick進行性能效率更高嗎？

我只使用JavaScript，沒有jQuery。相比的onclick當使用addEventListener或onclick進行性能效率更高嗎？

<div onclick="doFunction()"></div> 
<div onclick="doFunction()"></div> 
<div onclick="doFunction()"></div> 
<div onclick="doFunction()"></div> 
<div onclick="doFunction()"></div> 
<div onclick="doFunction()"></div>

document.addEventListener('click', function() { 
    //code here 
});

來源

2014-09-24 geoyws

我期望的差異是如此令人難以置信的最小的，這是不值得考慮，除非你有數以萬計的DOM元素與onClick處理程序（在這種情況下，您的網站不會因其他原因而工作）。做一個對你更有表現力的人。 – 2014-09-24 03:54:50

這被稱爲「微優化」，被認爲是毫無意義的任務。如果你想在兩種方法之間進行選擇，那就做它，因爲它使你的代碼更好，更容易理解，更易於維護。當您發現您的方法導致性能問題時，請對其進行修復。在此之前，專注於編寫正確的代碼，而不是無法測量的性能問題，這可能是非問題。 – spender 2014-09-24 04:03:08

addEventListener在性能方面要好於onclick – Kenny 2014-09-24 04:54:04

addEventListner會更快。您可以通過運行測試來查看以下鏈接瞭解性能細節。

http://jsperf.com/click-vs-addeventlistener/9

有關使用這些詳細信息，您可以查看以下鏈接。

addEventListener vs onclick

來源

2014-09-24 04:47:30 Kalyan

更多的測試將會受到歡迎。 – geoyws 2014-09-24 10:18:21

看起來很特定的瀏覽器：在Chrome中，addEventListener的速度要快得多，但在Firefox中它是'onclick'。 – icl7126 2017-08-14 20:16:46

通過使用「點擊」你混合Javascript和HTML這是不
認爲是一個很好的做法，因爲它是不可擴展的。考慮在您的示例中動態添加，插入和刪除元素。 HTML描述結構，CSS描述樣式和JavaScript控制行爲。
如果您還沒有看過 Event Delegation：事件代理允許您避免將事件偵聽器添加到特定節點，而不是將eventlistener添加到父代。

因此addEventListener與事件代表團將路要走

來源

2014-09-24 05:11:25 Vikram

@Downvoters關心評論？ – Vikram 2016-09-08 17:27:13

使用addEventListener或onclick進行性能效率更高嗎？

回答

相關問題