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

Question

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

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

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

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

Answer 1

$(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() .