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属性。