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

JavaScript 事件处理

news 2025/9/20 18:39:13

一、简介

事件：发生在HTML元素上的事情，可以是用户的行为，也可以是浏览器的行为，如

用户点击了某个HTML元素
用户将鼠标移动到某个HTML元素上
用户输入数据时光标离开
页面加载完成

事件源：事件触发的源头，即触发事件的元素，如按钮、输入框、超链接等

事件对象：当一个事件发生时，这个事件相关的详细信息会被保存到一个对象中，称为event对象

事件监听：监听事件的发生，绑定事件函数，当事件被触发后执行该事件函数，即回调函数

二、绑定事件

三种方式：

静态绑定，通过为标签的事件属性赋值

<head>    <script>function f1(){console.log("静态绑定");}</script>
</head>
<body><!--方式1：通过标签的事件属性--><button onclick="f1()">按钮1</button>
</body>

动态绑定，通过为DOM对象的事件属性赋值

<head><script>//当页面加载完成后执行window.onload=function(){var btn2=document.getElementById("btn2");//方式2：通过DOM对象的事件属性，为按钮绑定点击事件btn2.onclick=function(){console.log("动态绑定");}}</script>
</head>
<body><button id="btn2">按钮2</button>
</body>

动态绑定，通过为DOM对象进行事件监听，使用addEventListene("事件名",回调函数)

<head>   <script>//当页面加载完成后执行window.onload=function(){//方式3：通过为DOM对象进行事件监听addEventListenervar btn3=document.getElementById("btn3");btn3.addEventListener("click",function(){console.log("动态绑定");});}</script>
</head>
<body><button id="btn3">按钮3</button>
</body>

注意：

可以通过事件回调函数的第一个参数获取事件对象event，属性含义：

    target      事件的目标元素，即事件源type            事件类型timeStamp   事件生成的日期和时间clientX     当事件被触发时，鼠标指针的水平坐标clientY     当事件被触发时，鼠标指针的垂直坐标

在事件回调函数中，this表示事件源，即发生事件的元素

<head><script>//当页面加载完成后执行window.onload=function(){var btn=document.getElementById("btn");btn.onclick=function(event){//事件触发时会自动为回调函数传入一个参数，表示event事件对象console.log(111);console.log(event);console.log(typeof event);console.log(event.target);//事件源console.log(event.type);//事件类型console.log(this);//事件源，等同于console.log(event.target);}}function f1(event){console.log(event);}</script>
</head>
<body><button id="btn">点我</button><!--静态绑定事件时，需要在绑定事件回调函数时接收事件对象参数--><button onclick="f1(event)">click me</button>
</body>

三、常用事件

1、鼠标事件

事件名	描述
onclick	鼠标单击
ondblclick	鼠标双击
onmouseover	鼠标移到某元素之上
onmouseout	鼠标从某元素上移开
onmousedown	鼠标按钮被按下
onmouseup	鼠标按键被松开
onmousemove	鼠标被移动
oncontextmenu	鼠标右键单击

