javascript - 事件绑定(bind)——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 的事件抽象时，这些问题就会消失。

然而，事件属性的缺点是缺乏可重用性、打破关注点分离和标记污染(影响两者——大小文档及其可维护性)。请记住，来自事件属性的逻辑会不断传输到客户端，而不是作为下载一次并缓存的外部脚本的一部分。也有可能被扩大范围绊倒。

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