JS兼容所有浏览器的DOMContentLoaded事件

要兼容所有浏览器的DOMContentLoaded事件，我们需要做如下工作：

1. 检查document.readyState

在DOMContentLoaded事件执行之前，先判断document.readyState是否为complete，如果是，则直接执行回调函数。如果不是，我们绑定一个DOMContentLoaded事件，等到它触发时再执行回调函数。

function ready(fn) {
  if (document.readyState === 'complete') {
    return fn();
  }

  document.addEventListener('DOMContentLoaded', function(){
    fn();
  });
}

// 示例
ready(function () {
  console.log('DOM is ready!');
});

这段代码中，我们先判断document.readyState是否为complete，如果不是，就绑定一个DOMContentLoaded事件，在这个事件触发时执行回调函数。如果document.readyState已经为complete，那么我们直接执行回调函数。

2. 使用自定义事件

各种浏览器对DOMContentLoaded事件的支持不一样，为了兼容所有浏览器，我们可以使用自定义事件。先创建一个自定义事件，当我们检查到document.readyState为complete时，手动触发这个自定义事件。

function ready(fn) {
  if (document.readyState === 'complete') {
    return fn();
  }

  var event = document.createEvent('Event');
  event.initEvent('domReady', true, true);

  document.addEventListener('domReady', function(){
    fn();
  });

  document.dispatchEvent(event);
}

// 示例
ready(function () {
  console.log('DOM is ready!');
});

在这段代码中，我们首先创建了一个自定义事件，事件名称为domReady。然后，在DOMContentLoaded事件触发时，我们手动触发domReady事件。由于我们使用了自定义事件，所以这个事件可以在所有浏览器中兼容运行。

总结

以上就是兼容所有浏览器的DOMContentLoaded事件的完整攻略。首先，我们需要检查document.readyState，如果为complete，直接执行回调函数；否则，绑定DOMContentLoaded事件，在事件触发时执行回调函数。其次，我们可以使用自定义事件来进行兼容处理。

注意，在使用自定义事件时，我们需要保证手动触发事件的代码在绑定事件的代码之后。