JavaScript 和 DOM 按钮事件处理

JavaScript and DOM button event handling

我最近看到这个评论:

Please, please don't put JavaScript inside HTML elements. It's sloppy, needless, and a PITA to work with.

this post. What is (are you) incognito中得到什么?他(你)的意思是每个事件都应该手动连接到一段 JavaScript / JQuery 代码中(JQuery 我倾向于主要只使用 JavaScript,不使用插件)?

最好的做法是规定函数调用应该使用JavaScript例程附加,还是提供函数调用更具可读性(不是一串不间断的JavaScript) 直接在标记中,以便您知道与 DOM 元素直接相关的调用内容,例如:

<button id="myButt" onclick="shake(myButt);" value="Shake it!" />

...还是我找错树了?

对我来说,这可能归结为相关页面的复杂性。如果它是一个更小、更直接的 HTML 页面,那么我真的认为使用内联函数来处理事件没有什么坏处。当页面开始变大并包含更多移动部分时,将所有 js 都放在一个中央位置处理会有一定的优势,这样您就可以简单地快速鸟瞰正在发生的事情,而不是解析一个大的源代码文件以找出函数的使用位置。 Knockout js 遵循这些原则,当您的页面开始变得非常复杂时,使用起来会非常方便。

它有助于应用 Separation of concerns 设计原则。表示的责任在于 HTML 而行为在于 JavaScript。简而言之,它有助于将编程逻辑与 HTML.

分离

Adding an Event Handler

中的一个非常有用的点

With inline event handlers you get very poor separation of JavaScript code from HTML markup. Modern browsers provide additional programmatic ways of registering event handlers for page elements, allowing you to dynamically add one or more handlers during the webpage lifetime.