我为表单提交设置了两个监听器。一个是在onsubmit 属性中指定的，另一个是使用事件监听器 指定的。
根据我的测试，属性中指定的总是先触发。会一直这样吗？事件属性会总是先触发吗？或者有没有发生这种情况的情况？
function attribute(e) {
console.log('Attribute');
e.preventDefault();
}
function listener(e) {
console.log('Listener');
e.preventDefault();
}
document.querySelector('form').addEventListener('submit', listener);<form onsubmit="attribute(event)">
<button type="submit">Submit</button>
</form>我认识到 using event attributes should be "avoided" ，这更像是一个理解问题。
最佳答案
我会假设在你的情况下它们首先触发，因为属性标记首先被处理，但不能保证所有浏览器总是如此。此外，即使在只调用 addEventListener() 的情况下，在 DOM 3 之前也不能保证顺序。但是，在 DOM 3 上，事件监听器将按照它们注册的相同顺序执行。在此处查看已接受的答案:How do multiple addEventListener work in JavaScript?
为了保证在 onclick 之前调用事件监听器，您可以实现类似以下的内容。此示例根据您的代码段更改了调用顺序，以便您可以在属性定义的事件之前放置任意代码。
<html>
<head>
<script>
function attribute(e) {
console.log('Attribute');
e.preventDefault();
}
function listener(e) {
console.log('Listener');
e.preventDefault();
}
window.onload = function() {
var form = document.querySelector('form');
var f = form.onsubmit;
form.onsubmit = null;
form.addEventListener('submit', function(e) {listener(e); f(e);});
}
</script>
</head>
<body>
<form onsubmit="attribute(event)">
<button type="submit">Submit</button>
</form>
</body>
<html>
关于javascript - 事件属性是否总是在事件监听器之前触发？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39210853/