JS中的事件流

最新推荐文章于 2025-06-08 15:44:34 发布

y_hh_

最新推荐文章于 2025-06-08 15:44:34 发布

阅读量2k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端文章标签： javascript

本文链接：https://blog.youkuaiyun.com/y_hh_/article/details/107394323

前端专栏收录该内容

17 篇文章

订阅专栏

本文介绍了JavaScript中的事件流，包括事件捕获和冒泡阶段，并详细阐述了DOM0级、DOM2级事件处理程序的区别和使用方法。此外，还探讨了事件委托作为优化大量DOM元素事件处理程序的策略，以提高性能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

简述

事件流描述的是从页面中接受事件的顺序，在JS中分为两种，一个是事件冒泡，还有一个是事件捕获

在这里插入图片描述

当btn中的事件被触发了，其事件流的顺序就如上图所示，先从最外面的body开始到btn的捕获阶段，再是从里到外的事件冒泡阶段。

DOM 事件流

在"DOM2级事件"规定的事件流包括三个阶段“事件捕获阶段、出于目标阶段和事件冒泡阶段”。一般来说，出于目标阶段会被看成冒泡阶段的一部分

事件处理程序

1.HTML事件处理程序

直接在html中添加事件处理程序，如

<input type="button" onclick="alert('click')" value="click Me">

可以直接在标签为onclick属性添加对应为事件处理函数。html添加事件的缺点由两个：

存在“时差”,html元素显示在页面上时，其事件处理程序可能还未准备好，这时候触发事件，则会发生错误。
耦合性的问题，html和js代码的耦合度过高。

2.DOM0级事件处理程序

dom0级事件处理程序，就是讲一个函数赋值给一个事件处理程序属性，如：

var btn = document.getElementById('btn');
    btn.onclick = function(){
        console.log('click');
    }

如果要删除事件处理程序可以，通过将事件处理程序属性赋值null来实现。

3.DOM2级事件处理程序

dom2级事件处理程序，是指添加和删除事件处理程序的操作：addEventListener()和removeEventListener() .
添加

const show = function () {
        console.log(this.id);
    }
    var btn = document.querySelector('input');
    btn.addEventListener('click', show);

移除

btn.removeEventListener('click', show);

事件委托

当需要为大量的dom元素添加事件处理程序时，如果直接为每一个元素添加对应的事件处理程序，这是十分消耗资源，影响性能的。事件委托就是处理“事件处理程序过多”问题的一种解决方案。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <ul id='mylist'>
        <ul id='ul1'>ul1</ul>
        <ul id='ul2'>ul2</ul>
        <ul id='ul3'>ul3</ul>
        <ul id='ul4'>ul4</ul>
    </ul>
    </div>
</body>
<script>
    function fun1(ev){
        console.log(ev.target.id);
    }
    var mylist = document.getElementById('mylist');
    mylist.addEventListener('click', fun1,false);

</script>

</html>