使用HTML javascript屬性“onSOMETHING”或在腳本上為所有元素一次添加事件監聽器？

Question

好吧，我使用一個從文件中獲取外部JSON的腳本，並通過其對象循環並在字符串上創建HTML，然后在完成后，它會附加到DOM中。 但我想知道是否更好地使用例如：onclick html屬性（直接進入代碼）或者在追加到DOM之后使用Javascript立即通過其類向所有html對象添加事件監聽器。

它是相同的速度還是比另一個更快，為什么？ 我使用了很多HTML對象，所以我真的需要知道，以獲得最佳性能。 謝謝。 :)

Answer 1

我建議使用一些簡單的事件委托 ：

// works on existing and future elements
// since we are attaching to the parent
var d = document;
d.getElementById("theParentOfAppendedElements").onclick = function (e) {
    if(e.target.tagName.toLowerCase() === "something" 
        && e.target.className === "appended") {
        // do something
    }
}

Answer 2

我個人總是使用不引人注目的JavaScript。 我將所有腳本放在單獨的js文件中，並將所有事件連接到這些腳本中。 這樣我就不再混合標記和腳本了，我減少了標記的大小。 這限制了帶寬消耗。 由於javascript文件是由客戶端瀏覽器緩存的，因此可以提高網站的性能。