学习笔记18_window对象的常见事件

本文介绍了JavaScript中的窗口加载事件`window.onload`和窗口大小变化事件`window.resize`。`onload`事件在页面包括所有资源完全加载后触发,而`DOMContentLoaded`事件在DOM结构加载完成后即触发,不等待样式表、图片等。对于快速响应用户交互,`DOMContentLoaded`更为适用。`window.resize`事件用于监听窗口尺寸变化,常用于响应式布局。示例展示了根据窗口宽度隐藏或显示元素的方法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1、窗口加载事件

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

注意:

  1. 有了window.onload就可以把JS代码写到页面元素的上方,因为onload是等页面内容全部加载完毕,再去执行处理函数

  2. window.onload 传统注册事件方式,只能执行。如果有多个,会以最后一个window.onload为准

  3. 如果使用addEventListener 则没有限制

加载完全部
window.onload = function(){
    
};


window.addEventListener("load",function(){
    
});
加载完DOM
document.addEventListener('DOMContentLoaded',function(){

})

接收两个参数:

  1. DOMCountentLoaded事件触发时,仅当DOM加载完成,不包括样式表,图片,flash等等

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

区别
  • load等页面内容全部加载完毕,包括页面dom元素,图片,flash,css等
  • DOMContentLoaded 是DOM加载完毕,不包含图片 flash css 等就可以执行,加载速度比load更快一些
2.窗口大小变化事件

window.onresize 是浏览器窗口大小发证变化时就会调用的处理函数

window.onresize = function() {}

window.addEventListener('resize',function(){});

可以利用这个事件完成响应式布局。window.innerWidth 当前屏幕的宽度

<body>
    <script>
        window.addEventListener('load', function() {
            var div = document.querySelector('div');
            window.addEventListener('resize', function() {
                if (window.innerWidth <= 800) {
                    div.style.display = 'none';
                } else {
                    div.style.display = 'block';
                }

            })
        })
    </script>
    <div></div>
</body>
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值