首页 > Javascript在页面加载时的执行顺序

Javascript在页面加载时的执行顺序

<input type="button" value="显示日期" id="myBtn" />
<script>
//window.onload=function() {
document.getElementById("myBtn").onclick=function(){displayDate()};
function displayDate(){
document.getElementById("demo").innerHTML=Date();
}
}
</script>
为什么这段JS代码必须放在myBtn后面才能起作用呢,放在前面和HEAD中都不管用,为什么加了1个Windows.onload就可以放在前面了~


因为你的这两句话

document.getElementById("myBtn").onclick=function(){displayDate()};
document.getElementById("demo").innerHTML=Date();

是需要获取到dom元素的,在你的页面还没有加载到body的时候,你就加载你的js代码,这时肯定是获取不到元素的,所以不起作用

加了

window.onload = function(){
    // ...
}

后,会等页面的dom元素和内容加载完毕后,才执行函数里面内容,这时才可以获取到相应的dom元素

window.onload

指的是在页面加载完成后执行。如果使用的是JQuery库的话

$(document).ready(function(){

});

这样是在DOM加载完成后执行


1.如果没有添加window.onload的话,那么如果你把这段js代码放在myBtn前面,浏览器首先会加载这段js代码,然后就会运行这段代码,但是此时myBtn还未被浏览器加载渲染,所以就找不到这个元素。
2.如果你添加了window.onload,那么表示浏览器加载完所有的DOM之后才会运行这段js代码,所以,在这段代码运行之前,就可以找到myBtn这个元素,所以可以正常运行了。

【热门文章】
【热门文章】