当前位置：首页 > news >正文

第一章-JavaScript基础进阶part2：事件

news 2026/2/9 16:24:27

文章目录

概念
一、注册事件（绑定事件）
- 1.1 addEventListener事件监听
二、删除事件（解绑）
三、DOM事件流
四、事件对象event
- 4.1 e.target与this与e.currentTarget的区别
- 4.2 事件对象的常见属性
五、阻止事件默认行为及冒泡
六、事件委托（代理、委派）
七、常用的鼠标事件
- 7.1 常用的鼠标事件
- 7.2 常用的鼠标事件对象
- 7.3 鼠标事件对象案例-跟随鼠标
八、常用的键盘事件
- 8.1 常用键盘事件
- 8.2 键盘事件对象-KeyboadEvent
- 8.3 案例
- - 1、模拟京东按下S键聚焦输入框

概念

本节主要目标：

了解注册事件的两种方式
删除事件的两种方式
DOM事件流的三个阶段
利用事件对象完成跟随鼠标案例
能够封闭阻止冒泡兼容性函数
事件委托的原理
了解鼠标和键盘事件

一、注册事件（绑定事件）

什么是注册事件？
给元素添加事件，称为注册事件或者绑定事件。注册事件有两种方式：传统方式和方法监听注册方式
传统注册方式：

利用on开头的事件
特点：注册事件的唯一性，同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数
方法监听注册方式
addEventListener() : 标准推荐方式，IE9以上可以
特点：同一元素同一事件可注册多个，依次执行

1.1 addEventListener事件监听

eventTarget.addEventListener(type,listener[,userCapture])

eventTarget.addEventListener()方法将指定的监听器注册到eventTarget（目标对象上），当该对象触发指定的事件时，就会执行事件处理函数。
该方法接收三个参数：
- type: 事件类型字符串，如click, mouseover,注意不带on
- listener: 事件处理函数，事件发生时，会调用该监听函数
- useCapture: 可选参数，是一个布尔值，默认是false

<body><button>监听注册事件</button><script>var btn = document.querySelector("button")btn.addEventListener('click',function(){alert("点击触发")})btn.addEventListener("click",function(){alert("第2个监听器触发")})</script>
</body>

二、删除事件（解绑）

eventTarget.removeEventListener(event, listener[,useCapture])

<body><div class="btn1">传统移除</div><div class="btn2">监听移除</div><script>var btn1 = document.querySelector(".btn1")var btn2 = document.querySelector(".btn2")// 传统移除btn1.onclick=function(){alert("弹完就移除点击")btn1.onclick=null}// 监听移除function fn(){alert("弹完就移除，且处理函数需要具名")btn2.removeEventListener("click",fn)}btn2.addEventListener("click",fn)</script>
</body>

三、DOM事件流

事件流描述的是从页面中接收事件的顺序
事件发生时会在元察节点之间按照特定的顺序传播，这个传捅过程即DOM 事件流
DOM事件流分为3个阶段：
1、捕获阶段
2、当前目标阶段
3、冒泡阶段
注意：
- Js代码中只能执行捕获或者泡其中的一个阶段
- onclick 和 attachEvent 只能得到冒泡阶段
- addEventListener(type，listener[，useCapture])第三个参数如果是true,表示在事件捕获阶段调用事件处理程序;如果是 false(不写默认就是alse)，表示在事件冒泡阶段调用事件处理程序。
- 实际开发中我们很少使用事件捕获，我们更关注事件冒泡
- 有些事件是没有旨泡的，比如 onblur、onfocus、onmouseerer、onmouseleave

