【JavaScript 事件(理解)】页面加载事件

最新推荐文章于 2024-07-17 21:56:00 发布

Hwrxia

最新推荐文章于 2024-07-17 21:56:00 发布

阅读量1.4k

点赞数 6

文章标签：前端 html javascript

本文链接：https://blog.csdn.net/Hwrxia/article/details/130565172

版权

如有错误请指正，谢谢！

页面加载事件

当打开一个网页时，浏览器会加载外部资源（HTML、CSS、JS、图片等）完毕时触发的事件

从下面的例子中

<script>
    let p = document.querySelector('p');
     p.addEventListener('click', function() {
        p.innerText = "变了"
    })
</script>

<body>
    <p>有一行字</p>
</body>

运行后会出现 Cannot read properties of null (reading 'addEventListener')的错误是因为p元素事件监听器在JS代码在文档加载前尝试操作DOM元素，因此该元素为空(null)不能添加事件监听器导致的错误。这时候就需要给该代码添加页面加载事件以保证资源加载完毕后调用JS代码。以下为改正后代码

<script>
    //页面资源（DOM元素）加载完毕后，在执行回调函数
    window.addEventListener('load', function() {
        let p = document.querySelector('p');
        p.addEventListener('click', function() {
        p.innerText = "变了"
    })
 }
</script>

<body>
    <p>有一行字</p>
</body>

这样就可以正常的调用JS代码。

window：是指整个窗口
load：事件名
innerText：获取元素内的文本值

但是，该方法有内存占用，一些DOM元素过多时导致性能问题，导致意外事件触发的事件冒泡的主要问题（兼容），因此，使用另一种页面加载事件则不会担心以上问题，该事件名为DOMContentLoaded。

<script>
    //无需等待，初始的文档加载完成后直接触发事件
    document.addEventListener('DOMContentLoaded', function() {
        let p = document.querySelector('p');
        p.addEventListener('click', function() {
        p.innerText = "变了"
    })
 }
</script>

<body>
    <p>有一行字</p>
</body>