window常见事件onload

时间 2019-12-01

原文原文链接

1, window.onload 是窗口（页面）加载事件，当文档内容彻底加载完成会触发该事件（包括图像，脚本文件，css文件等），就调用的处理函数css

下面的代码，当点击按钮，并不会弹出对话框，由于页面尚未加载到按钮元素，没法执行 js 点击事件html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        var btn=document.querySelector("button");
        btn.onclick=function(){
            alert("点击了");
        }
    </script>
</head>
<body>
<button>点击</button>
</body>
</html>

处理办法是：函数

window.onload = function() {
            var btn = document.querySelector('button');
            btn.addEventListener('click', function() {
                alert('点击我');
            })
        }

2，window.onload传统注册事件方式，只能写一次，若是有多个，会以最后一个window.onload为准spa

下面的代码，页面一加载，就会弹出“22", 而后再点击按钮，不能执行点击事件，没法弹出”点击我“code

 window.onload = function() {
            var btn = document.querySelector('button');
            btn.addEventListener('click', function() {
                alert('点击我');
            })
        }
        window.onload = function() {
            alert(22);
        }

解决方法：若是使用addEventListener 则没有限制htm

window.addEventListener('load' ,function(){
     var btn=document.querySelector("button");
     btn.onclick=function(){
         alert("点击");
     }
})
 
window.addEventListener('load' , function(){
     alert("22");
})

页面一加载，弹出”22“后，再点击按钮，又会弹出”点击“。blog

3，窗口加载事件：document.addEventListener( ' DOMContentLoaded ' , function(){})事件

DOMContentLoaded事件触发时，仅当DOM加载完成，不包括样式表，图片，flash等等。（IE9以上才支持）图片

若是页面的图片不少的话，从用户访问到 onload触发可能须要较长的时间，交互效果就不能实现，必然影响用户体验，此时用DOMContentLoaded事件比较合适。ip