js教程(8)

一、事件流

1.概述

        在JavaScript中,事件流描述的是事件在DOM结构中传播和被处理的顺序。事件流分为冒泡阶段和捕获阶段。

        冒泡阶段(Bubbling Phase):事件首先从最内层的元素开始向父级元素传播,一直传播到最外层的元素。在这个阶段,事件是从内向外传播的。

        捕获阶段(Capturing Phase):与冒泡相反,事件从最外层的元素开始传播,一直传播到最内层的元素。在这个阶段,事件是从外向内传播的。

         事件的传播过程:

  1. 捕获阶段:事件从根元素传播到目标元素,依次触发每个元素上绑定的捕获事件处理程序。
  2. 目标阶段:事件到达目标元素,触发目标元素上绑定的事件处理程序。
  3. 冒泡阶段:事件从目标元素开始向上冒泡,依次触发每个元素上绑定的冒泡事件处理程序。

        在实际开发中,事件处理程序一般是绑定在目标元素上,通过事件冒泡机制,可以在目标元素的父元素上捕获到事件,实现事件委托和事件代理等功能。

        简单来说,捕获阶段是从父到子,冒泡阶段是从子到父,而实践开发中都是使用事件冒泡为主。

2.事件捕获

        从DOM的根元素开始去执行对应的事件,事件捕获需要写对应代码才能看到效果,语法如下:

DOM.addEventListener(事件类型,事件处理函数,是否使用捕获机制);

说明:

  • addEventListener第第三个参数传入true代表是捕获阶段触发(很少使用);
  • 若传入false代表冒泡阶段触发,默认就是false;
  • 若是用L0事件监听,则只有冒泡阶段,没有捕获。 

3.事件冒泡

        当一个元素的事件被触发时,同样的事件将会在该元素的所有祖先元素中依次被触发。这一过程被称之为事件冒泡,简单理解就是当一个元素触发事件时,会依次向上调用所有的父级元素的同名事件。

举例:

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>事件冒泡</title><style>.father{width: 50%;height: 300px;background-color: yellow;}.son{width: 50%;height: 300px;background-color: blue;}</style>
</head>
<body>我是爷爷元素<div class="father">我是父元素<div class="son">我是子元素</div></div>
</body>
<script>const father = document.querySelector(".father");const son = document.querySelector(".son");document.addEventListener('click',()=>{alert("爷爷来了");});father.addEventListener('click',()=>{alert("爸爸来了");});son.addEventListener('click',()=>{alert("儿子来了");});
</script>
</html>

此时,若点击子元素,则父元素和爷元素的箭头函数也会被触发。

 

 

4.阻止事件冒泡

        因为默认就有冒泡模式的存在,所以很容易导致事件影响到父级元素,若想把事件就限制在当前元素内,就需要阻止事件冒泡。

语法:

事件对象.stopPropagation();

示例:

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>事件冒泡</title><style>.father{width: 50%;height: 300px;background-color: yellow;}.son{width: 50%;height: 300px;background-color: blue;}</style>
</head>
<body>我是爷爷元素<div class="father">我是父元素<div class="son">我是子元素</div></div>
</body>
<script>const father = document.querySelector(".father");const son = document.querySelector(".son");document.addEventListener('click',()=>{alert("爷爷来了");});father.addEventListener('click',(effervescence)=>{alert("爸爸来了");effervescence.stopPropagation();});son.addEventListener('click',(effervescence)=>{alert("儿子来了");effervescence.stopPropagation();});
</script>
</html>

 此方法可以阻断事件流动传播,不光在冒泡阶段有效,在捕获阶段同样有效。

5.阻止事件默认行为

        我们某些情况下需要阻止默认行为的发生,比如阻止链接的跳转,表单域的跳转。

语法:

事件对象.preventDefault();

示例:

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>阻止默认行为</title>
</head>
<body><form action="#"><input type="submit" value="提交"></form>
</body>
<script>const form = document.querySelector('form');form.addEventListener("click",(e)=>{e.preventDefault();})
</script>
</html>

 6.解绑事件

(1)on事件方式

        直接使用null覆盖就可以实现事件的解绑。

语法:

btn.onclick = function(){alert("我被点击了");
}
btn.onclick = null;

(2)addEventListener方式

        必须使用removeEventListener(事件类型,事件处理函数[,获取捕获或者冒泡阶段])方法可以解绑事件,注意匿名函数无法被解绑。

function fn(){alert("我被点击了");
}
btn.addEventListener("click",fn);
btn.removeEventListener("click",fn);

