事件绑定 - jQuery与Javascript

Question

使用

之间有什么区别

$("#element").click(function() { alert("test"); });

和

<div id="element" onclick="alert('test');"></div>

性能，功能或其他方面有什么不同吗？当我只使用onclick属性时，我应该使用 jQuery方式吗？

Answer 1

jQuery的click（以及大多数其他库的事件抽象）使用标准DOM L2 addEventListener或MSHTML专有（后来被其他一些浏览器复制，如Opera）attachEvent，当addEventListener不可用时。

如果addEventListener，而不是attachEvent都不存在（就像一些古老的浏览器一样），jQuery什么也不做（从1.4a2开始）。

第二个示例中的

onclick="..."就是所谓的intrinsic event attribute，并在HTML 4.01中定义。此类事件属性的值成为事件处理程序的函数体。当事件发生时，以event作为第一个参数调用此处理函数;函数作用域链也usually augmented包含元素的一些祖先和元素本身。

内在事件属性的好处是更广泛的浏览器支持并且可以说更好的性能。我记得与通过addEventListener / attachEvent初始化的事件相比，看到事件属性的测试导致内存消耗更少。我目前找不到那些测试。

通过避免attachEvent，您自然也可以避免IE中的内存泄漏。大多数流行的Javascript库实际上在它们的事件抽象中创建循环引用，然后被迫在IE中执行页面卸载清理。显然，当您避免依赖attachEvent的事件抽象时，这些问题就会消失。

事件属性的缺点是缺乏可重用性，打破关注点分离和标记污染（影响两者的大小）文档及其可维护性）。请记住，事件属性中的逻辑不断传递给客户端，而不是一次下载并缓存的外部脚本的一部分。在扩大范围内也有可能被绊倒。

我建议避免事件属性，除非绝对必要。

Answer 2

Why Inline JavaScript Code Is Such A Bad Thing

和

Unobtrusive JavaScript

使用框架来绑定javascript事件总是更好，因为如果你没有（attachEvent ..），你需要自己处理跨浏览器的事情。