浏览器事件机制详解

目录

前言

事件类型

鼠标事件

表单事件

窗口事件

DOM事件

多媒体事件

拖拽与放置事件

移动设备事件

剪切板事件

错误事件

过渡、动画事件

事件监听

on+event

addEventListener(event)

事件触发

事件流程

捕获阶段

目标阶段

冒泡阶段

事件对象

总结

相关代码:


前言

浏览器的事件机制是web前端面试及开发过程中绕不开的话题,可以说一切用户操作或者浏览器的行为都离不了事件,它允许开发者通过JS处理用户的操作,并处理操作逻辑,将结果反馈给用户。本篇文章将深入浏览器事件的运行机制,和大家一起探讨其强大的功能及广泛的用法

事件类型

浏览器的事件,参考事件列表大致可以分为以下几类:

鼠标事件

常见的鼠标事件有

  1. click:点击元素时触发
  2. dblclick:双击元素时触发
  3. mouseover:鼠标指针进入元素时触发
  4. mouseout:鼠标指针离开元素时触发
  5. mousemove:鼠标在元素上移动时触发
  6. mousedown:按下鼠标按钮时触发
  7. mouseup:释放鼠标按钮时触发
  8. contextmenu:右键点击元素时触发
  9. wheel:当使用鼠标滚轮时触发。

键盘事件

常见的键盘事件:

  1. keydown:按下键盘上的键时触发
  2. keyup:释放键盘上的键时触发
  3. keypress:按住键不放时持续触发

表单事件

常用的表单事件:

  1. submit:用户提交表单时触发
  2. input:在表单元素中输入内容时触发
  3. change:表单元素的值发生改变时触发(适用于输入框、下拉列表等)
  4. focus:元素获得焦点时触发
  5. blur:元素失去焦点时触发

窗口事件

窗口事件一般作用于window对象上,常用的事件有:

  1. load:页面完全加载时触发
  2. unload:页面即将被卸载时触发
  3. resize:窗口大小发生变化时触发
  4. scroll:页面滚动时触发

DOM事件

Dom一般用于监听文档操作:

  1. DOMContentLoaded:DOM树构建完成,但在所有资源加载完成前触发
  2. DOMNodeInserted:新的子节点插入到元素中时触发
  3. DOMNodeRemoved:子节点从元素中移除时触发
  4. DOMAttrModified:元素属性发生变化时触发

多媒体事件

多媒体事件一般在audio,video标签上进行操作:

  1. play:媒体开始播放时触发
  2. pause:暂停播放时触发
  3. ended:当媒体播放结束时触发

拖拽与放置事件

当给元素增加draggable属性时,标签就具备被拖拽功能,我们可以使用以下事件监听标签拖拽操作:

  1. dragstart:拖拽操作开始时触发
  2. drag:在拖拽过程中持续触发
  3. dragend:当拖拽操作结束时触发
  4. dragenter:被拖拽的元素进入目标元素时触发
  5. dragover:被拖拽元素在目标元素上移动时触发
  6. dragleave:被拖拽的元素离开目标元素时触发
  7. drop:拖拽的元素在目标元素上释放时触发

移动设备事件

移动事件类似鼠标操作:

  1. touchstart:当用户触摸屏幕时触发
  2. touchmove:在用户滑动触摸屏幕时持续触发
  3. touchend:当用户停止触摸屏幕时触发
  4. touchcancel:在触摸事件被取消时触发

剪切板事件

剪切板事件是当用户选中文本时在标签上操作剪切板的动作:

  1. cut:用户执行剪切操作时触发
  2. copy:用户执行复制操作时触发
  3. paste:用户执行粘贴操作时触发。

错误事件

错误事件一般出现在加载文件,资源,音视频,链接等地方:

  1. error:当资源加载或操作过程中出现错误时触发

过渡、动画事件

当标签使用过渡或者动画时,会触发以下事件:

  1. animationstart:当CSS动画开始时触发
  2. animationend:当CSS动画结束时触发
  3. animationiteration:当CSS动画重复播放时触发
  4. transitionstart:当CSS过渡开始时触发
  5. transitionend:当CSS过渡结束时触发

事件监听

事件监听有两种方式,分别是on+event和addEventListener(event)两种方式(event表示上面的事件名称)

on+event

on+event可以直接在HTML标签中使用,添加参数event可以将事件对象传递到函数中

<button onclick="handleClick(event)">点击</button>
<button onclick="handleClick()">点击2</button>
<script>
    const handleClick = (e) => {
        console.log(e);
    }
</script>

在JS中也可以通过element.on+event的方式给标签添加事件监听

