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

最新推荐文章于 2024-01-22 21:17:21 发布

原创最新推荐文章于 2024-01-22 21:17:21 发布

· 306 阅读

0 ·

版权

文章标签：

#javascript #css3 #html

DOM操作专栏收录该内容

4 篇文章

订阅专栏

本文详细探讨了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>