事件属性总是在事件侦听器之前触发吗?

时间:2016-08-29 16:23:57

标签: javascript html javascript-events event-handling attributes

我为表单提交设置了两个监听器。一个在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>

我认识到using event attributes should be "avoided",这比理解更重要。

1 个答案:

答案 0 :(得分:0)

我认为在你的情况下他们首先开火,因为属性标签首先得到处理,但不能保证所有浏览器都会出现这种情况。此外,即使在刚刚调用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>