XMLHttpRequestEventTarget与XMLHttpRequest的addEventListener事件写法

第一种：

XMLHttpRequestEventTarget.onabort
包含当请求中止并且abort该对象接收到事件时要调用的函数。
XMLHttpRequestEventTarget.onerror
包含当请求遇到错误并且error此对象接收到事件时调用的函数。
XMLHttpRequestEventTarget.onload
包含在成功获取内容后HTTP请求返回并且load此对象接收到事件时调用的函数。
XMLHttpRequestEventTarget.onloadstart
包含在HTTP请求首次开始加载数据并且loadstart此对象接收到事件时调用的函数。
XMLHttpRequestEventTarget.onprogress
包含定期调用的函数，其中包含有关请求进度的信息progress，此对象接收事件。
XMLHttpRequestEventTarget.ontimeout
包含事件超时且timeout该对象接收到事件时调用的函数；仅当通过设置XMLHttpRequest对象timeout属性的值预先建立了超时时，才会发生这种情况。
XMLHttpRequestEventTarget.onloadend
包含在加载完成时调用的函数，即使请求失败，并且loadend此对象接收到该事件。

语法;

XMLHttpRequest.onabort = callback;

第二种：addEventListener

语法：

const xhrButtonSuccess = document.querySelector('.xhr.success');
const xhrButtonError = document.querySelector('.xhr.error');
const xhrButtonAbort = document.querySelector('.xhr.abort');
const log = document.querySelector('.event-log');

function handleEvent(e) {
    log.textContent = log.textContent + `${e.type}: ${e.loaded} bytes transferred\n`;
}

function addListeners(xhr) {
    xhr.addEventListener('loadstart', handleEvent);
    xhr.addEventListener('load', handleEvent);
    xhr.addEventListener('loadend', handleEvent);
    xhr.addEventListener('progress', handleEvent);
    xhr.addEventListener('error', handleEvent);
    xhr.addEventListener('abort', handleEvent);
}

function runXHR(url) {
    log.textContent = '';

    const xhr = new XMLHttpRequest();
    addListeners(xhr);
    xhr.open("GET", url);
    xhr.send();
    return xhr;  
}

xhrButtonSuccess.addEventListener('click', () => {
    runXHR('https://mdn.mozillademos.org/files/16553/DgsZYJNXcAIPwzy.jpg');
});

xhrButtonError.addEventListener('click', () => {
    runXHR('https://somewhere.org/i-dont-exist');
});

xhrButtonAbort.addEventListener('click', () => {
    runXHR('https://mdn.mozillademos.org/files/16553/DgsZYJNXcAIPwzy.jpg').abort();
});