HTML元素上的靜態事件附件和動態事件附件

Question

由於標題可能稍微含糊或不明確，我將首先解釋兩種方法的含義。在我的HTML/JS代碼，我混附加活動，我的HTML元素的兩種方式：（1）我所謂的 「靜態」：

<input name="abc" class="def" id="xyz" onclick="do_something"/> 

和（2）我稱之爲 「動態」：

<input name="abc" class="def" id="xyz" /> 

與

$(document).ready(function() { 
    $('#xyz').click(function() { do_something; }) 
}); 

請注意，這不是一個真正的代碼，只是要表現爲一個例子。我沒有要麼jQuery的使用，同樣可以用簡單的

document.onload = function() { 
    document.getElementById('xyz').onclick = function() { do_something; } 
} 

通常，如果邏輯很簡單地實現（例如啓用/元素上禁用的再點擊一下），我會用靜態方法。如果邏輯更復雜，我會使用動態的。當然，我也可以使用靜態方法與onclick="function_call()" - 並將所有複雜的邏輯放入此函數中，儘管這可能是遺留在舊版代碼（從幾年前開始）中的代碼。

現在，我遇到了一些會發誓的方法之一，並嘲笑任何人會使用另一種方法，聲稱另一種方法是錯誤的/難以閱讀/較慢/添加你自己的解釋。然而，我沒有發現有任何真正的理由總是堅持一種方法，並繼續混合起來。我是否錯過了某些東西，或者真的沒有理由堅持使用一種方法？

Answer 1

我的做法是按照的規則最少吃驚。

如果我的頁面是99％的HTML，並且只有1或2行Javascript，那麼我使用內嵌事件<div onclick="">來減少由於addEventListener行李而導致頁面中絨毛的數量。

如果我的頁面過於複雜並且元素過多，並且行爲分離會導致大塊getElementById或$('.tree')部分實際上禁止可讀性（因此會增加驚喜水平），那麼我還會使用內聯事件。

否則我使用結構和行爲規則的預期分離。

Answer 2

您應單獨結構（HTML），樣式（CSS）和行爲（JS）。

事件是行爲的頁面 - 做它在JS。

不要代替它們在其他地方，而不是在HTML，而不是在CSS（如果有的話這是可能的）。

Answer 3

靜態：

• 混合邏輯與內容
• 只支持舊的（而不是正式指定）「DOM0」事件模型
• 不允許多個處理程序綁定到一個事件 - 你應該使用DOM2 addEventListener()而不是.onXXX()
• 由於報價混合使語法複雜 - 您可能必須避免使用引號以避免與中的引號衝突3210屬性。