js事件

2023-10-09 12:09:52

一、事件流

事件流就是事件在页面中的传播顺序。

1、事件冒泡

事件冒泡就是由最里面的元素向外传播

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>

<body>
    <div id="myDiv">点我</div>
</body>

</html>

在点击div元素之后，事件的传播顺序

1）.<div>

2）.<body>

3）.<html>

4）.document

2.事件捕获

与事件冒泡相反，在事件达到目标前对其进行拦截。

3.事件流

事件捕获、到达目标、时间冒泡

顺序：事件捕获最先发生，然后事件目标接收到事件，最后阶段是冒泡、最迟要在这个阶段响应事件。

二、事件类型

1.用户界面事件

1.load 当页面完全加载后

第一种在window加载完后触发

window.addEventListener("load",(event)=>{
console.log(“Load”）
}

第二种图片上也会触发

<body>
    <img id="img" src="../../image/573db3c30d03c80599691d1b36c13917.jpg" alt="">
    <script>
        //为图片指定load事件处理程序，处理程序接收event对象
        let img = document.getElementById("img")
        img.addEventListener("load", (event) => {
            console.log(event.target.src)
                //打印图片地址
        })
    </script>
</body>

打印结果：

2.unload事件：它会在文档卸载后触发。一般用在从一个页面导航到另一个页面时触发，最常用于清除缓存，以免内存泄漏。

3.resize事件：当浏览器窗口被缩放到新的高度或者宽度时，会触发

2.焦点事件

1.blur:失去焦点时触发

2.focus:当元素获得焦点时触发。事件不冒泡。

3.focusin:当元素获得焦点时触发。

4.focusout:当元素失去焦点时触发。

3.鼠标和滚动事件

1.click:单击鼠标

2.dbclick：双击鼠标

3.mousedown:按下任意鼠标键

4.mouseenter:鼠标进入元素内部

5.mouseleave:鼠标移出元素内部

6.mousemove:鼠标在元素上移到时触发

7.mouseup:释放鼠标

8.mousewheel:鼠标滚动或带滚轮的类似设备上滚轮的交互。

4.客户端坐标

clientX/Y：表示事件发生时鼠标光标在视口中的坐标

let Div = document.getElementById("Div")
        Div.addEventListener("load", (event) => {
            console.log(`${event.clientX}`, `${event.clientY}`)
        })

5.键盘事件

keydown:按下键盘时出发啊

keypress：用户按下键盘上某个字符时触发

keyup:释放键盘上某个键时触发

三、事件委托

利用事件冒泡原理，把事件加到父极元素上，以此触发效果。

1）比如说这里有三个事件，要在点击时应该执行某个操作

2）一般呢是分别指定三个事件处理程序

3）事件的数量太多，会影响想性能。而使用事件委托，只要所有元素共同的祖先添加一个事件处理程序，就可以解决问题。

优点：

1.减少整个页面所需的内存，提升整体内存。

2.只要页面渲染出可点击的元素，可以无延迟的起作用。

码农公寓

相关文章