jQuery中的ready和原生DOMContentLoaded事件誰先執行？原因是什么？
為什么“腳本解析二” 比 “DOMContentLoaded回調” 先輸出呢？他們都是DOM樹渲染完成時執行啊，這里不太明白
明瑤MY
2015-02-03
3 回答
舉報
0/150
提交
取消
2016-12-12
改成這樣來看：
<script>
? ? window.addEventListener("load", function() {
? ? ? ? show('load事件回調')
? ? }, false);
? ? document.addEventListener("DOMContentLoaded", function() {
? ? ? ? show('DOMContentLoaded回調')
? ? }, false);
</script>
<script src="http://img1.sycdn.imooc.com//down/540812440001e40e00000000.js" type="text/javascript"></script>
<script>
? ? show('觀察腳本加載的順序')
? ? show('腳本解析一')
? ? //測試加載
? ? $(function(){
? ? ? ? show('腳本解析二')
? ? })
? ? show('腳本解析三')
</script>
2016-01-14
樓上說的有道理，因為jquery那個script在前，里面addEventListener DOMContentLoader事件在前，所以觸發的時候先觸發的ready.
2015-04-03
原因是：因為先加載的JQuery后調用的document.addEventListener添加DOMContentLoaded。
注意jQuery.ready.promise里面的completed如下其實就是jQuery.ready()。
function completed() {
document.removeEventListener( "DOMContentLoaded", completed, false );
window.removeEventListener( "load", completed, false );
jQuery.ready();
}
你可以換下位置再試試比如：
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function() {
console.log("DOMContentLoaded");
}, false);
</script>
<script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(function() {console.log("jquery.ready");});
</script>