DOM-04-window 对象的常见事件

本文详细探讨了JavaScript中的窗口加载事件、窗口大小调整事件以及定时器的使用,帮助开发者更好地理解和应用这些基本但重要的事件处理。

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

1.1 窗口加载事件

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

window.onload 传统注册事件方式 只能写一次,如果有多个,会以最后一个 window.onload 为准。
如果使用 addEventListener 则没有限制

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        // 传统注册事件方式 只能写一次,如果有多个,会以最后一个 window.onload 为准。
        // window.onload = function() {
        //     var btn = document.querySelector('button');
        //     btn.addEventListener('click', function() {
        //         alert('点击我');
        //     })
        // }
        // window.onload = function() {
        //     alert(22);
        // }

        window.addEventListener('load', function() {
            var btn = document.querySelector('button');
            btn.addEventListener('click', function() {
                alert('点击我');
            })
        })
        window.addEventListener('load', function() {
            alert(22);
        })
        document.addEventListener('DOMContentLoaded', function() {
                alert(33);
        })
            // load 等页面内容全部加载完毕,包含页面dom元素 图片 flash  css 等等
            // DOMContentLoaded 是DOM 加载完毕,不包含图片 falsh css 等就可以执行 加载速度比 load更快一些
    </script>
</head>

<body>
    <button>点击</button>
</body>
</html>

1.2 调整窗口大小事件

window.onresize 是调整窗口大小加载事件, 当触发时就调用的处理函数。
只要窗口大小发生像素变化,就会触发这个事件。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>

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

            })
        })
    </script>
    <div></div>
</body>
</html>

1.3 定时器

setTimeout():window.setTimeout(延迟的毫秒数);只调用一次
setInterval():方法重复调用一个函数,每隔这个时间,就去调用一次回调函数。

<body>
    <script>
        // 1. setTimeout 
        // 语法规范:  window.setTimeout(调用函数, 延时时间);
        function callback() {
            console.log('触发了');
        }
        // 这个window在调用的时候可以省略.单位是毫秒,省略默认的是0
        var timer1 = setTimeout(callback, 3000);
    </script>
</body>

<body>
    <script>
        // 1. setInterval  每隔这个延时时间,就去调用这个回调函数,会调用很多次,重复调用这个函数
        // 语法规范:  window.setInterval(调用函数, 延时时间);
        setInterval(function() {
            console.log('持续输出');

        }, 1000);
    </script>
</body>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值