事件绑定 - jQuery与Javascript

Question

使用之间有什么区别

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

和

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

性能,功能或其他方面有什么不同吗？当我可以简单地使用属性时,我应该使用jQuery方式onclick吗？

Answer 1

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

如果两者addEventListener都不attachEvent存在(就像一些古老的浏览器那样),jQuery什么也不做(从1.4a2开始).

onclick="..."从您的第二个示例中可以看出所谓的内部事件属性,并在HTML 4.01中定义.此类事件属性的值成为事件处理程序的函数体.当事件发生时,event将使用第一个参数调用此处理程序函数; 函数作用域链通常也会被扩充,以包含元素的一些祖先和元素本身.

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

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

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

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

您还可以组合这些实践,即使用document.getElementById("theElement").onclick = theFunction; 在一个单独的JavaScript文件中的window.onload函数中.然后,您不必检查是否支持addEventListener或attachEvent,并且您的JavaScript以不引人注目的方式绑定.或者出于某种原因这是一个非常糟糕的做法？ (2认同)

Answer 2

和

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

有点教条地说"使用框架来绑定JavaScript事件总是更好" - 如果你正在使用像jQuery这样的通用库那么你就强迫你的用户下载他们不喜欢的东西需要.此外,绑定事件并不那么难.而且我不会说使用"不引人注目"的方式总是更好. (14认同)