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

【问题标题】：Relationship between Event Listeners and Handlers事件侦听器和处理程序之间的关系
【发布时间】：2019-09-05 19:17:21
【问题描述】：

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

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

【问题讨论】：

addRequestListener 不是 XMLHttpRequest 对象的内置方法。文档 -> developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest
@daddygames 引用了您引用的 MDN 页面：“更新的浏览器，包括 Firefox，除了设置处理函数的 on* 属性外，还支持通过标准 addEventListener() API 监听 XMLHttpRequest 事件。 " XMLHttpRequest 实现了 EventTarget，它指定了 addEventListener() 方法。
你没有使用addEventListener 看看你的代码示例。你看到语法上的不同了吗？
@daddygames 啊，谢谢。那是一个错字。我解决了这个问题。

标签： javascript ajax xmlhttprequest addeventlistener

【解决方案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），我观察到设置事件处理程序与添加事件侦听器相同。即，在设置事件处理程序之前添加的事件侦听器可以使用stopImmediatePropagation() 抑制处理程序；在处理程序之后添加的事件侦听器不会抑制处理程序。此外，一种类型的事件不会抑制另一种类型的事件/处理程序。例如。 readystatechange 侦听器不会抑制 load 侦听器或 onload 处理程序，即使它之前已注册。

【讨论】：