微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