JS常用页面加载事件window.onload的三种方法

admin · 2022-10-29 20:24:12

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>

		自动登录	找回密码
密码			立即注册

JS常用页面加载事件window.onload的三种方法

0 个回复

快速回复

admin

楼主热帖

标签云

艾Q网