<head><script>window.onload=function(){var btn=document.getElementById("btn");//鼠标事件//btn.onclick=function(){}//鼠标单击//btn.ondblclick=function(){}//鼠标双击/*btn.onmouseover=function(){//鼠标经过console.log(111);}btn.onmouseout=function(){//鼠标离开console.log(222);}btn.onmousedown=function(){//鼠标按下console.log(111);}btn.onmouseup=function(){//鼠标松开console.log(222);}btn.onmousemove=function(){//鼠标移动console.log(111);}*/btn.oncontextmenu=function(){//鼠标右击console.log(111);}}</script>
</head>
<body><button id="btn">点我</button>
</body>

2、键盘事件

事件名	描述
onkeydown	某个键盘的键被按下去
onkeypress	某个键盘的键被按下去且松开
onkeyup	某个键盘的键被松开

<head>     <script>//键盘事件var username=document.getElementById("username");username.onkeydown=function(e){//键盘的键被按下去//console.log(111);//console.log(e.keyCode);//获取按键码if(e.keyCode==13){//当输入回车后才会输出111(回车键码是13)console.log(111);}}/*username.onkeypress=function(){//键盘的键被按下去且松开console.log(222);}username.onkeyup=function(){//键盘的键被松开console.log(333);}*/}</script>
</head>
<body>用户名：<input type="text" id="username"> 
</body>

3、表单事件

事件名	描述
onfocus	元素获得焦点
onblur	元素失去焦点
onchange	域的内容发生改变，一般用于文件选择器和下拉列表
onselect	文本内容被选中
onsubmit	表单提交前触发，回调函数返回true表示允许表单提交，返回false表示阻止表单提交

表单元素的方法：focus()、blur()、select()、click()

<head><style>#username,#email{outline: 0;}.border{border: 1px solid red;}#img{width:100px;height:100px;}#head{display:none;}/*被选中的内容为红色*//*#email::selection{color:red;}*/</style><script>//表单事件window.onload=function(){var username=document.getElementById("username");username.onfocus=function(){//元素获得焦点username.classList.add("border");}username.onblur=function(){//元素失去焦点username.classList.remove("border");}document.getElementById("eat").onchange=function(){//域的内容发生改变console.log(this.checked);//获取是否选中}document.getElementById("head").onchange=function(){//console.log(this.files);//获取选择的文件数据document.getElementById("img").src=window.URL.createObjectURL(this.files[0]);//根据选中的图片改src}document.getElementById("email").onselect=function(){//文本内容被选中this.classList.add("border");}document.getElementById("frm").onsubmit=function(){//判断表单内容是否符合要求var email=document.getElementById("email").value;if(email==""){return false;}return true;}}</script>
</head>
<body><form action="" id="frm">用户名：<input type="text" id="username"><br>爱好：<input type="checkbox" name="hobby" id="eat" value="eat">吃饭<br>头像：<input type="file"  id="head" multiple><!--可同时选多个文件--><label for="head"><img src="./默认头像.png" id="img"></label><br>邮箱：<input type="text" id="email" value="tom@sina.com.cn" name="email"><br><input type="submit" value="提交"></form>
</body>

四、事件操作

1、事件流

概念：当一个HTML元素产生事件时，该事件会在当前元素与根元素之间按特定的顺序传播，所有经过的节点都会收到该事件并执行，这个传播过程就是DOM事件流。

分类：事件冒泡、事件捕获

2、事件冒泡/事件捕获

事件冒泡：当一个元素上的事件被触发时，事件从事件源开始，往上冒泡直到页面的根元素，这一过程被称为事件冒泡（默认方式）

事件捕获：当一个元素上的事件被触发时，事件从页面的根元素开始，往下直到事件目标元素，这一过程被称为事件捕获

阻止事件冒泡：event.stopPropagation()

<head><style>div{border:1px solid black;}#div1{width:200px;height:200px;}#div2{width:150px;height:150px;}#div3{width:100px;height:100px;}#div4{width:50px;height:50px;}</style><script>function $(id){return document.getElementById(id);}window.onload=function(){$("div1").addEventListener("click",function(){console.log("div1");},false)//第三个参数为true表示采用事件捕获，默认为false表示事件冒泡$("div2").addEventListener("click",function(){console.log("div2");},false)$("div3").addEventListener("click",function(event){console.log("div3");event.stopPropagation();//阻止事件传播},false)$("div4").addEventListener("click",function(){console.log("div4");},false)};</script>
</head>
<body><div id="div1" onclick="print(' div1' )">div1<div id="div2" onclick="print(' div2' )">div2<div id="div3" onclick="print(' div3' )">div3<div id="div4" onclick="print(' div4' )">div4</div></div></div></div>
</body>

3、事件代理/事件委托

概念：利用事件冒泡/事件捕获机制，通过给父元素绑定事件，从而实现对所有子元素的事件管理，无需为每个子元素绑定事件

优点：1.减少事件注册，降低内存占用

2.新增元素时实现动态绑定事件

<head>     <style>ul{border:1px solid #ccc;}li{background: pink;}</style><script>window.onload=function(){/*var lis=document.querySelectorAll("li");for(var li of lis){li.onclick=function(){console.log(this);//事件源console.log(this,innerText);}}*/document.querySelector('ul').onclick=function(e){console.log(e.target.innerText);//console.log(e.target);//触发事件的原始对象console.log(this);}}function add(){var li=document.createElement("li");li.innerText="li6";/*li.onclick=function(){console.log(this,innerText);}*/document.querySelector('ul').appendChild(li);}</script>
</head>
<body><button onclick="add()">添加li</button><ul><li>li1</li><li>li2</li><li>li3</li><li>li4</li><li>li5</li></ul>
</body>

4、事件默认行为

概念：当一个事件发生时浏览器自己会默认做的事情，如：点击链接时默认会跳转，右键点击时默认会弹出菜单

阻止事件的默认行为：e.preventDefault();

<head> <script>function print(e){console.log(111);e.preventDefault();//阻止事件的默认行为}</script>
</head>
<body><button oncontextmenu="print(event)">右键点击</button><br><a href="https://www.baidu.com" onclick="print(event)">百度</a><!--<a href="JavaScript:print()">百度</a>-->
</body>

JavaScript 事件处理

一、简介事件：发生在HTML元素上的事情，可以是用户的行为，也可以是浏览器的行为，如用户点击了某个HTML元素用户将鼠标移动到某个HTML元素上用户输入数据时光标离开页面加载完成事件源：事件触发的源头&#xf…...

编程日记 2024/9/17 8:40:58

容器技术--Docker应用部署

应用部署容器部署mysql 搜索并拉取镜像；基于镜像启动容器，注意端口映射、目录映射启动后即可连接# 搜索镜像 docker search mysql # 拉取镜像 docker pull mysql:5.7 # docker pull mysql 默认拉取最新的# 创建mysql容器, -p端口映射（宿主端口:容器端口） -e 环境变量，镜…...

编程日记 2024/9/17 8:38:56

医院管理|基于java的医院管理系统小程序(源码+数据库+文档)

医院管理系统小程序目录基于java的医院管理系统小程序一、前言二、系统设计三、系统功能设计医生信息管理排班信息管理科室信息管理科室预约病历信息四、数据库设计五、核心代码六、论文参考七、最新计算机毕设选题推荐八、源码获取：…...

编程日记 2024/9/17 8:34:52

golang学习笔记21——golang协程管理及sync.WaitGroup的使用

推荐学习文档 golang应用级os框架，欢迎stargolang应用级os框架使用案例，欢迎star案例：基于golang开发的一款超有个性的旅游计划app经历golang实战大纲golang优秀开发常用开源库汇总想学习更多golang知识，这里有免费的golang学习笔…...

编程日记 2024/9/17 8:33:51

C++初阶大全

目录一.命名空间 1.命名空间定义 2.命名空间使用二.C输入&输出三.缺省参数四. 函数重载五.引用 1.常引用 2.传值、传引用效率比较 3.引用和指针的区别 4.引用和指针的不同点: 小知识点: 六.内联函数七.auto关键字(C11) 1.auto的使用细则八.基于范围…...

编程日记 2024/9/17 8:23:09

使用Redis实现用户关注博客的推模式

目录一、思路二、实现代码： 一、思路发布者： 这里采用redis的zset结构，将键设置为被推送用户id，值设置为博客id，score设置为时间戳推送之前先查到当前发布博客用户的粉丝有哪些，然后去循环挨个推送…...

编程日记 2024/9/17 8:21:07

python常用模块之time、datetime、randow（14）

文章目录前言1、time模块1.1 导入模块1.2 使用方法1.2.1 时间戳1.2.2 程序休眠1.2.3 扩展：按某种格式显示当前时间1.2.4 结构化时间 2、datetime模块2.1 导入模块2.2 使用方法2.2.1 得到当前系统的时间2.2.2 拓展：编写一个时钟小程序 3、random模块3.1 …...

编程日记 2024/9/17 8:20:07

根据NVeloDocx Word模板引擎生成Word（六-结束）

前面几篇已经把E6开发平台配套的Word模版隐藏NVeloDocx的基础用法介绍了一遍，这些基础用法基本上可以完全覆盖实际业务的绝大部分需求。所以我们这一篇就介绍一些边边角角的内容，给本系列来一个首尾。本篇的主要内容有： 1、汇总计算&#…...

编程日记 2024/9/17 8:13:00

Android架构组件：MVVM模式的实战应用与数据绑定技巧

目录引言一、MVVM模式概述 1.1 MVVM模式简介 1.2 MVVM模式的优势二、MVVM模式的实现 2.1 项目环境配置 2.2 创建MVVM组件 2.2.1 创建数据模型 2.2.2 创建数据仓库 2.2.3 创建ViewModel 2.2.4 创建布局文件 2.2.5 创建RecyclerView适配器 2.3 在Activity中绑定V…...

编程日记 2024/9/17 8:11:59

调用系统的录音设备提示：line with format PCM_SIGNED 16000.0 Hz

javax.sound.sampled.LineUnavailableException: line with format PCM_SIGNED 16000.0 Hz, 8 bit, mono, 1 bytes/frame, not supported. 打开设置->隐私->麦克风->允许应用访问你的麦克风与 16000Hz没关系与 16000Hz没关系与 16000Hz没关系...

编程日记 2024/9/17 8:10:59

android BLE 蓝牙的连接（二）

下面是基于实际的项目得到的具体步骤及核心代码 1、权限问题先判断手机是否满足android4.3以上版本，再判断手机是否开启蓝牙主要涉及蓝牙权限和位置权限，注意不同android版本之间权限申请的差异，以及android权限动态申请和静态申请的区别 …...

编程日记 2024/9/17 8:07:56

改编pikachu的打靶经历（题目不全）

前言题目很少，只做了一些。正常版本的，完整的pikachu可参考下面这个师傅写的 https://www.cnblogs.com/henry666/p/16947270.html xss （get）反射xss 先尝试 1 这里有长度限制，而且，我改了长度&#xf…...

编程日记 2024/9/17 8:05:54

Linux进阶修改文件所有者

修改文件所属组群——chgrp 修改文件所属组群很简单-chgrp命令，就是change group的缩写(我们可以利用这些来记忆命令) 语法：chgrp 组群文件名/目录举例： [root@redhat ~]# groupadd groupa[root@redhat ~]# groupadd groupb[root@redhat ~]# useradd -g groupa zgz[r…...

编程日记 2024/9/17 8:02:51

第312题｜二重积分求旋转体体积（二）｜武忠祥老师每日一题

解题思路：先画出图像，再利用旋转体体积计算公式进行解题。 1. 旋转体体积计算公式： 2.点到直线计算公式： 有了上面两条知识储备之后我们开始计算。第一步：先计算出点到直线的距离： ymx，y-mx…...

编程日记 2024/9/17 7:58:48

redis基本数据结构-set

文章目录 1. set的基本介绍1.1. set底层结构之hash表的简单介绍1.2. 常用命令 2. 常见的业务场景2.1. 标签系统2.2. 社交网络好友关系 1. set的基本介绍参考链接：https://mp.weixin.qq.com/s/srkd73bS2n3mjIADLVg72A redis 的 set 数据结构是一个无序的集合&#…...

编程日记 2024/9/17 7:57:47

Android 应用安装-提交阶段

经过前面准备、浏览、协调这些步骤，马上要进入提交阶段了。所谓提交，就是把这些安装应用的相关信息和状态都放到系统中。对于已安装普通应用，它其实分为两个步骤，先卸载旧包，再安装新包。当然，如果是新安装…...

编程日记 2024/9/17 7:53:44

强化学习Reinforcement Learning|Q-Learning|SARSA|DQN以及改进算法

一、强化学习RL 强化学习是机器学习的一个重要的分支，是一种有效的工具，在文献中被广泛用于解决MDP问题。在一个强化学习过程中，一个智能体只能通过和它所处的环境互动学习最优策略。特别地，智能体首先观察自己当前的状态&#xf…...

编程日记 2024/9/17 7:52:43

【HarmonyOS NEXT开发】如何设置水平/垂直方向的左/居中/右对齐——RelativeContainer的AlignRules设置

文章目录【HarmonyOS NEXT开发】如何设置水平/垂直方向的左/居中/右对齐——RelativeContainer的AlignRules设置RelativeContainer 和 AlignRules 的关系AlignRules 语法详解【HarmonyOS NEXT开发】如何设置水平/垂直方向的左/居中/右对齐——RelativeContainer的AlignRules设…...

编程日记 2024/9/17 7:51:42

java之认识异常

在 Java 中，异常（Exception）用于处理程序运行时出现的错误或异常情况。Java 的异常处理机制基于 try, catch, finally 和 throw 关键字。 1.异常的分类： 1.1：检查型异常(CheckedException)： 定义:程序在…...

编程日记 2024/9/17 7:46:38

JSON处理工具类 import org.json.JSONArray; import org.json.JSONObject;import java.util.ArrayList; import java.util.List;/*** JSON处理工具类*/ public class JsonUtils {/****将json字符串转为map* param json* return java.util.Map<java.lang.String, java.lang.O…...

编程日记 2024/9/17 7:45:37

谷歌浏览器插件

项目中有时候会用到插件 sync-cookie-extension1.0.0：开发环境同步测试 cookie 至 localhost，便于本地请求服务携带 cookie 参考地址：https://juejin.cn/post/7139354571712757767 里面有源码下载下来，加在到扩展即可使用FeHelp…...

编程新知 2025/8/16 3:55:30

基于ASP.NET+ SQL Server实现（Web）医院信息管理系统

医院信息管理系统 1. 课程设计内容在 visual studio 2017 平台上，开发一个“医院信息管理系统”Web 程序。 2. 课程设计目的综合运用 c#.net 知识，在 vs 2017 平台上，进行 ASP.NET 应用程序和简易网站的开发；初步熟悉开发一…...

编程新知 2025/9/19 7:29:06

MFC内存泄露

1、泄露代码示例 void X::SetApplicationBtn() {CMFCRibbonApplicationButton* pBtn GetApplicationButton();// 获取 Ribbon Bar 指针// 创建自定义按钮CCustomRibbonAppButton* pCustomButton new CCustomRibbonAppButton();pCustomButton->SetImage(IDB_BITMAP_Jdp26)…...

编程新知 2025/9/20 2:20:13

鱼香ros docker配置镜像报错：https://registry-1.docker.io/v2/

使用鱼香ros一件安装docker时的https://registry-1.docker.io/v2/问题一键安装指令 wget http://fishros.com/install -O fishros && . fishros出现问题：docker pull 失败网络不同，需要使用镜像源按照如下步骤操作 sudo vi /etc/docker/dae…...

编程新知 2025/9/5 21:18:15

Maven 概述、安装、配置、仓库、私服详解

目录 1、Maven 概述 1.1 Maven 的定义 1.2 Maven 解决的问题 1.3 Maven 的核心特性与优势 2、Maven 安装 2.1 下载 Maven 2.2 安装配置 Maven 2.3 测试安装 2.4 修改 Maven 本地仓库的默认路径 3、Maven 配置 3.1 配置本地仓库 3.2 配置 JDK 3.3 IDEA 配置本地 Ma…...

编程新知 2025/9/7 8:50:41

论文笔记——相干体技术在裂缝预测中的应用研究

目录相关地震知识补充地震数据的认识地震几何属性相干体算法定义基本原理第一代相干体技术：基于互相关的相干体技术（Correlation）第二代相干体技术：基于相似的相干体技术（Semblance）基于多道相似的相干体…...

编程新知 2025/9/18 12:51:58

使用LangGraph和LangSmith构建多智能体人工智能系统

现在，通过组合几个较小的子智能体来创建一个强大的人工智能智能体正成为一种趋势。但这也带来了一些挑战，比如减少幻觉、管理对话流程、在测试期间留意智能体的工作方式、允许人工介入以及评估其性能。你需要进行大量的反复试验。在这篇博客〔原作者&a…...

编程新知 2025/9/17 14:15:36

【JVM】Java虚拟机（二）——垃圾回收

目录一、如何判断对象可以回收 （一）引用计数法 （二）可达性分析算法二、垃圾回收算法 （一）标记清除 （二）标记整理 （三）复制 （四&#xff…...

编程新知 2025/9/2 17:48:56

Rust 开发环境搭建

环境搭建 1、开发工具RustRover 或者vs code 2、Cygwin64 安装 https://cygwin.com/install.html 在工具终端执行： rustup toolchain install stable-x86_64-pc-windows-gnu rustup default stable-x86_64-pc-windows-gnu 2、Hello World fn main() { println…...

编程新知 2025/9/2 16:53:49

OD 算法题 B卷【正整数到Excel编号之间的转换】

文章目录正整数到Excel编号之间的转换正整数到Excel编号之间的转换 excel的列编号是这样的：a b c … z aa ab ac… az ba bb bc…yz za zb zc …zz aaa aab aac…; 分别代表以下的编号1 2 3 … 26 27 28 29… 52 53 54 55… 676 677 678 679 … 702 703 704 705;…...

编程新知 2025/8/31 2:33:30