【Web APIs】事件高级

目录

1.事件对象

1.1获取事件对象

1.2事件对象常用属性

2.事件流

1.1事件流的两个阶段:冒泡和捕获

 1.2阻止事件流动

 1.3阻止默认行为

1.4两种注册事件的区别

3.事件委托


1.事件对象

1.1获取事件对象

事件对象:也是一个对象,这个对象里有事件触发时的相关信息

例如:鼠标点击事件中,事件对象就存了鼠标点在哪个位置的信息

获取事件对象:

  • 在事件绑定的回调函数的第一个参数就是事件对象
  • 一般命名为event,ev,e

语法:元素.addEventListener('click', function(e) { }) e就是事件对象

1.2事件对象常用属性

常用属性

  • type:获取当前事件类型
  • clientX/clientY:获取光标相对于浏览器可见窗口左上角的位置
  • pageX/pageY:获取光标相对于浏览器窗口左上角的位置
  • offsetX/offsetY:获取光标相对于当前DOM元素左上角的位置
  • key:用户按下的键盘键的值(现在不再使用keyNode)

案例:图片跟随鼠标 

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>img {position: absolute;top: 0;left: 0;}</style>
</head>
<body><img src="./pictures/tianshi.gif" alt=""><script>let img = document.querySelector('img')document.addEventListener('mousemove', function(e) {// 鼠标坐标赋值给图片// 减值是为了让鼠标在图片上面img.style.left = e.pageX - 50 + 'px'img.style.top = e.pageY - 40 + 'px'})</script>
</body>
</html>

2.事件流

1.1事件流的两个阶段:冒泡和捕获

事件流:事件完整执行过程中的流动路径

假设页面里有一个div,当触发事件时,会经历两个阶段:捕获阶段和冒泡阶段

①事件冒泡:

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

📖Note:

  • 事件冒泡是默认存在的

②事件捕获:

从DOM的根元素开始去执行对应的事件(从外到里)

📖Note:

  • 事件捕获需要写对应的代码才能看到
  • DOM.addEventListener(事件类型,事件处理函数,是否使用捕获机制),第三个参数传入true代表是捕获阶段触发(不常用),传入false代表冒泡阶段触发,默认false
  • 若是用L0事件监听,则只有冒泡阶段,没有捕获阶段

捕获:父级到子级  冒泡:子级到父级

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.grand {margin: 100px;width: 500px;height: 500px;background-color: red;}.father {width: 400px;height: 400px;background-color: pink;}.son {width: 200px;height: 200px;background-color: skyblue;}</style>
</head>
<body><div class="grand"><div class="father"><div class="son"></div></div></div><script>let grand = document.querySelector('.grand')let father = document.querySelector('.father')let son = document.querySelector('.son')grand.addEventListener('click', function(e) {alert('爷爷级元素的点击事件')})father.addEventListener('click', function() {alert('父级元素的点击事件')})son.addEventListener('click', function() {alert('子级元素的点击事件')})</script>
</body>
</html>

上面的案例中,当点击子级元素时,先触发子级元素的绑定的点击事件,再依次向上触发父级元素绑定的点击事件,依次类推,直到访问完所有的父级元素,这个过程即为事件冒泡 

事件捕获的过程同理:只不过是从根元素向下访问所有的子级元素

 1.2阻止事件流动

冒泡模式默认存在,可能会导致事件影响到父级元素;若想把事件限制在当前元素内,就要阻止事件流动

语法:时间对象.stopPropagation()

📖Note:

  • 阻止事件流动需要拿到事件对象,因此回调函数的形参列表必须写e/event

上面的案例中:组织事件流动后,当点击子级元素时,只触发子级元素的点击事件,不会触发父级元素的点击事件 

📖Note:鼠标经过事件

  • mouseover和mouseout会有冒泡效果
  • mouseenter和mouseleave没有冒泡效果(推荐)

 1.3阻止默认行为

默认行为,比如链接点击不跳转,表单域的跳转

语法:e.preventDefault()

1.4两种注册事件的区别

两种注册事件的区别:

传统on注册(L0

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

事件监听注册(L2

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

3.事件委托

利用事件流的特征解决一些开发需求

场景:多个子级元素进行同样的操作时,可以将这个操作委托给父级元素;比如所有的子级元素都要绑定点击事件,则可以给它们的父级添加点击事件,由于冒泡模式默认存在,所以当自身没有绑定点击事件时,会触发父级的点击事件

获取点击的对象,语法:e.target

获取点击的对象的名字,语法:e.target.tagName

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

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

相关文章

apache2.4设置完一个VirtualHost后,所有的域名和IP地址都变成访问这个VirtualHost的解决办法

apache2.4设置完一个VirtualHost&#xff08;如www.example.com&#xff09;后&#xff0c;所有的域名&#xff08;如localhost&#xff09;和IP地址都变成访问这个VirtualHost。 默认的DocumentRoot /var/www/html无效了。 解决办法&#xff1a;在/etc/httpd/conf.d/&#xf…

电子电器架构 —— 诊断数据DTC具体故障篇

电子电器架构 —— 诊断数据DTC起始篇 我是穿拖鞋的汉子,魔都中坚持长期主义的汽车电子工程师 (Wechat:gongkenan2013)。 老规矩,分享一段喜欢的文字,避免自己成为高知识低文化的工程师: 本就是小人物,输了就是输了,不要在意别人怎么看自己。江湖一碗茶,喝完再挣扎…

算法---前缀和练习-2(和为k的子数组)

和为k的子数组 1. 题目解析2. 讲解算法原理3. 编写代码 1. 题目解析 题目地址&#xff1a;点这里 2. 讲解算法原理 创建一个无序映射&#xff08;哈希表&#xff09; hash&#xff0c;用于统计前缀和的出现次数。初始时&#xff0c;将前缀和为 0 的次数设为 1&#xff0c;表示…

Spark重温笔记(三):Spark在企业中为什么能这么强?——持久化、Checkpoint机制、共享变量与内核调度原理全攻略“

Spark学习笔记 前言&#xff1a;今天是温习 Spark 的第 3 天啦&#xff01;主要梳理了 Spark 核心数据结构&#xff1a;RDD(弹性分布式数据集)&#xff0c;包括RDD持久化&#xff0c;checkpoint机制&#xff0c;spark两种共享变量以及spark内核调度原理&#xff0c;希望对大家有…

牛客题霸-SQL篇(刷题记录二)

本文基于前段时间学习总结的 MySQL 相关的查询语法&#xff0c;在牛客网找了相应的 MySQL 题目进行练习&#xff0c;以便加强对于 MySQL 查询语法的理解和应用。 由于涉及到的数据库表较多&#xff0c;因此本文不再展示&#xff0c;只提供 MySQL 代码与示例输出。 以下内容是…

HarmonyOS应用开发实战 - Api9 拍照、拍视频、选择图片、选择视频、选择文件工具类

鸿蒙开发过程中&#xff0c;经常会进行系统调用&#xff0c;拍照、拍视频、选择图库图片、选择图库视频、选择文件。今天就给大家分享一个工具类。 1.话不多说&#xff0c;先展示样式 2.设计思路 根据官方提供的指南开发工具类&#xff0c;基础的拍照、拍视频、图库选照片、选…

使用Python进行自动化测试Selenium与PyTest的结合【第150篇—自动化测试】

&#x1f47d;发现宝藏 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。【点击进入巨牛的人工智能学习网站】。 使用Python进行自动化测试&#xff1a;Selenium与PyTest的结合 在软件开发中&#xff0c;自…

线程与进程的爱恨情仇???

线程与进程的爱恨情仇&#xff1f;&#xff1f;&#xff1f; 一&#xff1a;有了进程&#xff0c;为什么还需要线程&#xff1f;&#xff1f;&#xff1f;二:线程三:线程和进程的区别与联系四:创建线程or创建进程 一&#xff1a;有了进程&#xff0c;为什么还需要线程&#xff…

css盒子模型及浮动

内容(content)、内边距(padding)、边框(border)、外边距(margin) oder:1px solid red; 边框的粗细 边框的样式&#xff08;虚线还是实线&#xff09; 边框的颜色 border中也有一些属性可以直接调某一个方向上的边框的粗细&#xff0c;样式&#xff0c;颜色 border-left\bord…

2024/3/24 LED点阵屏

显示原理&#xff1a; 类似矩阵键盘&#xff0c;逐行or逐列扫描 74HC595是串行 寄存器 感觉就是三转八寄存器 并行&#xff1a;同时输出&#xff1b;串行&#xff1a;一位一位输出 先配置74HC595&#xff0c;重新进行位声明 sbit RCKP3^5; //RCLK sbit SCKP3^6; …

芒果YOLOv8改进116:即插即用:集中特征金字塔Centralized Feature Pyramid 高效涨点改进

💡🚀🚀🚀本博客 改进源代码改进 适用于 YOLOv8 按步骤操作运行改进后的代码即可 该专栏完整目录链接: 芒果YOLOv8深度改进教程 🚀🚀🚀 文章目录 一、Centralized Feature Pyramid论文理论部分 + YOLOv8代码改进论文创新论文贡献论文网络部分实验对比2. YOLOv8 …

淘宝|天猫|京东|1688主流电商平台的实时数据返回接口|附Python实例

导读&#xff1a;随着淘宝/天猫直通车功能升级&#xff0c;很多功能越来越白盒化&#xff0c;越来越简化&#xff0c;更方便用户的操作&#xff0c;只需一键即可看出淘宝/天猫直通车存在的问题。淘宝/天猫直通车千人千面后有了实时数据工具&#xff0c;下面通过一个案例告诉大家…

23. UE5 RPG制作属性面板(一)

随着角色的属性越来越多&#xff0c;我们不能每次都进行showdebug abilitysystem进行查看&#xff0c;而且玩家也需要查看角色属性&#xff0c;所以需要一个查看玩家角色属性的面板。 在前面&#xff0c;我们创建三种类型的属性 Primary Attributes&#xff08;主要属性&#…

Spring-Cloud原理详解

Spring Cloud 是一套基于Spring Boot实现的云应用开发工具集&#xff0c;它为快速构建分布式系统提供了全面的解决方案&#xff0c;大大简化了在分布式系统中常见的诸如服务注册与发现、配置中心、熔断器、服务路由、负载均衡、全链路监控、服务追踪等问题的解决过程。下面是对…

Java面试题:生产者消费者问题与工厂方法模式;线程池与观察者模式;ThreadLocal 与单例模式

Java 并发编程与设计模式综合面试题解析 在软件开发中&#xff0c;Java 并发编程和设计模式是两个非常关键的领域&#xff0c;它们可以提高程序的性能、可维护性和灵活性。本文将详细解析三道综合性的 Java 面试题&#xff0c;这些题目将涵盖 Java 设计模式、内存管理、多线程…

软件测试面试问题总结—CTO面试

有一家公司技术面一面和二面都过了&#xff0c;在CTO三面的时候折掉了&#xff0c;反思了下&#xff0c;确实CTO面试的时候问的问题比较宏观&#xff0c;我的回答都比较浅&#xff0c;现在再总结下答案。 1、除了自动化测试&#xff0c;怎么提高测试效率&#xff1f; &#xff…

常见的OOM 问题的 6 种场景

今天跟大家一起聊聊线上服务出现 OOM 问题的 6 种场景,希望对你会有所帮助。 一、堆内存 OOM 堆内存 OOM 是最常见的 OOM 了。 出现堆内存 OOM 问题的异常信息如下: java.lang.OutOfMemoryError: Java heap space此 OOM 是由于 JVM 中 heap 的最大值,已经不能满足需求了…

资深测试总结,性能测试-常见并发问题+解决总结(最全)

目录&#xff1a;导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09; 前言 1、并发测试的定义…

Spring线程池ThreadPoolTaskExecutor的使用

Spring线程池ThreadPoolTaskExecutor的使用

指针和引用的权限

权限的放大&#xff0c;缩小&#xff0c;平移 适用于指针和引用 1.权限的放大(不允许) const int a 5;//const&#xff0c;对变量声明只读特性&#xff0c;保护变量值以防被修改 int* y &a;//把只读的赋给可改的&#xff0c;会报错 2.权限平移&#xff08;允许&…