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

假设我在同一个XMLHttpRequest对象上设置

xhr.onreadystatechange=handler

并调用

xhr.addEventListener（'readystatechange'，listener）

。哪一个会先被叫来？如果

侦听器

调用

事件.stopImmediatePropagation（）

，是否将调用

处理程序

---

是指定了结果行为，还是依赖于浏览器实现？

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

---

至少对于我当前版本的Chrome（76.0.3809.132版）和Firefox（69.0版），我注意到设置事件处理程序与添加事件侦听器一样。即，在设置事件处理程序之前添加的事件侦听器可以使用

stopImmediatePropagation（）

抑制处理程序；在处理程序之后添加的事件侦听器不会抑制处理程序。此外，一种类型的事件不会抑制另一种类型的事件/处理程序。例如，

readystatechange

侦听器不会抑制

load

侦听器或

onload

处理程序，即使它是较早注册的。

addRequestListener

不是XMLHttpRequest对象的内置方法。Docs->@daddygames引用了您引用的MDN页面：“包括Firefox在内的最新浏览器，除了为处理程序函数设置*属性外，还支持通过标准addEventListener（）API侦听XMLHttpRequest事件。”XMLHttpRequest实现EventTarget，指定addEventListener（）方法。您没有使用

addEventListener

查看您的代码示例。你看到语法上的区别了吗？@daddygames，谢谢。那是个打字错误。我修正了这个问题。

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");
  });

});