请选择 进入手机版 | 继续访问电脑版
开启辅助访问
帐号登录 |立即注册

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

 
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>

回复

使用道具 举报

0 个回复

倒序浏览

快速回复

您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

友情链接
  • 艾Q网

    提供设计文章,教程和分享聚合信息与导航工具,最新音乐,动漫,游戏资讯的网站。