二、一些注意事项和总结

1.鼠标经过事件

  • mouseover和mouseout会有冒泡效果;
  • mouseenter和mouseleave没有冒泡效果,这里推荐优先使用;

2.两种注册事件的区别

(1)传统on注册(L0)

  • 同一个对象,后面注册的事件会覆盖前面注册(同一个事件)
  • 直接使用null覆盖就可以实现事件的解绑;
  • 都是冒泡阶段执行的

(2)事件监听注册

  • 语法:addEventListener(事件类型,事件处理函数,是否使用捕获);
  • 后面注册事件不会覆盖前面注册的事件(同一个事件);
  • 可以通过第三个参数去确定在冒泡或者捕获阶段执行;
  • 必须使用removeEventLintener(事件类型,事件处理函数,是否使用捕获)解绑函数;
  • 匿名函数无法被解绑。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/767714.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

论文:Scalable Zero-shot Entity Linking with Dense Entity Retrieval翻译笔记(实体链接)

文章目录 论文标题&#xff1a;通过密集实体检索实现可扩展的零镜头实体链接摘要1 引言2 相关工作3 定义和任务制定4 方法4.1 双编码器4.2 交叉编码器4.3 知识蒸馏 5 实验5.1 数据集5.2 评估设置和结果5.2.1 零点实体链接5.2.2 tackbp-20105.2.3 WikilinksNED Unseen-Mentions …

c++常考基础知识(2)

二.c关键字 关键字汇总 c中共有63个关键字&#xff0c;其中包括int&#xff0c;char&#xff0c;double等类型关键字&#xff0c;if&#xff0c;else&#xff0c;while&#xff0c;do&#xff0c;等语法关键字&#xff0c;还有sizeof等函数关键字。 三.数据结构 1.数组&#x…

阿里云-零基础入门NLP【基于深度学习的文本分类3-BERT】

文章目录 学习过程赛题理解学习目标赛题数据数据标签评测指标解题思路BERT代码 学习过程 20年当时自身功底是比较零基础(会写些基础的Python[三个科学计算包]数据分析)&#xff0c;一开始看这块其实挺懵的&#xff0c;不会就去问百度或其他人&#xff0c;当时遇见困难挺害怕的…

web渗透测试漏洞流程:渗透目标信息收集

web渗透测试漏洞流程 1.1 企业目标信息的确认1.2 企业目标信息的收集1.2 企业目标信息的列表1.2.1 企业基本信息的收集1.2.1.1 企业信息收集框架1.2.1.2 企业员工信息收集1.2.1.3 企业信息查询网站1.2.1.4 企业备案信息查询网站1.2.1.5 企业信用信息查询1.2.1.6 企业相关APP应用…

python 画出函数图像

sinx from matplotlib import pyplot as plt import numpy as np import math xlist(np.arange(-math.pi, math.pi,0.1))#此处可调整自变量取值范围&#xff0c;以便选择合适的观察尺度 y[] for i in range(len(x)):y.append(math.sin(x[i])) plt.plot(x,y) plt.show()arcsinx…

一键入门Ubuntu22!

目录 一、安装 二、常用目录 三、常用指令 四、用户指令 五、ssh与scp 六、服务相关 七、Python与Pycharm 八、Vim编辑器 九、Ubuntu22下使用Mysql 十、Ubuntu22下使用mongodb 十一、Ubuntu22下使用redis Ubuntu是一个基于Debian的开源操作系统&#xff0c;由Canoni…

Java 自定义线程池实现

自定义线程池 简介任务图示阻塞队列 BlockingQueue<T>ReentrantLock代码 线程池 ThreadPool工作线程类 Worker 拒绝策略接口代码测试类 TestThreadPool为什么需要j i&#xff1f;&#xff08;lambad表达式相关&#xff09; 测试结果拒绝策略&#xff1a;让调用者自己执行…

求解线性方程组

如图题意看出x1有且仅有两种可能&#xff0c;1或者0&#xff0c;且知道了所有a的值&#xff0c;且因为要求所得答案字典序最小&#xff0c;所以先假设x10。 又因a2x1x2所以可以求出x2的值&#xff0c;又如a2x1x2x3,所以可以求出x3的值依次求出所有x的值&#xff0c;但每求出一…

20.Python从入门到精通—参数 位置参数 关键字参数 默认参数 匿名函数 return 语句 强制位置参数

