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

JavaScript 事件处理

news 2026/4/3 20:51:26

一、简介

事件：发生在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

汇编VS高级语言：从硬件操控到高效开发

汇编语言和Visual Studio（VS）的主要区别如下：核心区别对比维度汇编语言Visual Studio本质一种低级编程语言，直接操作硬件一种集成开发环境（IDE），支持多种高级语言使用场景嵌入式系统、驱动开发、…...

编程新知 2026/4/3 20:29:27

终极解析器构建指南：Ohm从CSV解析到自定义语法实战

终极解析器构建指南：Ohm从CSV解析到自定义语法实战【免费下载链接】ohm A library and language for building parsers, interpreters, compilers, etc. 项目地址: https://gitcode.com/gh_mirrors/oh/ohm Ohm是一个强大的解析器构建库和领域特定语言&#…...

编程新知 2026/4/3 19:59:10

Python数据标准化全攻略：从原理到实践

在机器学习和数据分析领域，数据标准化是一项至关重要的预处理步骤。它能够将不同尺度的特征统一到相同的范围内，帮助模型更好地学习数据特征，提高训练效率和模型性能。本文将详细介绍数据标准化的概念、常用方法以及在Python中的实现方式。一…...

编程新知 2026/4/3 19:20:46

2025_NIPS_G1: Teaching LLMs to Reason on Graphs with Reinforcement Learning

文章核心总结与创新点核心内容本文针对大型语言模型（LLMs）在图推理任务中表现有限的问题，提出了一种基于强化学习（RL）的方法G1。通过在大规模合成图论任务数据集Erdős上训练，G1显著提升了LLMs的图推理能力，且在未见过的任务、领域和图编码方案中表现出强泛化性，同…...

编程新知 2026/4/3 18:58:26

Navicat重置工具：macOS用户无限试用Navicat Premium的终极方案

Navicat重置工具：macOS用户无限试用Navicat Premium的终极方案【免费下载链接】navicat_reset_mac navicat mac版无限重置试用期脚本 Navicat Mac Version Unlimited Trial Reset Script 项目地址: https://gitcode.com/gh_mirrors/na/navicat_reset_mac Na…...

编程新知 2026/4/3 18:11:35

openclaw添加本地大模型支持接受图片输入

这里写自定义目录标题1.故障现象2.背景3.解法4.排查1.故障现象 openclaw gateway的聊天处，上传图片报错 parseMessageWithAttachments: 1 attachment(s) dropped — model does not support images2.背景 qwen3.5的大模型原本就是多模态的（支持图片的…...

编程新知 2026/4/3 18:01:29

SEO_中小企业如何低成本做好SEO推广的秘诀

为什么SEO推广对中小企业至关重要在当今的数字经济时代，网络已成为中小企业营销的主要渠道。搜索引擎优化（SEO）推广不仅能够帮助中小企业提高在搜索引擎中的排名，还能带来更多的潜在客户。SEO推广常常被认为是一个高成本、高技术…...

编程新知 2026/4/3 17:59:28

万象视界灵坛实战教程：构建语义搜索API供前端React/Vue应用调用

万象视界灵坛实战教程：构建语义搜索API供前端React/Vue应用调用 1. 项目概述与核心价值万象视界灵坛是一款基于OpenAI CLIP模型的高级多模态智能感知平台，它将复杂的语义对齐技术转化为直观的视觉体验。本教程将指导开发者如何将其强大的语义搜索能力…...

编程新知 2026/4/3 17:25:08

2.5m双馈风力发电机DFIG的带储能Simulink电气建模与仿真（参数源自IEEE3）”

2.5m双馈风力发电机DFIG并网_带储能的simulink电气建模与仿真，参数来自IEEE3半夜两点盯着Simulink界面眼冒绿光，手里的咖啡已经续到第五杯——这大概每个搞风电建模的工程师都经历过的场景。今天咱们就唠唠这个让人又爱又恨的2.5MW双馈风机并网模型&…...

编程新知 2026/4/3 17:21:07

4个步骤掌握python-for-android：Python移动应用跨平台部署指南

4个步骤掌握python-for-android：Python移动应用跨平台部署指南【免费下载链接】python-for-android Turn your Python application into an Android APK 项目地址: https://gitcode.com/gh_mirrors/py/python-for-android 1. 问题：Python移动开发…...

编程新知 2026/4/3 17:16:50