事件监听器与 html 事件相同吗？

Question

HTML 中的 onclick 与 jQuery 中的 .click() 相同吗？

显然，从可用性的角度来看它们是相同的，但我很好奇浏览器如何处理它们。

Answer 1

jQuery 在幕后使用 JavaScript 附加事件。

一个重要的区别是 jQuery 允许使用 click() 绑定多个事件，而使用 onclick 只能附加一个处理程序。这是因为 jQuery 使用 addEventListener< /code> 或 attachEvent 在幕后，而不是绑定到直接.onclick。

此外，通过 JavaScript（使用或不使用 jQuery）附加处理程序可以促进不引人注目的 JavaScript（即不混合 JavaScript 和HTML），这是一件好事。

Answer 2

不，这不一样。 OnClick 设置 DOM 元素的属性，其中 .click() 添加事件监听器。

它们之间的区别在于每个 DOM 元素只能同时拥有一个类型的属性。因此，如果您在一个元素上使用两次 onClick= ，则只有最后添加的元素会获胜，第一个元素将被覆盖。

这将始终发出警报 2，因为第一个附件将被覆盖：

myDiv.onclick = function(){alert('1')} 
myDiv.onclick = function(){alert('2')}

使用 .click() 或 .addEventListener('click', myFunction)，您可以添加任意数量的函数如你所愿。因此，以下将警告 1 和 2：

myDiv.click(function(){alert('1')}) 
myDiv.click(function(){alert('2')})

jquery .click() 和 .addEventListener() 之间的区别是，jquery 解决方案适用于所有浏览器，导致 IE.click() =8 具有不同的语法 (attchEvent)。并且您可以一次取消绑定所有点击处理程序。 普通 JavaScript 解决方案只能分离传递的函数，而不是全部。

Answer 3

（请注意，jQuery 是一个 JavaScript 库，因此如果您有时间的话，您无法做任何您自己在 JavaScript 中做不到的事情...）

jQuery .click() 方法不同于onclick 在几个关键方面。排名不分先后：

• jQuery 致力于规范化 event 对象，这样您就不必担心浏览器之间的（大部分）细微差异
• jQuery 使用 .addEventListener() 或 .attachEvent() 取决于您的浏览器支持的内容，因此，您不必担心
• jQuery 保证为同一元素和事件绑定多个处理程序的 差异他们将被运行它们附加的顺序（请注意，使用 .onclick 无论如何，您只能绑定一个处理程序，但使用 .addEventListener() 和 .attachEvent() 则可以绑定多个处理程序）
• >如果您使用 jQuery 的 .on() 或 .delegate() （或已弃用的 .live()）， 附加事件，而不是快捷方法像 .click() 一样，很容易设置事件委托

在幕后，所有标准浏览器事件仍在发生，但 jQuery 为它们提供了一个包装器来实现上述所有操作。当然还有一些其他的区别，但我认为以上是最重要的。

显然从可用性的角度来看它们是相同的

。不，它们不是。更准确地说，jQuery 的事件在使用方式上与 .addEventListener() 或 .attachEvent() 相同，但即便如此正如上面详述的，jQuery 为您提供了额外的抽象级别，使您不必自己编写所有代码。

Answer 4

即使在 JQuery 中，.click() 也不一样。它是html中onclick之上的一段代码。 JQuery 允许使用普通 html 事件之上的这一层将方法绑定到事件。

您可以更改/覆盖 .click() 以满足您的需求。例如，当使用移动浏览器或 PDA 等时。