【JavaScript】42_DOM：事件与文档的加载

最新推荐文章于 2024-09-15 21:46:55 发布

名之以父

最新推荐文章于 2024-09-15 21:46:55 发布

阅读量376

点赞数

分类专栏： JavaScript 文章标签： javascript 前端 react.js vue.js node.js

本文链接：https://blog.csdn.net/wujianrenn/article/details/129632833

版权

JavaScript 专栏收录该内容

45 篇文章 1 订阅

订阅专栏

7、事件

事件（event）

事件就是用户和页面之间发生的交互行为

比如：点击按钮、鼠标移动、双击按钮、敲击键盘、松开按键…
可以通过为事件绑定响应函数（回调函数），来完成和用户之间的交互

绑定响应函数的方式：

1.可以直接在元素的属性中设置

2.可以通过为元素的指定属性设置回调函数的形式来绑定事件（一个事件只能绑定一个响应函数）

3.可以通过元素addEventListener()方法来绑定事件

 <body>
     <button id="btn1" onmouseenter="alert('你点我干嘛~')">点我一下</button>
     <button id="btn">点我一下</button>
 
     <script>
         //获取到按钮对象
         const btn = document.getElementById('btn')
         //为按钮对象的事件属性设置响应函数
         // btn.onclick = function(){
         //     alter('哈哈哈')
         // }
 
         // btn.onclick = function(){
         //     alter('12343252')
         // }
 
         btn.addEventListener('click',function(){
             alert('哈哈哈')
         })
 
         btn.addEventListener('click',function(){
             alert('呜呜呜')
         })
 
         btn.addEventListener('click',function(){
             alert('嘻嘻嘻')
         })
     </script>
 </body>

8、文档的加载

网页是自上向下加载的，如果将js代码编写到网页的上边， js代码在执行时，网页还没有加载完毕，这时会出现无法获取到DOM对象的情况

window.onload

事件会在窗口中的内容加载完毕之后才触发

document的DOMContentLoaded

事件会在当前文档加载完毕之后触发

如何解决这个问题：

将script标签编写到body的最后（ * ）
将代码编写到window.onload的回调函数中
将代码编写到document对象的DOMContentLoaded的回调函数中（执行时机更早）
将代码编写到外部的js文件中，然后以defer的形式进行引入（执行时机更早，早于DOMContentLoaded）（ * ）

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
     <script>
         // window.onload = function(){
         //     const btn = document.getElementById('btn')
         //     console.log(btn)
         // }
 
         // window.addEventListener('load',function(){
         //     const btn = document.getElementById('btn')
         //     alert(btn)
         // })//先加载页面，再显示弹窗
 
         // document.addEventListener('DOMContentLoaded',function(){
         //     const btn = document.getElementById('btn')
         //     alert(btn)
         // })//先弹窗，再加载页面
     </script>
 </head>
 <body>
     <button id="btn">点我一下</button>
 
     <iframe src="https://www.lilichao.com" frameborder="0"></iframe>
     <script>
         // const btn = document.getElementById("btn")
         // console.log(btn)
     </script>
 </body>
 </html>