window常见事件onload

发布时间：2020-12-14 05:59:42 所属栏目：Windows 来源：网络整理

导读：1,window.onload 是窗口（页面）加载事件，当文档内容完全加载完成会触发该事件（包括图像，脚本文件，css文件等），就调用的处理函数 ? ? 下面的代码，当点击按钮，并不会弹出对话框，因为页面还没有加载到按钮元素，无法执行 js 点击事件 !DOCTYPE htmlhtm

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事件比较合适。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!