在使用“addEventListener”方法时，是否不鼓励在HTML元素中使用“onlclick”？

在我解释我的问题，这段代码是要考虑：在使用“addEventListener”方法时，是否不鼓励在HTML元素中使用“onlclick”？

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()"方法是在我的情况下，没有必要？

来源

2017-06-03 Jaf-2017

这绝对不鼓励使用'onlclick'，因为没有这个名字的事件。顺便说一句，真的很难正确地格式化/缩进你的代码？在一个不相关的主题上，我假设你使用'attachEvent'来支持多年来一直未得到支持的浏览器，并且其世界范围的使用率在百分之百的百分之一？ – 2017-06-03 14:05:38

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

当您删除功能第二种情况：

在这种情况下，你当你的页面加载，因为它不是一个函数再设置按钮单击事件处理程序。因此，当您点击该按钮时，您可以拨打电话altTxt并查看警报。

所以，是的disAl()是不必要的在你的情况。另外，作为一种好的做法，不应该在html中设置事件处理程序，而应该通过addEventListener在代码中设置事件处理程序。这允许你删除事件监听器，如果你愿意通过调用removeEventListener()。希望这有助于！

来源

2017-06-03 12:08:18

很好的回答，非常有帮助。 –

是的，你是对的你正在选择jquery的文档，并写它的事件监听器，所以你可以使用像下面一样。

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

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

来源

2017-06-03 11:34:29 hasan

他如何以及在哪里“通过jquery选择文档”？ – 2017-06-03 14:08:38

像那样var x = document.getElementById（“btn”） – hasan

这是最肯定的**不是** jQuery。 – 2017-06-03 16:25:16

在使用“addEventListener”方法时，是否不鼓励在HTML元素中使用“onlclick”？

回答

相关问题