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

由于没有得到权威的答案，所以我尝试了一下。

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），我注意到设置事件处理程序与添加事件侦听器相同。即，在设置事件处理程序之前添加的事件侦听器可以使用stopImmediatePropagation();抑制处理程序。在处理程序之后添加的事件侦听器不会抑制处理程序。同样，一种类型的事件不会抑制另一种类型的事件/处理程序。例如，即使readystatechange监听器是较早注册的，它也不会抑制load监听器或onload处理程序。