<!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>.parent {width: 400px;height: 400px;background: pink;}.child {width: 200px;height: 200px;background: purple;margin: 0 auto;}</style></head><body><div class="parent">parent<div class="child">child</div></div><script>let parent = document.querySelector(".parent");let child = document.querySelector(".child");// 1、事件捕获：addEventListener第3个参数传true, 事件触发顺序从document->parent->childparent.addEventListener("click",function(){alert("这是parent")},true)child.addEventListener("click",function(){alert("这是child")},true)// 2、事件冒泡：addEventListener第3个参数传false或不传，事件触发顺序从child->parent-document// parent.addEventListener("click",function () {//     alert("这是parent");//   },//   false// );// child.addEventListener("click",//   function () {//     alert("这是child");//   },//   false// );// 3、onclick方式绑定事件，默认为冒泡// parent.onclick = function () {//   alert("这是parent");// };// child.onclick = function () {//   alert("这是child");// };</script></body>
</html>

四、事件对象event

事件处理函数的第一个默认参数及事件对象event，
事件对象只有有了事件才会存在，它是系统自动创建的
事件对象是事件的一系列相关数据的集合，跟事件相关的如鼠标点击事件里包含了鼠标相关信息，如坐标等。

4.1 e.target与this与e.currentTarget的区别

e.target: 指向触发事件的元素对象
e.currentTarget: 指向绑定事件的元素对象
this：指向绑定事件的元素对象

