JavaScript【6】事件

1.概述:

  • 在 JavaScript 中,事件(Event)是浏览器或 DOM(文档对象模型)与 JavaScript 代码之间交互的一种机制。
    
  • 它代表了在浏览器环境中发生的特定行为或者动作,比如用户点击鼠标、敲击键盘、页面加载完成、元素获得或失去焦点等情况。这些事件可以被 JavaScript 代码捕获并进行相应的处理。
    

2.表单事件:

1.获取/失去焦点:onfocus/onblur

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<form action="#" method="post" id="myForm" enctype="application/x-www-form-urlencoded"><input type="text" id="text"/>
<!--    <button type="submit">提交</button>--><input type="submit"/>
</form><script>let text = document.getElementById("text");text.onblur = function () {//失去焦点时this.style.backgroundColor = "green";}text.onfocus = function () {//获得焦点时this.style.backgroundColor = "red";}
</script></body>
</html>

默认输入框背景无填充色,只有触发下面事件才会将背景填充为对应颜色

点击输入框,此时获得焦点,触发获得焦点事件,将输入框背景改为红色

点击输入框以外的区域,此时失去焦点,触发失去焦点事件,将输入框背景改为绿色

2.节点内容改变:onchange

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<form action="#" method="post" id="myForm" enctype="application/x-www-form-urlencoded"><input type="text" id="text"/>
<!--    <button type="submit">提交</button>--><input type="submit"/>
</form><script>let text = document.getElementById("text");text.onchange = function () {//节点的内容改变时console.log(this.value)}
</script></body>
</html>

当输入1时,控制台输入1;

当删除输入框中的1后再重新输入1,发现控制台没有再次输出,说明此时没有触发该事件;

当输入框内的内容发送改变时,会再次触发该事件,并将输入值打印到控制台;

3.输入框有内容输入时:oninput

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<form action="#" method="post" id="myForm" enctype="application/x-www-form-urlencoded"><input type="text" id="text"/>
<!--    <button type="submit">提交</button>--><input type="submit"/>
</form><script>let text = document.getElementById("text");text.oninput = function () {//在用户输入时执行console.log(this.value)}
</script></body>
</html>

没有内容输入时,不触发该事件;

输入内容时,会将输入内容打印到控制台

当删除输入框内容时,会触发该事件,控制台打印空数据

当再次输入1时,再次触发该事件,控制台再次打印该数据

4.选取元素时:onselect

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<form action="#" method="post" id="myForm" enctype="application/x-www-form-urlencoded"><input type="text" id="text"/>
<!--    <button type="submit">提交</button>--><input type="submit"/>
</form><script>let text = document.getElementById("text");text.onselect = function () {console.log("选取元素时执行",this.value)}</script></body>
</html>

输入框输入内容时,不触发该事件

当选取输入内容时,触发该事件,将输入内容打印到控制台

5.提交时:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<form action="#" method="post" id="myForm" enctype="application/x-www-form-urlencoded"><input type="text" id="text"/><button type="submit">提交</button><input type="submit"/>
</form><script>let myForm = document.getElementById("myForm");myForm.onsubmit = function () {// if(text.value.....){//.....// }//当返回值为fasle  阻止提交// true  允许提交return false;}*/</script></body>
</html>

此时返回值为false,点击提交按钮时不会触发提交事件,该表单不会被提交

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<form action="#" method="post" id="myForm" enctype="application/x-www-form-urlencoded"><input type="text" id="text"/><button type="submit">提交</button><input type="submit"/>
</form><script>let myForm = document.getElementById("myForm");myForm.onsubmit = function () {// if(text.value.....){//.....// }//当返回值为fasle  阻止提交// true  允许提交return true;}</script></body>
</html>

当返回值为true时,点击提交按钮会触发该事件,该表单会被提交(#表示提交到当前页面)

3.窗口事件:

1.获得/失去焦点时:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<img src="./img/QQ20241118-114112.png"/>
<script>window.onblur = function () {console.log('窗口失去了焦点')}window.onfocus = function () {console.log('窗口获得了焦点')}</script></body>
</html>  

此时刚打开页面,不触发事件,所以控制台无输出

当点击左侧窗口区域时,触发获得焦点事件,控制台打印对应内容

当再次点击窗口外区域时,触发失去焦点事件,控制台再次打印对应内容

2.页面加载完成时:onload

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<img src="./img/QQ20241118-114112.png"/>
<script>window.onload= function () {//当页面加载完成后执行console.log("页面加载完成")}</script></body>
</html>  

 当使用低网速加载测试时,可以发现,不是一打开页面就会触发该事件,而是只有当整个页面加载出来后,才会触发该事件;

3.窗口大小改变时:onresize

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><script>window.onresize= function () {console.log("页面大小正在改变")}</script></body>
</html>  

页面加载完成时,未触发事件

此时将窗口区域面积减小时,触发了该事件,并在控制台打印对应信息

4.键盘事件:

1.键盘按下时触发:onkeydown

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<!--<input type="text" id="text"/>-->
<script>let text = document.getElementById("text");//键盘按下时执行text.onkeydown = function (event) {// 解决兼容问题event = event || window.event;// key 按键//console.log("按下的键:", event.keyCode)console.log("按下的键:",event.key)}</script></body>
</html>

只要在键盘上按下按键,每按一次就会触发一次该事件,(如果长按则会重复触发),并将按键输出到控制台;

2.键盘弹起时触发:onkeyup

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<!--<input type="text" id="text"/>-->
<script>let text = document.getElementById("text");text.onkeyup = function (event) {console.log("按键弹起时:",event.key)}</script></body>
</html>

当长按1时,不会触发该事件,只有当松开时,会触发1次该事件

3.按下弹起时触发:onkeypress

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<!--<input type="text" id="text"/>-->
<script>let text = document.getElementById("text");text.onkeypress = function (event) {console.log("按下弹起时:",event.key)}</script></body>
</html>

只有当按下并松开时才会触发该事件

4.案例:通过方向键控制色块移动

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="box" style="width: 100px;height: 100px;background-color: red;position: absolute;"></div>
<script>let box = document.getElementById("box");document.onkeydown = function (event) {let speed = 10;switch (event.keyCode) {case 37:box.style.left = box.offsetLeft - speed + "px";break;case 39:box.style.left = box.offsetLeft + speed + "px";break;case 38:box.style.top = box.offsetTop - speed + "px";break;case 40:box.style.top = box.offsetTop + speed + "px";break;}}</script></body>
</html>

这是页面刚加载出来时色块的位置,此时我们可以通过方向键改变色块的位置

5.鼠标事件:

1.单击左键触发:onclick

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="box" style="overflow: auto;width: 100px;height: 100px;background-color: pink;"></div>
<script>let box = document.getElementById("box");box.onclick = function () {console.log("单击事件触发");}</script>
</body>
</html>

在元素区域(色块)内,单机鼠标左键,触发该事件

2.双击触发:ondblclick

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="box" style="overflow: auto;width: 100px;height: 100px;background-color: pink;"></div>
<script>let box = document.getElementById("box");box.ondblclick = function () {console.log("双击事件触发");}</script>
</body>
</html>

双击元素区域,触发该事件

3.鼠标任意按键按下或松开时触发:onmousedown/onmouseup

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="box" style="overflow: auto;width: 100px;height: 100px;background-color: pink;"></div>
<script>let box = document.getElementById("box");box.onmousedown = function () {console.log("鼠标按钮按下时");}box.onmouseup = function () {console.log("鼠标按钮松开时");}</script>
</body>
</html>

在元素区域内按下或松开鼠标任意按键对会触发对应事件

4.鼠标指针移动时触发:onmousemove

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="box" style="overflow: auto;width: 100px;height: 100px;background-color: pink;"></div>
<script>let box = document.getElementById("box");box.onmousemove = function () {console.log("鼠标指针移动时");}</script>
</body>
</html>

当鼠标指针在元素区域内移动时,就会重复触发该事件

5.鼠标指针移入或移出时触发:

不能阻止事件冒泡:onmouseover/onmouseout
 <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="box" style="overflow: auto;width: 100px;height: 100px;background-color: pink;"></div>
<script>let box = document.getElementById("box");box.onmouseover = function () {// 不能阻止事件的冒泡console.log("鼠标指针移动到元素上时");}box.onmouseout = function () {// 不能阻止事件的冒泡console.log("鼠标指针移动出元素上时");}</script>
</body>
</html>

当指针移入元素区域或移出元素区域时,都会触发对应事件

可以阻止事件冒泡:
 <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="box" style="overflow: auto;width: 100px;height: 100px;background-color: pink;"></div>
<script>let box = document.getElementById("box");box.onmouseenter = function () {// 能阻止事件的冒泡console.log("鼠标指针移动到元素上时");}box.onmouseleave = function () {// 能阻止事件的冒泡console.log("鼠标指针移动出元素上时");}</script>
</body>
</html>

当指针移入元素区域或移出元素区域时,都会触发对应事件

6.鼠标滚轮滑动时触发:

1.有无内容都可触发(滑动滚轮):onmousewheel
 <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="box" style="overflow: auto;width: 100px;height: 100px;background-color: pink;"></div>
<script>let box = document.getElementById("box");// 有没有内容都会触发/* box.onmousewheel = function () {console.log("鼠标的滚轮滚动时")}*/</script>
</body>
</html>

在元素区域内滑动鼠标滚轮,不管元素区域内有没有内容,都会触发该事件

2.必须有内容才会触发(滑动滚动条):
 <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="box" style="overflow: auto;width: 100px;height: 100px;background-color: pink;"></div>
<script>let box = document.getElementById("box");//有内容才能触发box.onscroll = function () {console.log("滚动条滚动了")}</script>
</body>
</html>

此时元素区域内无内容,滑动鼠标滚轮不会触发该事件

 <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="box" style="overflow: auto;width: 100px;height: 100px;background-color: pink;">我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容
</div>
<script>let box = document.getElementById("box");//有内容才能触发box.onscroll = function () {console.log("滚动条滚动了")}</script>
</body>
</html>

此时元素区域内有内容,当我们滑动鼠标滚轮时会重复触发该事件

6.事件冒泡:

1.概述:

  事件冒泡 (Bubble):是指事件向上传导,当后代元素上的事件被触发时,其祖先元素的相同事件也会被触发;

2.示例:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>#div1 {width: 200px;height: 200px;background-color: pink;}#div2 {width: 100px;height: 100px;background-color: coral;}</style>
</head>
<body>
<div id="div1">我是DIV1<div id="div2">我是DIV2</div>
</div>
<script>let div1 = document.getElementById("div1");let div2 = document.getElementById("div2");div1.onclick = function () {console.log("div1 的单击事件触发了")}div2.onclick = function () {console.log("div2 的单击事件触发了")}
</script>
</body>
</html>

 在上面案例中,DIV2作为DIV1的子节点,当我们单击DIV2区域时,鼠标单击事件会向上传导到其父节点DIV1中,通过测试结果我们也可以看出当我们单击子节点div2时,不仅div2节点触发了该事件,其父节点div1节点也触发了该事件;

3.避免事件冒泡:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>#div1 {width: 200px;height: 200px;background-color: pink;}#div2 {width: 100px;height: 100px;background-color: coral;}</style>
</head>
<body>
<div id="div1">我是DIV1<div id="div2">我是DIV2</div>
</div>
<script>let div1 = document.getElementById("div1");let div2 = document.getElementById("div2");div1.onclick = function () {console.log("div1 的单击事件触发了")}div2.onclick = function () {console.log("div2 的单击事件触发了")stopBubble();}//取消事件的冒泡function stopBubble(event) {//处理浏览器兼容性问题if (event && event.stopPropagation) {event.stopPropagation()} else {window.event.cancelBubble = true;}}
</script>
</body>
</html>

此时单击div2区域,该事件不会再传导到其父节点div1中;

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

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

相关文章

【Java ee初阶】HTTP(2)

一、HTTP的方法 方法 说明 支持的HTTP协议版本 GET 获取资源 1.0、1.1 POST 传输实体主体 1.0、1.1 PUT 传输文件 1.0、1.1 HEAD 获得报文首部 1.0、1.1 DELETE 删除文件 1.0、1.1 OPTIONS 询问支持的方法 1.1 TRACE 追踪路径 1.1 CONNECT 要求用隧道…

文件名是 ‪E:\20250512_191204.mp4, EV软件录屏,未保存直接关机损坏, 如何修复?

去github上下载untrunc 工具就能修复 https://github.com/anthwlock/untrunc/releases 如果访问不了 本机的 hosts文件设置 140.82.112.3 github.com 199.232.69.194 github.global.ssl.fastly.net 就能访问了 实在不行&#xff0c;从这里下载&#xff0c;传上去了 https://do…

腾讯 CodeBuddy 杀入 AI 编程赛道,能否撼动海外工具霸主地位?

在 AI 编程助手领域&#xff0c;海外的 Cursor 等工具风头正劲&#xff0c;如今腾讯带着 CodeBuddy 隆重登场&#xff0c;国产 AI 编程助手能否借其之力崛起&#xff1f;让我们一探究竟。 官网&#xff1a; 腾讯云代码助手 CodeBuddy - AI 时代的智能编程伙伴 实战安装教程 …

PySide6 GUI 学习笔记——常用类及控件使用方法(常用类颜色常量QColorConstants)

文章目录 一、概述二、颜色常量表标准 Qt 颜色SVG 颜色&#xff08;部分&#xff09; 三、Python 代码示例四、代码说明五、版本兼容性六、延伸阅读 一、概述 QColorConstants 是 Qt for Python 提供的一个预定义颜色常量集合&#xff0c;包含标准Qt颜色和SVG规范颜色。这些常…

MATLAB 自然语言处理入门教程

文章目录 前言环境配置一、MATLAB NLP 工具箱概述二、核心功能与 API1. 文本数据准备2. 特征提取3. 文本分类&#xff08;传统机器学习&#xff09;4. 深度学习文本分类&#xff08;LSTM&#xff09; 三、实战案例&#xff1a;情感分析四、高级应用1. 命名实体识别&#xff08;…

C++ deque双端队列、deque对象创建、deque赋值操作

在deque中&#xff0c;front()是头部元素&#xff0c;back()指的是尾部元素。begin()是指向头部的迭代器&#xff0c;end()是指向尾部的下一个元素的迭代器。 push_front 头部进行插入 pop_front 尾部进行删除 push_back 尾部进行插入 pop_back 尾部进行删除 deque如果同时…

java每日精进 5.15【分页实现】

1. 什么是对象转换和数据翻译&#xff1f; 对象转换 对象转换是指将一种类型的对象&#xff08;如数据库实体 UserDO&#xff09;转换为另一种类型的对象&#xff08;如前端响应对象 UserVO 或服务层 DTO&#xff09;。例如&#xff0c;一个 UserDO 包含用户 ID、姓名和部门 …

什么是API接口?API接口的核心价值

随着互联网技术的蓬勃发展&#xff0c;API 接口作为不同应用程序之间的关键纽带&#xff0c;其重要性愈发凸显。本文将从专业视角&#xff0c;深入剖析 API 接口的分类、原理、请求方式以及安全机制等核心要素&#xff0c;助力读者全面理解这一数字化基础设施。 一、API 接口及…

Linux_ELF文件

目录 前言&#xff1a; 一、ELF文件的类型 二、ELF文件的组成格式 1. ELF头部(ELF Header) 2. 节头表(Section Header Table) 3. 程序头表(Program Header Table) 4. 节(Sections)与段(Segments) 三、ELF文件从形成到加载轮廓 1、ELF可执行文件形成过程 2、 可执行文…

Go语言语法---输入控制

文章目录 1. fmt包读取输入1.1. 读取单个值1.2. 读取多个值 2. 格式化输入控制 在Go语言中&#xff0c;控制输入主要涉及从标准输入(键盘)或文件等来源读取数据。以下是几种常见的输入控制方法&#xff1a; 1. fmt包读取输入 fmt包中的Scan和Scanln函数都可以读取输入&#xf…

【PostgreSQL数据分析实战:从数据清洗到可视化全流程】附录-C. 常用SQL脚本模板

👉 点击关注不迷路 👉 点击关注不迷路 👉 点击关注不迷路 文章大纲 附录C. 常用SQL脚本模板速查表一、数据清洗与预处理模板二、数据聚合与分析模板三、窗口函数应用模板四、性能优化与监控模板五、数据备份与恢复模板六、权限管理与安全模板七、事务与错误处理模板八、时…

51单片机课设基于GM65模块的二维码加条形码识别

系统组成 主控单元&#xff1a;51单片机&#xff08;如STC89C52&#xff09;作为核心控制器&#xff0c;协调各模块工作。 扫描模块&#xff1a;GM65条码扫描头&#xff0c;支持二维码/条形码识别&#xff0c;通过串口&#xff08;UART&#xff09;与单片机通信。 显示模块&a…

【OpenGL学习】(二)OpenGL渲染简单图形

文章目录 【OpenGL学习】&#xff08;二&#xff09;OpenGL渲染简单图形OpenGL渲染图形流程顶点&#xff0c;图元和片元VAO&#xff0c;VBO &#xff0c;EBO着色器示例&#xff1a;使用OpenGL渲染三角形 【OpenGL学习】&#xff08;二&#xff09;OpenGL渲染简单图形 OpenGL渲…

基于STM32的INA226电压电流检测仪

系统总体框图 功率检测装置原理图功能及模块连接说明 一、系统功能概述 该装置以STM32F103C8T6微控制器为核心&#xff0c;集成功率检测、数据交互、状态显示和用户提示功能&#xff0c;通过模块化设计实现稳定运行。 二、各模块功能及连接方式 按键模块 功能&#xff1a…

YOLOv2目标检测算法:速度与精度的平衡之道

一、YOLOv2的核心改进&#xff1a;从V1到V2的蜕变 YOLOv2作为YOLO系列的第二代算法&#xff0c;在继承V1端到端、单阶段检测的基础上&#xff0c;针对V1存在的小目标检测弱、定位精度低等问题进行了全方位升级&#xff0c;成为目标检测领域的重要里程碑。 &#xff08;一&am…

将嵌入映射到 Elasticsearch 字段类型:semantic_text、dense_vector、sparse_vector

作者&#xff1a; Andre Luiz 讨论如何以及何时使用 semantic_text、dense_vector 或 sparse_vector&#xff0c;以及它们与嵌入生成的关系。 通过这个自定进度的 Search AI 实践学习亲自体验向量搜索。你可以开始免费云试用&#xff0c;或者在本地机器上尝试 Elastic。 多年来…

uniapp取消浏览自动填充

为了防止浏览器自动将记住的密码回填进type"password"输入框&#xff0c;所以在type"password"输入框上面加了两行代码&#xff0c;使浏览器将密码填充到新加的输入框里&#xff0c;并将这两个input隐藏掉 <input type"password" autocomple…

从数据包到可靠性:UDP/TCP协议的工作原理分析

之前我们已经使用udp/tcp的相关接口写了一些简单的客户端与服务端代码。也了解了协议是什么&#xff0c;包括自定义协议和知名协议比如http/https和ssh等。现在我们再回到传输层&#xff0c;对udp和tcp这两传输层巨头协议做更深一步的分析。 一.UDP UDP相关内容很简单&#xf…

显卡、Cuda和pytorch兼容问题

这里写目录标题 驱动与CUDA版本兼容性问题1. **驱动与CUDA版本兼容性问题**2. **任务特性与硬件适配差异**3. **优化策略与框架配置差异**4. **散热与功耗限制**5. **数据传输与CPU瓶颈**排查建议总结 查询PyTorch中实际使用的CUDA版本**1. 查询PyTorch中实际使用的CUDA版本***…

DeepSeek 大模型部署全指南:常见问题、优化策略与实战解决方案

DeepSeek 作为当前最热门的开源大模型之一&#xff0c;其强大的语义理解和生成能力吸引了大量开发者和企业关注。然而在实际部署过程中&#xff0c;无论是本地运行还是云端服务&#xff0c;用户往往会遇到各种技术挑战。本文将全面剖析 DeepSeek 部署中的常见问题&#xff0c;提…