DOM是按照先后顺序执行的,如要将JS放在前面,需要确保DOM元素已经加载完毕,因此我们常用页面加载事件window. onload来调用JS代码。
下面将介绍三种页面加载事件的方法:
<head>
<script>
方法一:传统方式使用window. onload,缺点:只能使用一次,加载多次时,后面会覆盖前面。
window. onload = function() {
var btn = document . querySelector( ' button' );
btn. addEventListener('click', function() {
alert('点击我);
})
}
方法二:可同时加载多次
window. addEventListener('load', function() {
var btn = document . querySelector( ' button' );
btn. addEventListener( 'click', function() {
alert('点击我' );
})
})
window . addEventListener( 'load', function() {
alert(22);
})
方法三:
document . addEventListener( 'DOMContentLoaded', function() {
alert(33);
})
//load等页面内容全部加载完毕,包含页面dom元素图片flash,css等等
// DOMContentLoaded 是DOM加载完毕,不包含图片falsh Css等就可以执行加载速度比load更快一些
</script>
</head>
<body>
<button>点击</button>
</body>
|