<body>
    <button id="btn3">点击3</button>
    <script>
        const handleClick = (e) => {
            console.log(e);
        }
        btn3.onclick = handleClick
    </script>
</body>

在JS中使用on+event的方式给标签添加事件监听时,后面的监听函数会覆盖前面的,当我们要取消监听时直接给on+event赋值null即可,思考下面的代码:

<body>
    <button id="btn3">点击3</button>
    <script>
        const handleClick = (e) => {
            e.target.onclick = handleClick2
            console.log("handleClick");
        }
        const handleClick2 = (e) => {
            e.target.onclick = null
            console.log("handleClick2");
        }
        btn3.onclick = (e) => {
            console.log("onclick");
            e.target.onclick = handleClick
        }
    </script>
</body>

addEventListener(event)

当我们使用on+event给标签添加事件时,后定义的函数会覆盖前面的,这就会导致函数耦合度变高,维护性降低,举个例子,下面的代码中点击btn3时就会触发三个fn,此时如果我需要解除fn1的执行,只能修改onclick函数的逻辑,如何解决这种问题呢?

<body>
    <button onclick="handleClick(event)">点击</button>
    <button onclick="handleClick()">点击2</button>
    <button id="btn3">点击3</button>
    <script>
        btn3.onclick = (e) => {
            fn1()
            fn2()
            fn3()
        }
        const fn1 = () => {
            console.log(111);
        }
        const fn2 = () => {
            console.log(222);
        }
        const fn3 = () => {
            console.log(333);
        }
    </script>
</body>

JS提供了element.addEventListener(event,fn)的方式用于给标签添加事件监听,使用addEventListener函数可以给标签添加多个事件钩子函数

<body>
    <button id="btn1">点击</button>
    <button id="btn2">点击2</button>
    <script>
        btn1.addEventListener("click", handleClick1)
        btn1.addEventListener("click", handleClick3)
        btn2.addEventListener("click", handleClick2)
        function handleClick1(e) {
            console.log(e);
            console.log("handleClick1");
        }
        function handleClick2(e) {
            console.log(e);
            console.log("handleClick2");
        }
        function handleClick3(e) {
            console.log(e);
            console.log("handleClick3");
        }
    </script>
</body>

通过removeEventListener移除某个事件的监听,思考下面的代码,我实现了一个事件的once功能,执行一次后立即注销事件

<body>
    <button id="btn1">点击</button>
    <script>
        btn1.addEventListener("click", handleClick1)
        function handleClick1(e) {
            console.log("handleClick1");
            btn1.removeEventListener("click", handleClick1)
        }
    </script>
</body>

addEventListener第二个参数除了可以是函数外,还可以传入一个对象,当其为对象类型时,可以传入一个handleEvent属性充当事件函数

btn1.addEventListener("click", {
    handleEvent: handleClick2
})

addEventListener的第三个参数是一个布尔值或配置对象,用于指定更多选项,当其类似是布尔时,true表示监听捕获阶段反之则是监听冒泡;当这个参数传入的是一个对象时,里面包含以下配置:

  • capture:布尔值,指定事件是否在捕获阶段触发(true)还是在冒泡阶段触发(false)
  • once:布尔值,指定事件是否仅在第一次触发时调用监听器
  • passive:布尔值,指定监听器是否为 passively(如果为 true,则浏览器知道监听器不会调用 preventDefault())
<body>
    <button id="btn1">点击</button>
    <script>
        btn1.addEventListener("click", handleClick3, {
            once: true,
            passive: true,
            capture: true
        })
        function handleClick3(e) {
            console.log("handleClick3");
        }
    </script>
</body>

这三个配置默认值都是false

事件触发

事件触发有两种方式,分别是用户操作或者浏览器触发的和手动使用触发器触发,手动触发的两种方式分别使用element的event名和dispatchEvent进行触发事件

第一种是使用event名直接调用标签的操作,比如:click(),focus()等

<body>
    <button id="btn1">按钮1</button>
    <button id="btn2">按钮2</button>
    <button id="btn3">按钮3</button>
    <script>
        btn1.addEventListener("click", (e) => {
            console.log("点击按钮1");
            btn2.click()
        })
        btn2.addEventListener("click", (e) => {
            console.log("点击按钮2");
            btn3.click()
        })
        btn3.addEventListener("click", (e) => {
            console.log("点击按钮3");
        })
    </script>
</body>

第二种是使用dispatchEvent进行事件抛发

// 创建自定义点击事件
const clickEvent = new Event('click');
// 手动触发自定义事件
btn3.dispatchEvent(clickEvent);

完整代码:

<body>
    <button id="btn1">按钮1</button>
    <button id="btn2">按钮2</button>
    <button id="btn3">按钮3</button>
    <script>

        btn1.addEventListener("click", (e) => {
            console.log("点击按钮1");
            btn2.click()
        })
        btn2.addEventListener("click", (e) => {
            console.log("点击按钮2");
            // 创建自定义点击事件
            const clickEvent = new Event('click');
            // 手动触发自定义事件
            btn3.dispatchEvent(clickEvent);
        })
        btn3.addEventListener("click", (e) => {
            console.log("点击按钮3");
        })
    </script>
</body>

事件流程

一个完整的事件流程包括三个阶段,分别是捕获(Captur),目标(Target)和冒泡(Bubbling),过程如下图。

任何在以下三种阶段注册的事件监听器会在每个阶段被触发。

捕获阶段

事件首先从根元素(通常是html)向下传播到目标元素的过程。在这个阶段,事件会依次经过DOM树中的每个祖先元素,直到达到事件的目标元素。

在捕获阶段增加的事件监听函数会在事件的捕获阶段触发,在上文我们提到了给addEventListener增加配置项可以使handler在事件捕获时调用,思考下面的代码:

<body>
    <div id="outBox">
        <div id="inBox">
            <div id="targetBox">
                点击
            </div>
        </div>
    </div>
    <script>
        outBox.addEventListener("click", (e) => {
            console.log("outBox");
        }, true)
        inBox.addEventListener("click", (e) => {
            console.log("inBox");
        }, true)
        targetBox.addEventListener("click", (e) => {
            console.log("targetBox");
        }, true)
        /*
        outBox
        inBox
        targetBox
        */
    </script>
</body>

目标阶段

一旦事件达到了目标元素,就会在目标元素上触发事件。这是事件的目标,通常是用户交互的对象。

冒泡阶段

事件从目标元素开始,然后向上冒泡到根元素的过程。在这个阶段,事件会依次经过DOM树中的每个祖先元素,直到达到根元素。

冒泡阶段与捕获相反,在冒泡阶段增加的事件监听函数会在事件的冒泡阶段触发,将addEventListener的capture配置项改成false或者默认不传配置参数,就会使handler回调在事件冒泡时触发,思考下面的代码:

<body>
    <div id="outBox">
        <div id="inBox">
            <div id="targetBox">
                点击
            </div>
        </div>
    </div>
    <script>
        outBox.addEventListener("click", (e) => {
            console.log("outBox");
        })
        inBox.addEventListener("click", (e) => {
            console.log("inBox");
        })
        targetBox.addEventListener("click", (e) => {
            console.log("targetBox");
        })
        /*
        targetBox
        inBox
        outBox
        */
    </script>
</body>

tips:使用on属性监听标签的事件时,不支持在捕获阶段的监听

事件对象

事件对象是指事件的钩子函数的event参数,常用的属性有:

  • type:表示事件的类型,如”click”、”keydown”等
  • target:表示触发事件的元素,即事件的目标元素
  • currentTarget:表示当前正在处理事件的元素,通常是事件监听器所附加的元素
  • preventDefault():该方法用于取消事件的默认行为,例如阻止点击链接跳转或提交表单
  • stopPropagation():该方法用于停止事件的传播,阻止事件冒泡或捕获,只会执行目标阶段的handler
  • eventPhase:表示事件所处的阶段,可以是捕获阶段、目标阶段或冒泡阶段
  • timeStamp:表示事件的时间戳,通常是事件发生时的毫秒数
  • clientX和clientY:表示事件发生时的鼠标指针在视口(浏览器窗口)中的坐标
  • pageX和pageY:表示事件发生时的鼠标指针在页面文档中的坐标
  • keyCode和key:表示键盘事件的按键代码和按键的名称
  • targetTouches和changedTouches:表示触摸事件中涉及的触摸点信息。

总结

浏览器事件机制是前端开发中非常重要的一部分,本文深入探讨了浏览器事件机制的各个方面,包括不同类型的事件、事件监听的方式、事件触发方式、事件流程以及事件对象的使用。对于开发者来说,熟悉浏览器事件机制是非常重要的,它可以帮助开发者实现各种交互和动态效果,提升用户体验。

以上就是文章全部内容了,感谢你看到了最后,如果觉得文章不错的话,还望三连支持一下,谢谢!

相关代码:

myCode: 基于js的一些小案例或者项目 - Gitee.com


浏览器事件机制详解
http://website.diehunter1024.work/2023/09/18/浏览器事件机制详解/
作者
阿宇的编程之旅
发布于
2023年9月18日
许可协议