20.从入门到精通:参数 位置参数 关键字参数 默认参数 匿名函数 return 语句 强制位置参数 参数位置参数关键字参数默认参数 匿名函数return 语句强制位置参数 参数 在Python中&#xff0c;函数可以接受任意数量的参数&#xff0c;包括位置参数、关键字参数和默认参数。以下是这…

卷积神经网络基础

卷积层 1.可参考此文章&#xff1a;https://blog.csdn.net/tjlakewalker/article/details/83275322 2.实现代码: import torch.nn as nn conv nn.Conv2d(in_channels3, #输入通道out_channels64, #输出通道kernel_size3, #卷积核stride1) #步长 print(conv) # 结…

Optional 的用法

常见的有三种方法创建Optional 创建一个为空的optional实例 Testpublic void test_create_empty_optional() {Optional<String> empty Optional.empty();Assert.assertFalse(empty.isPresent());} 用of 创建的Option实例必须为非空&#xff0c;用ofNullable创建的Opti…

SpringCloud-记

目录 什么是SpringCloud 什么是微服务 SpringCloud的优缺点 SpringBoot和SpringCloud的区别 RPC 的实现原理 RPC是什么 eureka的自我保护机制 Ribbon feigin优点 Ribbon和Feign的区别 什么是SpringCloud Spring Cloud是一系列框架的有序集合。它利用Spring Boot的开发…

2024/3/24周报

文章目录 摘要Abstract文献阅读题目引言创新点数据处理研究区域和数据缺失值处理水质相关分析 方法和模型LSTMAttention机制AT-LSTM模型 实验结果 深度学习transformer代码实现1 模型输入1.1 Embedding层1.2 位置编码 2 Encoder2.1 编码器2.2 编码器层2.3注意力机制2.4多头注意…

hive SQL 移位、运算符、REGEXP正则等常用函数

orderflag & shiftleft(1,14) shiftleft(1,14) SQL中使用的运算符号详解_sql中各种符号-CSDN博客 Hive函数_hive shift-CSDN博客 &#xff08;内建函数&#xff08;类型排序&#xff09;_云原生大数据计算服务 MaxCompute(MaxCompute)-阿里云帮助中心&#xff09;

第五讲 哈希表

我们在前面讲了存储层&#xff0c;以及从次磁盘中将页面加载到缓冲池【Buffer Pool】中&#xff0c;现在我们继续往上&#xff0c;来讨论如何支持 DBMS 的执行引擎从页面中读取/写入数据。这部分是访问方法层的功能&#xff0c;它负责通过索引或者表本身&#xff0c;设置是其他…

为什么sql优化往往重点考虑查,而不是增删改

SQL优化重点考虑查询而不是增删改的原因有以下几点&#xff1a; 查询操作的频率高&#xff1a;在大多数数据库应用中&#xff0c;查询操作的频率远高于增删改操作。用户经常需要从数据库中获取数据进行分析、展示或进一步处理。因此&#xff0c;优化查询操作可以显著提高整个系…

Web基础应用

Web基础应用 独立的Web服务 只提供一个页面 构建基本的Web服务 基于 B/S &#xff08;Browser/Server&#xff09;架构的网页服务 服务端提供网页 浏览器下载并显示网页 Hyper Text Markup Language&#xff0c;超文标记语言 Hyper Text Transfer Protocol&#xff0c;超…

Spring JdbcTemplate 案例详解教程

&#xff08;感谢您的关注和点赞支持&#xff01;&#xff09; Spring JdbcTemplate Spring JdbcTemplate 是 Spring Framework 中用于简化 JDBC 操作的一个轻量级封装工具类。它提供了一系列的方法来执行 SQL 查询、更新、批处理等操作&#xff0c;从而减轻了开发者手动处理…

生物信息学文章中常见的图应该怎么看?

目录 火山图 热图 箱线图 森林图 LASSO回归可视化图&#xff08;套索图&#xff09; 交叉验证图 PCA图 ROC曲线图 这篇文章只介绍这些图应该怎么解读&#xff0c;具体怎么绘制&#xff0c;需要什么参数&#xff0c;怎么处理数据&#xff0c;会在下一篇文章里面给出 火山…

Python | 八、类型注解

类型注解 类型注解&#xff08;Type Annotations&#xff09;在Python 3.5及更高版本中被引入。类型注解允许你为函数的参数和返回值指定预期的数据类型。这些注解不会对Python代码的运行时行为产生直接影响&#xff0c;也就是说&#xff0c;它们不会导致代码在运行时进行类型…