前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >js事件流机制

js事件流机制

作者头像
OECOM
发布于 2020-07-01 09:02:44
发布于 2020-07-01 09:02:44
1.6K02
代码可运行
举报
文章被收录于专栏:OECOMOECOM
运行总次数:2
代码可运行

什么是事件流

在JavaScript中事件流是指一个事件沿特定数据结构传播的一个过程。整个事件流总共包含三个阶段(从dome2来说):1.事件捕获阶段、2.处于事件目标阶段、3.事件冒泡阶段。下面我们来看一个图,只要是谈到事件流都会看到的一个图:

从这个图里面我们可以清晰的看到整个事件流的执行过程,首先是从window开始,一步步的从上向下执行,此过程就是事件捕获阶段,当到达了事件的位置以后则处于事件目标阶段,之后会在向上冒泡,进入事件的冒泡阶段。

你可以吧整个dom看做是一盆水,水里放密度不同的物品,有的物品可以嵌在其他物品中,构成父子节点,有的相互独立,构成兄弟节点,当你的手从上去点你需要点的物品时,势必要先触碰水面,然后触碰到父节点,然后才是目标节点。触碰完成以后再把手拿出来,正好是一个相反的过程,这就与我们的事件流机制是一个道理。

事件绑定

下面来看一下下面这个示例代码:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
         #p { width: 300px; height: 300px; padding: 10px;  border: 1px solid black; }
         #c { width: 100px; height: 100px; border: 1px solid red; }
         #d { width: 50px; height: 50px; border: 1px solid green; }
    </style>
</head>
<body>
    <div id="p">
        parent
        <div id="c">
            <div id="d">
                grant
            </div>
            child
        </div>
    </div>
    <script type="text/javascript">
        var p = document.getElementById('p'),
        c = document.getElementById('c'),
        d = document.getElementById('d');
         p.addEventListener('click', function () {
            alert('父节点捕获')
        },true);

        p.addEventListener('click', function () {
            alert('父节点冒泡')
        });
        c.addEventListener('click', function () {
            alert('子节点捕获')
        },true);

        c.addEventListener('click', function (e) {
            alert('子节点冒泡')
        });
        d.addEventListener('click', function () {
            alert('孙子节点捕获')
        },true);

        d.addEventListener('click', function (e) {
            alert('孙子节点冒泡')
        });
    </script>
</body>
</html>

点击ID为d的元素,你会发现依次弹出的内容为:父节点捕获-->子节点捕获-->孙子节点捕获-->孙子节点冒泡-->子节点冒泡-->父节点冒泡。(在添加注册事件时,第三个参数为true则代表接受捕获事件。)

在上面的代码中我们稍作修改

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
d.addEventListener('click', function (e) {
            alert('孙子节点捕获');
            console.log(e);
        },true);

打印结果如上图所示。下面我们看一下一些常用的属性含义

属性

描述

DOM

bubbles

返回布尔值,指示事件是否是起泡事件类型。

2

cancelable

返回布尔值,指示事件是否可拥可取消的默认动作。

2

currentTarget

返回其事件监听器触发该事件的元素。

2

eventPhase

返回事件传播的当前阶段。调用事件处理程序的阶段:1 捕获;2 处于阶段;3 冒泡阶段;这个属性的变化需要在断点中查看,不然你看到的总是0

2

target

返回触发此事件的元素(事件的目标节点)。

2

timeStamp

返回事件生成的日期和时间。

2

type

返回当前 Event 对象表示的事件的名称。

2

view

与事件关联的抽象视图,发生事件的window对象

2

preventDefault

取消事件默认行为,cancelable是true时可以使用

2

stopPropagation

取消事件捕获/冒泡,bubbles为true才能使用

2

stopImmediatePropagation

取消事件进一步冒泡,并且组织任何事件处理程序被调用

3

在事件程序中,this和currentTarget指代的是同一对象。

如果说在事件捕获阶段,将子节点移除,那么子节点的捕获和冒泡是否还会执行?那么在上面的代码中我们在做一些修改,来查看一下效果

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
 c.addEventListener('click', function () {
            alert('子节点捕获');
            c.removeChild(d);
        },true);

运行后我们发现,执行顺序没有变化,子节点的捕获和冒泡依然执行,这里就需要我们做一些优化了,不仅要移除子节点,还需要对节点的注册事件进行移除。

事件委托

不知道大家在平时的使用的时候有没有遇到过这样的一种情况,如果事件涉及到更新HTML节点或者添加HTML节点的时候,就会出现这样的一种情况,新添加的节点无法绑定事件,更新的节点也是无法绑定事件,表现的行为是无法触发事件

如下:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<button id="e">增加</button>
<ul id='myLink'>
  <li class="child"> apple </li>
  <li class="child"> banana </li>
  <li class="child"> orange </li>
</ul>
e = document.getElementById('e');
        e.addEventListener('click',function(){
            var myLink = document.getElementById('myLink');
            var child =document.createElement("li");
            child.className="child";
            child.innerText ="orange"
            myLink.appendChild(child)
        })

