js中onreadystatechange和onload的区别

写在前面
今天看到之前前辈写的一个js加载后执行回调的函数，看到了一些之前没有注意的用法，在这里做一下总结。

script加载

IE的script 元素只支持onreadystatechange事件，不支持onload事件。
FireFox的script 元素不支持onreadystatechange事件，只支持onload事件。

export function getScript(url, callback) {
  var script = document.createElement('script');
  script.type = "text/javascript";
  if (script.readyState) {
    script.onreadystatechange = function () {
      if (script.readyState == "loaded" || script.readyState == "complete") {
        script.onreadystatechange = null;
        if (callback) {
          script.parentNode.removeChild(script);
          callback();
        }
      }
    }
  } else {
    script.onload = function () {
      if (callback) {
        script.parentNode.removeChild(script);
        callback();
      }
    }
  }
  script.src = url;
  document.getElementsByTagName("head")[0].appendChild(script);
}

document加载

当document文档正在加载时,返回"loading"。当文档结束渲染但在加载内嵌资源时，返回"interactive"，并引发DOMContentLoaded事件。当文档加载完成时,返回"complete"，并引发load事件。

readystatechange事件会在document对象上的readyState属性的属性值发生变化时触发.

// 模拟DOMContentLoaded
document.onreadystatechange = function () {
  if (document.readyState == "interactive") {
    initApplication();
  }
}
// 模拟 load事件
document.onreadystatechange = function () {
  if (document.readyState == "complete") {
    initApplication();
  }
}