window.addEventListener

JavaScript事件监听详解

最新推荐文章于 2025-08-17 18:15:00 发布

原创最新推荐文章于 2025-08-17 18:15:00 发布 · 4.1w 阅读

42 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #html

本文介绍了JavaScript中不同类型的事件监听器及其使用场景。包括页面加载完毕触发的'load'事件、DOM元素加载完成触发的'DOMContentLoaded'事件以及窗口尺寸变化触发的'resize'事件。通过这些事件监听器可以实现网页的动态响应。

<script>
    // 页面加载完毕加载
    window.addEventListener('load', function () {

    })
    // 只需要加载成功元素就可以
    window.addEventListener('DOMContentLoaded', function () {

    })
    // 只要窗口大小发生像素变化就会触发
    window.addEventListener('resize', function () {
    // 当前窗口宽度
    console.log(window.innerWidth);
    })
</script>