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

您应该分离结构(HTML),样式(CSS)和行为(JS).

事件是页面的行为 - 在JS中执行.

不要将它们放在其他任何地方,不要放在HTML中,不要放在CSS中(如果可能的话).