javascript - 是否不鼓励在使用“addEventListener”方法时将“onclick”与HTML元素一起使用？

在解释我的问题之前，将考虑以下这段代码：

HTML：

<div>
    <button type="button" id="btn" onclick="disAl()">Click</button>
</div>

JS：

function disAl(){
   var x = document.getElementById("btn");
   if(x.addEventListener){
      x.addEventListener("click", altTxt);
   }
   else if (x.attachEvent){
      x.attachEvent("onclick", altTxt);
   }
}

function altTxt(){
    alert("Hello");
}

现在，如果我运行该程序并第一次单击该按钮，则什么也没有发生。但是，从第二次单击中弹出警报。有趣的是，当我从按钮元素中删除onclick="disAl()"，并且还从脚本中删除了函数定义时，此问题已得到解决。如下所示：

var x = document.getElementById("btn");
if (x.addEventListener) {
    x.addEventListener("click", altTxt);
}
else if (x.attachEvent) {
    x.attachEvent("onclick", altTxt);
}



function ...
....

那么这是否意味着在我的情况下onclick="disAl()"方法是不必要的？

最佳答案

这是正在发生的事情：
第一次：由于这是onclick="disAl()"部分，因此您正在将按钮单击处理程序设置为名为disAl()的函数。因此，单击按钮后，您进入了功能disAl()。
在内部时，您再次将click事件处理程序设置为altTxt。这导致将两个处理程序链接到click事件。然后，当您第二次单击时，让我们看看会发生什么。
第二次：现在，单击发生时，将首先调用disAl()，这又不必要地将altTxt设置为单击事件处理程序。该处理程序结束后，将调用altTxt，即您看到警报的时间。

删除函数的第二种情况：

在这种情况下，由于页面不再具有功能，因此您将在加载页面时设置按钮单击事件处理程序。因此，当您单击按钮时，您呼叫altTxt并看到警报。

因此，在您的情况下，disAl()是不必要的。同样，作为一种好的做法，不应在html中设置事件处理程序，而应在代码中通过addEventListener设置事件处理程序。如果需要，可以通过调用removeEventListener()删除事件侦听器。
希望这可以帮助！

关于javascript - 是否不鼓励在使用“addEventListener”方法时将“onclick”与HTML元素一起使用？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/44343427/