javascript - JQuery/DOM元素 "click"事件注册: on ("click") VS click() VS addeventlistener ("click")

标签 javascript jquery html event-handling

我正在学习 javascript,并且我见过不止一种注册点击事件的方法:

$(DOMelement).click(function() {});
$(DOMelement).on('click',function() {});
(DOMelement).addEventListener('click', function() {});

有人可以告诉我事件注册的最佳做法是什么吗?或者每个的主要优点/缺点?我假设 on() 和 click() 非常相似,但由于我刚刚开始,我想知道哪个是最常用的,这样我就可以从一开始就编写高效的代码。另外,进行 html onclick 注册仍然是一个好的做法吗?

<button onclick="function()"></button>

最佳答案

$(DOMelement).click(function() {});$(DOMelement).on('click',function() {}); 的快捷方式。性格有点少,但是$(DOMelement).on('click',function() {});更快。

$(DOMelement).addEventListener('click', function() {});永远不会工作,因为它是原生 JavaScript 函数。您需要使用 HTML 元素,而不是 jQuery 元素。那会起作用:

$(DOMelement)[0].addEventListener'click', function() {});

这是最快的,因为它是原生的,但有 some support issue ,就像在 IE 8 及更低版本中一样,它会抛出错误,因为它使用 .attachEvent() .

您最后的解决方案( <button onclick="function()"></button> )是最糟糕的解决方案,因为它不利于可重用性,当您有多个元素时会进行大量重复,这也是一种不好的做法。

基本上,您应该始终使用(加载 jQuery 时).on() .

关于javascript - JQuery/DOM元素 "click"事件注册: on ("click") VS click() VS addeventlistener ("click"),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26471142/

相关文章:

javascript - If/Else 和 typeof 问题

javascript - 使用变量引用 SessionStorage

jQuery,使用 .each 获取类中每个元素的 ID?

html - CSS 设置距浏览器边缘的最大距离

html - 从 MySQL 中的所有 img src 标签中删除一个属性(Wordpress 安装)

javascript - 聊天应用程序如何在没有重复 ajax 调用的情况下工作?

javascript - 更新 Vue.js 中的父类

javascript - 奇怪的 jQuery $.each() 行为

jquery - Tiny carousel 的 "#Next"和 "#Prev"函数在 mvc 元素中不起作用

html - 替代 & 和 %26