有个需求是点击li需要打印出其html内容,那么如果不用事件委托的话,应该是如下方法

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
function shuchu(){
    this.init();
}

Contact.prototype.init = function(){
    var child = document.querySelectorAll('.child');
    for(var i=0;i<child.length;i++){
        (function(j){
            child[j].onclick = function(){
                    console.log(child[j].innerText);
            }
        })(i);
    }
}
new shuchu();

我们会发现一个问题,就是每一个li都添加了一个监听事件,这样如果说li数量非常大的话就会产生性能问题,甚至造成页面卡顿崩溃,另一方面就是新增加的li并没有添加上点击事件。

如果用事件委托,则会很好的解决这两个问题

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
var link = document.getElementById("myLink");
link.addEventListener('click',function(e){
    if(!!e.target&&e.target.className=='child'){
console.log(e.target.innerHTML);
    }
})

事件委托采用注册一个事件则能监听子节点的所有事件,所应用的就是事件的冒泡。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018-11-05,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
超简单!Java 项目自动生成接口文档教程
你还在用 word、markdown 埋头苦干写接口文档?写文档这件事恐怕是每个开发都万分抗拒的事情了。本篇文章详细教你如何利用插件工具,在 IDEA 中自动生成 API 文档。
物立
2023/04/24
4.7K0
超简单!Java 项目自动生成接口文档教程
还手写文档?这个IDEA插件一键自动生成,爽!
每个开发都不想写文档。当你不想写接口文档时,可以通过安装插件在 IDEA 里实现自动同步,一边写代码一边同步接口文档给你的前端、测试同学。以下内容手把手教你怎么操作(这里仅面向使用 IDEA 编辑器、遵循 Java Spring 框架注释规范的同学):
一行Java
2023/02/23
1.4K1
还手写文档?这个IDEA插件一键自动生成,爽!
横空出世!IDEA 版 API 接口神器来了,一键生成文档!
每个开发都不想写文档。当你不想写接口文档时,可以通过安装插件在 IDEA 里实现自动同步,一边写代码一边同步接口文档给你的前端、测试同学。以下内容手把手教你怎么操作(这里仅面向使用 IDEA 编辑器、遵循 Java Spring 框架注释规范的同学):
物立
2023/02/20
3.7K0
横空出世!IDEA 版 API 接口神器来了,一键生成文档!
横空出世! IDEA 版 API 接口神器来了,一键生成文档
JetBrains公司的IntelliJ IDEA是一款非常受欢迎的Java集成开发环境,而Apifox Helper是一款IDEA插件,可以帮助开发者更快速地开发和调试应用程序。
Java king
2023/03/27
3K0
横空出世! IDEA 版 API 接口神器来了,一键生成文档
通过PHP注解Apidoc自动生成API接口文档在Webman框架
Apidoc 是一个通过解析注解生成Api接口文档的PHP composer扩展,兼容Laravel、ThinkPHP、Hyperf、Webman等框架。全面的注解引用、数据表字段引用,简单的注解即可生成Api文档,而Apidoc不仅于接口文档,在线接口调试、Mock调试数据、调试事件处理、Json/TypeScript生成、接口生成器、代码生成器等诸多实用功能,致力于提高Api接口开发效率。
Tinywan
2024/01/19
2K0
通过PHP注解Apidoc自动生成API接口文档在Webman框架
接口测试神器Apifox
Apifox = Postman + Swagger + Mock + JMeter
软件测试君
2020/09/07
1.5K0
接口测试神器Apifox
几个测试接口的好工具,效率加倍~
作为一名后端程序员,一定要对自己写的接口负责,保证接口的正确和稳定性。因此,接口测试也是后端开发中的关键环节。
程序员鱼皮
2023/10/23
9410
几个测试接口的好工具,效率加倍~
JApiDocs(自动生成接口文档神器)
注:官方文档中注明分组名称@description,但是实际应用中不需要加入注解,像下例所示,直接写注释即可。(类上写不写都行,方法上如果加上@description反而不显示) 例:
huofo
2022/03/18
1.3K0
JApiDocs(自动生成接口文档神器)
全自动生成!让你和接口文档说拜拜!!
平时已经加班加点去实现产品经理提出的复杂需求了,到最后还要写接口文档给前端的小伙伴对接,实在是让人有些沮丧 ε(┬﹏┬)3
永恒君
2022/12/06
3860
全自动生成!让你和接口文档说拜拜!!
简单快捷的分享操作:提升团队协作效率的利器 - Apipost 与 Apifox 之对比
在API驱动的现代软件开发中,接口文档的快速共享是团队协作的核心环节。然而,繁琐的文档分享流程可能导致跨部门沟通滞后、需求理解偏差,甚至延误项目交付。例如,某金融科技团队曾因接口文档传递效率低下,导致测试团队误用旧版接口参数,最终引发生产环境数据异常。由此可见,工具能否提供简单高效的文档分享功能,直接影响团队协作效率和项目质量。本文将以 Apipost 与 Apifox 为例,从功能设计、操作流程到实际场景,解析两者在分享操作上的差异及其对协作效率的影响。
用户11531559
2025/03/28
770
Spring-Boot + Swagger2 自动生成API接口文档
spring-boot作为当前最为流行的Java web开发脚手架,相信越来越多的开发者会使用其来构建企业级的RESTFul API接口。这些接口不但会服务于传统的web端(b/s),也会服务于移动端。在实际开发过程中,这些接口还要提供给开发测试进行相关的白盒测试,那么势必存在如何在多人协作中共享和及时更新API开发接口文档的问题。 假如你已经对传统的wiki文档共享方式所带来的弊端深恶痛绝,那么尝试一下Swagger2 方式,一定会让你有不一样的开发体验:
用户1212940
2022/04/13
6440
Spring-Boot + Swagger2 自动生成API接口文档
2021.8.13起,Github要求使用基于令牌的身份验证
remote: Support for password authentication was removed on August 13, 2021. Please use a personal access token instead.
Vam的金豆之路
2021/12/01
2.6K0
2021.8.13起,Github要求使用基于令牌的身份验证
支持Dubbo接口文档生成的工具!
点击上方蓝色“程序猿DD”,选择“设为星标” 回复“资源”获取独家整理的学习资料! 作者 | 肥朝 来源 | https://mp.weixin.qq.com/s/JW0yPtaIeyYZCs2PuucICQ Introduce smart-doc是一款同时支持JAVA REST API和Apache Dubbo RPC接口文档生成的工具,smart-doc在业内率先提出基于JAVA泛型定义推导的理念, 完全基于接口源码来分析生成接口文档,不采用任何注解侵入到业务代码中。你只需要按照java-doc标准
程序猿DD
2023/04/04
1.3K0
支持Dubbo接口文档生成的工具!
ApiPost 快速生成在线接口文档!!
ApiPost是一个支持团队协作,并可直接生成文档的API调试、管理工具。它支持模拟POST、GET、PUT等常见请求,是后台接口开发者或前端、接口测试人员不可多得的工具 。使用者不仅可以利用apiopst调试接口,还可以书写相关注释(接口文档),方便的生成可读性好、界面美观的在线接口文档。
XD
2022/05/15
3.9K0
接口调试与文档生成:Apipost 与 Apifox 的深度考量
在当今数字化时代,软件开发项目的复杂性与日俱增,团队协作和开发效率的重要性不言而喻。其中,“接口调试”和“文档生成”成为贯穿整个开发流程的核心环节,对项目进度及质量的影响深远。在众多开发工具中,Apipost 和 Apifox 凭借出色的功能被广泛关注。本文将从多个关键维度,对 Apipost 和 Apifox 在接口调试与文档生成功能上的表现进行深度对比分析,为开发团队的工具选型提供参考。
多吃核桃
2025/02/24
980
接口调试与文档生成:Apipost 与 Apifox 的深度考量
PostMan 快快走开, ApiFox 来了, ApiFox 强大的Api调用工具
为什么要用ApiFox呢, 一般现在程序员开发测试, 一般都是PostMan, PostWoman等Api调用工具, 我之前也是一直在用, 但是今天我发现了一款相比于Postman更加好用的工具, 那就是ApiFox, 是通过一款公众号推荐给我的, 我开始还不以为然, 但是在仔细阅读后, 发现真的非常好用, 下面让我们来了解ApiFox
彼岸舞
2022/06/02
1K0
PostMan 快快走开, ApiFox 来了, ApiFox 强大的Api调用工具
Apifox是个啥?
大家好,我是码农飞哥---作为一名后端老码农,我做的大部分项目一般都是基于 Swagger 来管理 API 文档,基于 Postman 来做接口调试,基于 JMeter 来做接口性能测试,基于RAP 等工具 Mock API 数据。
码农飞哥
2024/01/03
5690
Apifox是个啥?
Vuepress + GitHub Actions 实现博客自动部署!
正常我们利用 Vuepress 搭建一个文档博客之后,往往都是通过如下步骤来部署一篇博客:
村雨遥
2022/03/14
1.5K1
Vuepress + GitHub Actions 实现博客自动部署!
Apifox 接口文档设计和调试教程【工具篇】
Apifox 不是一个传统的测试工具,Apifox 更像是一个团队协作工具,围绕着接口开发文档,为我们规范了开发的整个流程。
码哥字节
2022/10/28
2.7K0
Apifox 接口文档设计和调试教程【工具篇】
12年经验的大龄程序员,你猜他用什么写API文档?
今天这次我们深度 “盘” 一下 Eolink 这款免费 API 协作平台,围绕【智能生成+盘活 API 资产】这一功能上,到底投入了多大的开发成本,给我们带来了多少惊喜!
梦想橡皮擦
2022/12/07
3880
12年经验的大龄程序员,你猜他用什么写API文档?
推荐阅读
相关推荐
超简单!Java 项目自动生成接口文档教程
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档