事件属性总是在事件监听器之前触发



我为一个表单提交设置了两个侦听器。一个由onsubmit属性指定,另一个由event listener属性指定。

根据我的测试,属性中指定的那个总是先触发。情况会一直是这样吗?事件属性总是首先触发吗?或者是否存在这种情况?

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>

我认识到应该"避免"使用事件属性,这是一个理解问题。

我认为在您的情况下,它们首先触发,因为属性标签首先被处理,但不能保证所有浏览器都是如此。此外,即使在只调用addEventListener()的情况下,也不能保证在DOM 3之前排序。但是,在DOM 3上,事件侦听器将按照注册时的顺序执行。在这里查看公认的答案:多个addEventListener如何在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>

相关内容

  • 没有找到相关文章

最新更新