JavaScript和活动 - 最佳实践

Question

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

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

基本上,在HTML标记中使用这些事件处理程序(如onClick)是错误的使用方法.这是什么原因？什么是这种"坏"技术？这样做的"正确"方法是什么？

Answer 1

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

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

正确的方法是:

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>';">

• 目标元素和所有祖先节点的属性成为变量,可能隐藏您自己的同名变量.有关这种令人惊讶且几乎总是有害的行为的背景,请参阅此问题 ;

  • 这引入了怪异的不兼容性,因为浏览器具有不同的DOM属性;

  • 未来的浏览器引入新属性可能会破坏您的代码.