<body><div class="parent">例子<div class="child">child</div></div><script>var div = document.querySelector(".parent")div.addEventListener("click",function(e){// target返回触发事件的元素对象console.log(e.target)// this返回的是绑定事件的元素对象console.log(this)// e.currentTarget返回绑定事件的元素对象console.log(e.currentTarget)})</script>
</body>

4.2 事件对象的常见属性

e.type: 返回事件对象的类型，如click,mouseover
e.preventDefault: 阻止默认事件
e.stopPropagation() : 阻止冒泡

五、阻止事件默认行为及冒泡

e.preventDefault: 阻止事件默认行为
e.stopPropagation: 阻止冒泡

<body><div class="parent"><div class="child">阻止冒泡示例</div></div><script>// 例1：阻止冒泡var parent = document.querySelector(".parent")var child = document.querySelector(".child")parent.addEventListener("click",function(e){alert("parent click！")})child.addEventListener("click",function(e){alert("child click!")// 阻止冒泡，使parent click事件不被触发e.stopPropagation()})</script>
</body>

阻止默认行为

 <a href="https://www.baidu.com">跳转链接</a><script>// 阻止默认行为var alink = document.querySelector("a")alink.onclick=function(e){// 阻止点击链接后的跳转行为e.preventDefault()}</script>

六、事件委托（代理、委派）

事件委托：也叫事件代理

原理：不是每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点。
作用：只操作了一次DOM，提高了程序的性能


<body><ul><li>事件委托原理1</li><li>事件委托原理2</li><li>事件委托原理3</li><li>事件委托原理4</li><li>事件委托原理5</li></ul><script>// 笨办法var ul = document.querySelector("ul")var lis = document.querySelectorAll("li")for(let i=0;i<lis.length;i++){lis[i].onclick=function(){this.style.color='red'}}// 事件委托ul.onclick=function(e){let li = e.target // 利用事件冒泡原理，拿到的target为触发事件的元素对象lie.target.style.color='red'}</script>
</body>

七、常用的鼠标事件

7.1 常用的鼠标事件

选中文字事件：selectstart
右键菜单事件：contextmenu
点击事件：onclick
鼠标经过触发:onmouseover
鼠标离开事件：onmouseout
获得鼠标焦点触发：onfocus
失去鼠标焦点般发：onblur
鼠标移动触发：onmousemove
鼠标弹起触发：onmouseup
鼠标按下触发：onmousedown

<body><div>这是一段阻止右键以及不能选中的文字</div><script>var div = document.querySelector("div")div.oncontextmenu=function(e){// 阻止弹出右键菜单e.preventDefault()}div.onselectstart = function(e){// 阻止文字选中e.preventDefault()}</script>
</body>

7.2 常用的鼠标事件对象

event对象代表事件的状态，跟事件相关的一系列信息的集合。现阶段我们主要是用鼠标事件对象MouseEvent 和健盘事件对象 KeyboardEvent
常见的鼠标事件对象：
- e.clientX: 返回鼠标相对于浏览居南口可视区的 X 坐标
- e.clientY:返回鼠标相对于浏览器窗口可视区的 Y 坐标
- e.pageX:返回鼠标相对于文档页面的X 坐标 E9+ 支持
- e.pageY:返回鼠标相对于文档页面的 Y 坐 E9+ 支持
- e.screenX: 返回鼠标相对于电脑屏幕的X坐标
- e.screenY: 返回鼠标相对于电鹏屏幕的Y 坐标

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body{height: 3000px;}</style>
</head>
<body><script>// 当页面向下滚动一定距离后点击，发现三组值的不同document.addEventListener("click",function(e){// client组：返回当前可视区的坐标let clientX = e.clientXlet clientY = e.clientYconsole.log(clientX,clientY)// page组：返回当前文档页面的坐标let pageX = e.pageXlet pageY = e.pageYconsole.log(pageX,pageY)// screen组：返回当前点击电脑屏幕的坐标let screenX = e.screenXlet screenY = e.screenYconsole.log(screenX,screenY)})</script>
</body>
</html>

7.3 鼠标事件对象案例-跟随鼠标

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.follow{position: absolute;user-select: none;}</style>
</head>
<body><div class="follow">显眼包</div><script>let follow = document.querySelector(".follow")document.addEventListener("mousemove",function(e){let pageX = e.pageXlet pageY = e.pageYfollow.style.left = pageX+'px'follow.style.top = pageY+'px'})</script>
</body>
</html>

拓展：电商网站鼠标移入商品图看大图功能实现基于此原理

八、常用的键盘事件

8.1 常用键盘事件

onkeyup: 键盘松开时
onkeydown: 键盘按钮时, 返回键盘代码（键盘上真实键的数字）
onkeypress: 键盘被按下时，返回键字符代码（ASCII 字符），且不识别功能键如ctrl,shift等
执行顺序：down -> press->up
keydown,keypress按下时会一直触发

  <script>document.addEventListener("keyup",function(){console.log("keyup")})document.addEventListener("keypress",function(){console.log("keypress")})document.addEventListener("keydown",function(){console.log("keydown")})</script>

8.2 键盘事件对象-KeyboadEvent

e.keyCode: 返回键盘对应的码值（注意keydown与keypress不同，推荐使用keydown）
e.key: 返回键盘对应的值

 <script>//    阻止页面Ctrl+S的默认保存行为document.addEventListener("keydown", function (e) {console.log(e.key,e.keyCode,e)let keyCode = e.keyCode// 83为s键码if(keyCode==83&&e.ctrlKey){e.preventDefault();console.log("按下了ctrl s")}})</script>

8.3 案例

1、模拟京东按下S键聚焦输入框

思路：keyup事件，keyCode为83时，让输入框聚焦focus

<body><input type="text"><button >搜索</button><script>let search = document.querySelector("input")document.addEventListener("keyup",function(e){if(e.keyCode==83){search.focus()}})</script>
</body>

第一章-JavaScript基础进阶part2：事件

文章目录概念一、注册事件（绑定事件）1.1 addEventListener事件监听二、删除事件（解绑）三、DOM事件流四、事件对象event4.1 e.target与this与e.currentTarget的区别4.2 事件对象的常见属性五、阻止事件默认行为及冒泡六、事件委…...

编程日记 2023/8/4 23:23:54

如何优雅的使用后端接口

优雅的后端接口一个后端接口大致分为四个部分：接口地址(url)、接口请求方式(get、post等)、请求数据(request)、响应数据(response)。一、URL & Method Rest 设计风格》 Restful API 简单理解： URI 是用来唯一标志一个互联网资源；Me…...

编程日记 2023/8/4 23:22:53

QEMU源码全解析25 —— QOM介绍（14）

接前一篇文章：QEMU源码全解析24 —— QOM介绍（13） 本文内容参考： 《趣谈Linux操作系统》 —— 刘超，极客时间《QEMU/KVM》源码解析与应用 —— 李强，机械工业出版社特此致谢！ 本文开始对于…...

编程日记 2023/8/4 23:21:51

TopK问题

topK问题： N个数找最大或者最小的前k个。例子： 优质筛选（店面的排名） 10000个数，找出最大的前10个数解决思路：建立大堆，然后pop9次但是有些场景，上面的思路…...

编程日记 2023/8/4 23:20:50

接口自动化测试-Postman+Newman+Git+Jenkins实战集成（详细）

目录：导读前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结（尾部小惊喜） 前言 1、Postman 创建…...

编程日记 2023/8/4 23:19:48

CMake 学习笔记（Generator Expressions）

CMake 学习笔记 （Generator Expressions） Generator Expressions 可以认为是一种特殊的变量，它会在编译阶段求值。通常用在 target_link_libraries(), target_include_directories(), target_compile_definitions() 上。用 Generator Expr…...

编程日记 2023/8/4 23:18:46

提高测试用例质量的6大注意事项

在软件测试中，经常会遇到测试用例设计不完整，用例没有完全覆盖需求等问题，这样往往容易造成测试工作效率低下，不能及时发现项目问题，无形中增加了项目风险。因此提高测试用例质量，就显得尤为重要。一般来说…...

编程日记 2023/8/4 23:17:45

2023牛客暑期多校训练营6 A-Tree (kruskal重构树))

文章目录题目大意题解参考代码题目大意 ( 0 ≤ a i ≤ 1 ) , ( 1 ≤ c o s t i ≤ 1 0 9 ) (0\leq a_i\leq 1),(1 \leq cost_i\leq 10^9) (0≤ai≤1),(1≤costi≤109) 题解提供一种新的算法，kruskal重构树。该算法重新构树，按边权排序每一条边…...

编程日记 2023/8/4 23:16:44

软件测试—支付功能测试

有人问过我这样一个问题：作为一个支付平台，接入了快钱、易宝或直连银行等多家的渠道，内在的产品流程是自己的。业内有什么比较好的测试办法，来测试各渠道及其支持的银行通道呢？ 回答：对支付平台而言&#…...

编程日记 2023/8/4 23:15:42

自动化测试的统筹规划

背景回顾以前自动化测试编写的经历，主要是以开发者自驱动的方式进行，测试的编写随心而动，没有规划，也没有章法，这样就面临如下的一些问题： 测试用例设计不到位，覆盖不全，或者不够…...

编程日记 2023/8/4 23:14:41

外键字段的增删改查、多表查询(子查询和连表查询、正反向、聚合查询、分组查询、 F与Q查询)、django中如何开启事务

一、外键字段的增删改查 1.多对多的外键增删改查图书和作者是多对多，借助于第三张表实现的，如果想绑定图书和作者的关系，本质上就是在操作第三方表2.如何操作第三张表问题：让你给图书添加一个作者，他俩的关系可是多对…...

编程日记 2023/8/4 23:13:40

【学习笔记】生成式AI（ChatGPT原理，大型语言模型）

ChatGPT原理剖析语言模型文字接龙 ChatGPT在测试阶段是不联网的。 ChatGPT背后的关键技术：预训练（Pre-train） 又叫自监督式学习（Self-supervised Learning），得到的模型叫做基石模型（Founda…...

编程日记 2023/8/4 23:12:37

【Opencv入门到项目实战】（三）：图像腐蚀与膨胀操作

文章目录 1.腐蚀操作2.膨胀操作3.开运算和闭运算4.礼帽与黑帽5.梯度运算 1.腐蚀操作腐蚀操作是图像处理中常用的一种形态学操作，我们通常用于去除图像中的噪声、分割连通区域、减小目标物体的尺寸等。腐蚀操作的原理是，在给定的结构元素下，…...

编程日记 2023/8/4 23:11:36

Autosar诊断系列介绍20 - UDS应用层P2Server/P2Client等时间参数解析

本文框架 1. 前言2.几个时间参数含义2.1 P2Client与P2Server2.2 P2*Client与P2*Server2.3 P3Client_Phys与P3Client_Func2.4 S3Client与S3Server 1. 前言本系列Autosar 诊断入门介绍，会详细介绍诊断相关基础知识，如您对诊断实战有更高需求，…...

编程日记 2023/8/4 23:10:35

【iOS】json数据解析以及简单的网络数据请求

文章目录前言一、json数据解析二、简单的网络数据请求三、实现访问API得到网络数据总结前言近期写完了暑假最后一个任务——天气预报，在里面用到了简单的网络数据请求以及json数据的解析，特此记录博客总结一、json数据解析 JSON是一种轻量级的数据…...

编程日记 2023/8/4 23:09:34

Kubernetes客户端认证—— 基于ServiceAccount的JWTToken认证

1、概述在 Kubernetes 官方手册中给出了 “用户” 的概念，Kubernetes 集群中存在的用户包括 “普通用户” 与 “ServiceAccount”， 但是 Kubernetes 没有普通用户的管理方式，通常只是将使用集群根证书签署的有效证书的用户都被视为合法用户。…...

编程日记 2023/8/4 23:08:31

45.ubuntu Linux系统安装教程

目录一、安装Vmware 二、Linux系统的安装今天开始了新的学习，Linux,下面是今天学习的内容。一、安装Vmware 这里是在 Vmware 虚拟机中安装 linux 系统，所以需要先安装 vmware 软件，然后再安装 Linux 系统。所需安装文件：…...

编程日记 2023/8/4 23:07:30

Jmeter函数助手（一）随机字符串（RandomString）

一、目标实现一个请求单次调用，请求体里多个集合中的相同参数（zxqs）值随机从序列{01、02、03、03、04、05、06、07、08}中取若使用CSV数据文件、用户参数等参数化手段，单次执行请求，请求体里多个集合中的相同参数&a…...

编程日记 2023/8/4 23:06:28

文章目录 1 微服务API网关Gateway1.1 网关简介1.2 Spring Cloud Gateway介绍1.3 Gateway特性1.4 Gateway核心概念1.4.1 路由1.4.1.1 定义1.4.1.2 动态路由 1.4.2 断言1.4.2.1 默认断言1.4.2.2 自定义Predicate 1.4.3 过滤器1.4.3.1 默认过滤器1.4.3.2 自定义Filter（…...

编程日记 2023/8/4 23:05:27

机器学习入门之 pandas

pandas 有三种数据结构一种是 Series 一种是 Dataframe import pandas as pd import numpy as np score np.random.randint(0,100,[10,5])score[0,0] 100Datascore pd.DataFrame(score)subject ["语文","数学","英语","物理&quo…...

编程日记 2023/8/4 23:04:26

零门槛NAS搭建：WinNAS如何让普通电脑秒变私有云？

一、核心优势：专为Windows用户设计的极简NAS WinNAS由深圳耘想存储科技开发，是一款收费低廉但功能全面的Windows NAS工具，主打“无学习成本部署” 。与其他NAS软件相比，其优势在于： 无需硬件改造：将任意W…...

编程新知 2026/1/2 23:01:24

Linux链表操作全解析

Linux C语言链表深度解析与实战技巧一、链表基础概念与内核链表优势1.1 为什么使用链表？1.2 Linux 内核链表与用户态链表的区别二、内核链表结构与宏解析常用宏/函数三、内核链表的优点四、用户态链表示例五、双向循环链表在内核中的实现优势5.1 插入效率5.2 安全…...

编程新知 2025/12/3 20:14:32

C++中string流知识详解和示例

一、概览与类体系 C 提供三种基于内存字符串的流，定义在 <sstream> 中： std::istringstream：输入流，从已有字符串中读取并解析。std::ostringstream：输出流，向内部缓冲区写入内容，最终取…...

编程新知 2025/11/30 11:30:47

css3笔记（1）自用

outline: none 用于移除元素获得焦点时默认的轮廓线 broder:0 用于移除边框 font-size：0 用于设置字体不显示 list-style: none 消除<li> 标签默认样式 margin: xx auto 版心居中 width:100% 通栏 vertical-align 作用于行内元素 / 表格单元格&#xff…...

编程新知 2025/10/11 5:18:43