为什么建议不在HTML文件中使用onclicks.在JS文件中使用事件处理程序

Question

为什么建议不要在你的HTML中使用onclicks.在你的JS文件中使用事件处理程序被认为是最佳实践???

Answer 1

你只能有一个处理程序on*.

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

此外,它有助于整合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.

相反,更好的方法是使用事件注册.继续上面的例子(这只是为了演示,而不是跨浏览器),

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


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

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