事件侦听器和处理程序之间的关系

Question

假设我既设置了xhr.onreadystatechange = handler，又在同一XMLHttpRequest对象上调用了xhr.addEventListener('readystatechange', listener)。首先叫哪个？如果listener调用event.stopImmediatePropagation()，将调用handler吗？

是否指定了结果行为，还是取决于浏览器的实现？

Answer 1

因为没有得到权威的答案，所以我尝试了。

https://jsfiddle.net/6fkhc9om/

document.getElementById("basicXHRButton").addEventListener("click", function() {
  // Loading the jQuery code
  request = new XMLHttpRequest();
  request.open("GET", "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js", true);
  request.send(null);

  // this listener suppresses onload handler
  // if this is commented out, onload handler will be invoked
  request.addEventListener("load", function(event) {
    alert("load listener 1");
    event.stopImmediatePropagation();
  });

  request.onreadystatechange = function() {
    console.log(request.responseText);
    alert("onreadystatechange handler " + request.readyState);
  };

  // this listener does not suppress load event listeners or handlers
  request.addEventListener("readystatechange", function(event) {
    alert("readystatechange listener 2 " + request.readyState);
    event.stopImmediatePropagation();
  });

  request.onload = function() {
    console.log(request.responseText);
    alert("onload handler");
  };

  // this listener doesn't suppress onload handler
  request.addEventListener("load", function(event) {
    alert("load listener 2");
    event.stopImmediatePropagation();
  });


  request.addEventListener("load", function(event) {
    alert("load listener 3");
  });

});

至少对于我当前版本的Chrome（版本76.0.3809.132）和Firefox（版本69.0），观察到设置事件处理程序与添加事件侦听器相同。也就是说，在[[before设置了事件处理程序后添加的事件侦听器可以使用stopImmediatePropagation()取消处理程序；在处理程序after中添加的事件侦听器不会禁止该处理程序。同样，一种类型的事件不会抑制另一种类型的事件/处理程序。例如。 readystatechange侦听器不会抑制load侦听器或onload处理程序，即使它是较早注册的。