window常见事件onload

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

下面的代码，当点击按钮，并不会弹出对话框，因为页面还没有加载到按钮元素，无法执行 js 点击事件

<!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为准

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

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

解决方法：如果使用addEventListener 则没有限制

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

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

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

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

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

window常见事件onload

相关文章