Javascript 为什么不建议在HTML中使用onclick。在JS文件中使用事件处理程序

为什么建议不要在HTML中使用onclicks。在JS文件中使用事件处理程序被认为是最佳做法？？？

您只能有一个启用了

的处理程序*

但是，在使用事件注册模型时，对可以为同一事件附加到同一元素的处理程序的数量没有限制

此外，它有助于整合Javascript中的所有行为，而不是散布在整个代码库中

注意：您也可以在Javascript中使用on*附加事件。DOM事件注册模型就是为了解决这个问题而引入的。有关更多信息，请参见此示例：

// HTML
<p id="somePara" onclick="alert('First')">...</p>

// Javascript
var el = document.getElementById("somePara");

el.onclick = function() {
    alert("Second");
};

el.onclick = function() {
    alert("Third");
};

// when <p> is clicked, it alerts "Third", overwriting the first two handlers.

//HTML

//Javascript
var el=document.getElementById（“somePara”）；
el.onclick=函数（）{
警报（“第二”）；
};
el.onclick=函数（）{
警报（“第三”）；
};
//单击时，它会提醒“第三个”，覆盖前两个处理程序。

相反，更好的方法是使用事件注册。继续上面的示例（这只是为了演示，不是跨浏览器）

el.addEventListener（“单击”，函数（）{
警报（“联合国”）；
});
el.addEventListener（“单击”，函数（）{
警报（“Dos”）；
});
//点击，现在会提醒“第三方”、“联合国”和“Dos”。

它将代码与内容和标记分开。分离越干净，就越容易维护，尤其是当您的团队规模大于1时。

此外，它还有助于分离关注点。HTML是页面的结构，而Javascript是“行为”。将结构与行为分离允许更多的代码重用和易于维护。（这也是演示[css]与结构分离的原因）

它促进了设计（HTML、css）和动作（javascript）之间的清晰分离。这与最好将服务器端代码与显示代码分开的原因大致相同。

您认为有没有哪种情况下on*模式比listener模式好/有/应该使用/首选？如果您编写的网站非常简单，页面很少，并且需要快速完成，那么确定为什么不这样做。

el.addEventListener("click", function() {
    alert("Un");
});


el.addEventListener("click", function() {
    alert("Dos");
});

// clicking on the <p> will now alert "Third", "Un", and "Dos".