Question

我曾经读到以下编码技术被认为是错误的：

<a HREF="page.htm" onClick="alert('Hello World')">text link</a>

基本上，在HTML标记中使用这些事件处理程序（如onClick）是错误的使用方法。这是什么原因？什么是这种“坏”技术？这样做的“正确”方法是什么？

Answer 1

有几个原因。它本质上是element.onclick的DOM Level 1接口的别名，它只允许一个事件监听器。

另一个原因是它只是在哲学上是错误的。它导致组织不良的代码：您将声明性语言与功能语言混合在一起，该语言在执行过程中包含大量逻辑。

正确的方法是：

element.addEventListener('click', function() {
  console.log('hello world');
}, false); // required for old gecko

或者在IE中：

element.attachEvent('onclick', function() {
  console.log('hello world');
});

或非常，至少使用DOM级别1模型：

element.onclick = function() {
  console.log('hello world');
};

（另请注意，alert是不好的做法，它会阻止整个页面的执行。）

另一个原因是，您无法访问通常作为侦听器回调的第一个参数获得的任何类型的事件对象。（当你设置[event]属性时，你基本上在回调中，所以我不确定你是否可以做参数[0]或者不同的渲染引擎如何实现它。这很尴尬，这就是为什么最好绑定事件在JS-land。）

我能想到的最终原因是跨浏览器兼容性。如果您在HTML中绑定事件，则无法为自己规范化事件接口。

Answer 2

这是内联事件处理程序属性。（+1 chjj对替代品的回答）。由于多种原因，它通常被认为是“不好的”：

您将小部分JavaScript语法与HTML语法内联：
- 当你有很多这些，特别是当你有很多元素都包含基本相同的代码时，它更难以阅读和维护代码;
- 当您需要在代码中使用特殊到HTML字符时，您会遇到嵌套转义的恐怖行为：

例如：

<a href="x.html" onclick="this.innerHTML= '&lt;em>I like &quot;fish &amp;amp; chips&quot;&lt;/em>';">

目标元素和所有祖先节点的属性成为变量，可能隐藏您自己的同名变量。有关这种令人惊讶且几乎总是不受欢迎的行为的背景，请参阅this question;
- 这引入了怪异的不兼容性，因为浏览器具有不同的DOM属性;
- 将来推出新属性的浏览器可能会破坏您的代码。

Answer 3

不确定官方术语，但这不是一个好习惯，因为HTML应该是纯标记，而不是将客户端脚本直接混合到其中。

最佳做法是以这种方式附加事件：

window.onload = function() {
    document.getElementById("MyLink").onclick = function() {
        alert('Hello World');
        return false;
    }
}

例如，在提供链接ID MyLink之后。

Answer 4

最好的方法称为unobtrusive JavaScript，它基本上意味着行为（JS）与结构（HTML）的分离，类似于CSS是如何将表示与结构分离，也是出于同样的原因。