addEventListener与onclick

飞云前端西门2020-03-11

addEventListener和之间有什么区别onclick？

var h = document.getElementById("a");
h.onclick = dothing1;
h.addEventListener("click", dothing2);

上面的代码一起驻留在单独的.js文件中，并且它们都可以正常工作。

2020/03/11 15:24:26

onclick本质上是一个addEventListener，它在单击元素时专门执行一个功能。因此，当您具有执行简单操作的按钮（例如计算器按钮）时很有用。addEventlistener可用于多种操作，例如在加载DOM或所有内容时执行操作，类似于window.onload，但具有更多控制权。

请注意，实际上，您可以内联使用多个事件，或者至少通过使用分号（如分号）分隔每个函数来使用onclick，...

我不会用内联编写函数，因为以后您可能会遇到问题，而且imo会很乱。只需使用它来调用脚本文件中已完成的功能。

我想您使用哪一种取决于您的需求。addEventListener用于复杂操作，onclick用于简单操作。我已经看到一些项目没有将特定项目附加到元素上，而是实现了一个更具全局性的事件侦听器，该事件侦听器将确定是否在按钮上轻按，并根据所按的内容执行某些任务。Imo可能会导致我认为的问题，而且即使事件侦听器必须处理每一次点击，也可能会造成资源浪费，尽管这可能很小

乐米亚2020/03/11 15:24:26

addEventListener 可让您设置多个处理程序，但IE8或更低版本不支持。

IE确实有attachEvent，但并不完全相同。

乐米亚2020/03/11 15:24:26

也应该可以通过对原型进行扩展来扩展侦听器（如果我们有对它的引用，并且它不是匿名函数）-或使“ onclick”调用对函数库的调用（调用其他函数的函数）

喜欢

    elm.onclick = myFunctionList
    function myFunctionList(){
      myFunc1();
      myFunc2();
    }

这意味着我们不必改变onclick调用，只需更改函数myFunctionList（）即可完成我们想要的操作，但是这使我们无法控制冒泡/捕获阶段，因此对于较新的浏览器应避免使用。

以防万一将来有人找到这个线程...

古一达蒙2020/03/11 15:24:26

使用内联处理程序与内容安全策略不兼容，因此addEventListener从该角度来看，此方法更加安全。当然，您可以使用启用内联处理程序，unsafe-inline但是，顾名思义，这样做并不安全，因为它会带回CSP阻止的所有JavaScript开发。

LEYJim2020/03/11 15:24:26

根据MDN，差异如下：

addEventListener：

EventTarget.addEventListener（）方法将指定的与EventListener兼容的对象添加到事件侦听器列表中，以用于对其进行调用的EventTarget上的指定事件类型。事件目标可以是文档中的Element，文档本身，Window或任何其他支持事件的对象（例如XMLHttpRequest）。

onclick：

onclick属性返回当前元素上的click事件处理程序代码。使用click事件触发操作时，还应考虑将相同的操作添加到keydown事件中，以允许不使用鼠标或触摸屏的人使用相同的操作。语法element.onclick = functionRef; 其中functionRef是函数-通常是在其他地方声明的函数的名称或函数表达式。有关详细信息，请参见“ JavaScript指南：函数”。

如下面的代码所示，在使用上还有语法上的区别：

addEventListener：

// Function to change the content of t2
function modifyText() {
  var t2 = document.getElementById("t2");
  if (t2.firstChild.nodeValue == "three") {
    t2.firstChild.nodeValue = "two";
  } else {
    t2.firstChild.nodeValue = "three";
  }
}

// add event listener to table
var el = document.getElementById("outside");
el.addEventListener("click", modifyText, false);

onclick：

function initElement() {
    var p = document.getElementById("foo");
    // NOTE: showAlert(); or showAlert(param); will NOT work here.
    // Must be a reference to a function name, not a function call.
    p.onclick = showAlert;
};

function showAlert(event) {
    alert("onclick Event detected!");
}

小小小宇宙Green2020/03/11 15:24:25

尽管onclick在所有浏览器中都可以使用，addEventListener但在旧版本的Internet Explorer中却不能使用，而使用它attachEvent。

缺点onclick是只能有一个事件处理程序，而其他两个将触发所有已注册的回调。

L前端2020/03/11 15:24:25