在之前没有学习 BOM 时,我们书写 HTML 和 Script 的顺序是先写完 HTML 再写 Script,目的是先让 HTML加载完,才能执行后面的交互效果,但是学习了 BOM 后,我们就可以实现 Script 标签随意放啦
window.addEventListener('load',function(}) :
这个方法可以使文档内容全部加载完后再执行 JS 的内容,包括了图片,flash,css,脚本文件等等,(如果使用的 window.οnlοad=function(){} 的话那么相同的元素只能被注册一次,并且以最后一次为准,使用该侦听函数注册事件则可以注册多次),Script 标签可以放在 HTML 的前面,也可以放在 head 里面,或者是放在外部,以下便是使用该方法后将 Script 标签放在了 HTML 标签的上部
<script>
window.addEventListener('load',function(){
var ele=document.querySelector('button');
ele.addEventListener('click',function(){
alert('我弹出啦');
})
})
</script>
<button>按钮</button>
document.addEventListener('DOMContentLoaded',function(}) :
该方法与上面的区别在于,这个事件仅当 DOM 加载完成就可以去执行 JS 的交互内容了,不包括图片,css,flash,脚本文件等等,如果一个页面图片很多,使用 onload 事件将会耗费大量时间,那么使用这个事件去注册将会大大减少用户等待页面的时间
<script>
window.addEventListener('DOMContentLoaded',function(){
var ele=document.querySelector('button');
ele.addEventListener('click',function(){
alert('我弹出啦');
})
})
</script>
<button>按钮</button>