[前端开发] 常见的 HTML CSS JavaScript 事件
- 代码示例指路 常见的 HTML、CSS、JavaScript 事件代码示例
常见的 HTML CSS JavaScript 事件
- 事件
- HTML 事件
- 鼠标事件
- 键盘事件
- 表单事件
- JavaScript 事件对象
- 事件代理(事件委托)
事件
在 Web 开发中,事件是用户与网页交互的重要方式之一。通过事件,用户可以与页面元素进行交互,触发相应的功能或效果。本文将介绍常见的 HTML、CSS、JavaScript 事件,以及事件对象和事件代理的概念。
HTML 事件
鼠标事件
鼠标事件是用户通过鼠标与页面元素交互时触发的事件。常见的鼠标事件包括:
click: 单击鼠标时触发。dblclick: 在同一元素双击鼠标时触发。mousedown: 按下鼠标键时触发。mouseup: 释放按下的鼠标键时触发。mousemove: 当鼠标在节点内部移动时触发,持续移动时会连续触发。mouseenter: 鼠标进入一个节点时触发,进入子节点不会触发。mouseleave: 鼠标离开一个节点时触发,离开父节点不会触发。mouseover: 鼠标进入一个节点时触发,进入子节点会再次触发。mouseout: 鼠标离开一个节点时触发,离开父节点也会触发。wheel: 滚动鼠标时触发。
键盘事件
键盘事件是用户通过键盘与页面元素交互时触发的事件。常见的键盘事件包括:
keydown: 按下键盘时触发。keypress: 按下有值的键触发(数字、字母等)。keyup: 松开键盘时触发。
表单事件
表单事件是用户在表单元素中输入时触发的事件。常见的表单事件包括:
input: 当表单元素的值发生改变时触发。select: 当在输入框中选中文本时触发。change: 当表单元素的值发生改变时触发,但与input不同的是不会连续触发,而是在全部修改完后触发。reset: 当表单重置时触发,即所有表单成员变回默认值。submit: 当表单数据向服务器提交时触发。
JavaScript 事件对象
事件发生后,会产生一个事件对象作为参数传给监听函数。事件对象常见的属性包括:
Event.target: 返回事件当前所在的节点。Event.type: 返回一个字符串,表示事件的类型。Event.preventDefault(): 取消浏览器对当前事件的默认行为。Event.stopPropagation(): 阻止事件在 DOM 中继续传播。
事件代理(事件委托)
事件代理是一种将事件处理程序添加到一个父元素上,以处理其子元素的事件的技术。通过事件代理,可以实现更高效的事件管理,减少事件处理程序的数量。常用于列表或表格等动态内容的处理。
<ul id="list"><li>列表1</li><li>列表2</li><li>列表3</li><li>列表4</li><li>列表5</li>
</ul><script>var list = document.getElementById("list");list.addEventListener("click", function(e) {if (e.target.tagName === "LI") {console.log("点击了 li 标签");console.log(e.target.innerHTML);}});
</script>
通过事件代理,我们可以在父元素上监听子元素的事件,从而简化代码并提高性能。
在 Web 开发中,事件是实现交互的关键,理解事件相关知识将有助于更好地处理用户与网页之间的交互行为。
相关文章:
[前端开发] 常见的 HTML CSS JavaScript 事件
代码示例指路 常见的 HTML、CSS、JavaScript 事件代码示例 常见的 HTML CSS JavaScript 事件 事件HTML 事件鼠标事件键盘事件表单事件 JavaScript 事件对象事件代理(事件委托) 事件 在 Web 开发中,事件是用户与网页交互的重要方式之一。通过…...
H5/CSS 笔试面试考题(71-80)
简述哪种输入类型用于定义周和年控件(无时区)( ) A:date B:week C:year 面试通过率:67.0% 推荐指数: ★★★★★ 试题难度: 初级 试题类型: 选择题 答案:b 简述下列哪个元素表示外部资源?该元素可以被视为图像、嵌套的浏览上下文或插件要处理的资源。它包括各种属性…...
【Node.js】path 模块进行路径处理
Node.js 执行 JS 代码时,代码中的路径都是以终端所在文件夹出发查找相对路径,而不是以我们认为的从代码本身出发,会遇到问题,所以在 Node.js 要执行的代码中,访问其他文件,建议使用绝对路径 实例࿱…...
react+ts【项目实战一】配置项目/路由/redux
文章目录 1、项目搭建1、创建项目1.2 配置项目1.2.1 更换icon1.2.2 更换项目名称1.2.1 配置项目别名 1.3 代码规范1.3.1 集成editorconfig配置1.3.2 使用prettier工具 1.4 项目结构1.5 对css进行重置1.6 注入router1.7 定义TS组件的规范1.8 创建代码片段1.9 二级路由和懒加载1.…...
英文论文(sci)解读复现【NO.20】TPH-YOLOv5++:增强捕获无人机的目标检测跨层不对称变压器的场景
此前出了目标检测算法改进专栏,但是对于应用于什么场景,需要什么改进方法对应与自己的应用场景有效果,并且多少改进点能发什么水平的文章,为解决大家的困惑,此系列文章旨在给大家解读发表高水平学术期刊中的 SCI论文&a…...
第十五章 以编程方式使用 SQL 网关 - %SQLGatewayConnection 方法和属性
文章目录 第十五章 以编程方式使用 SQL 网关 - %SQLGatewayConnection 方法和属性FetchRows()GatewayStatus propertyGatewayStatusGet()GetConnection()GetGTWVersion()GetLastSQLCode() 第十五章 以编程方式使用 SQL 网关 - %SQLGatewayConnection 方法和属性 FetchRows() …...
【QTableView】
QTableView是Qt框架中用于显示表格形式数据的部件,通常用于显示数据库查询结果、数据集以及其他类似的结构化数据。 以下是一个使用QTableView的简单示例,假设我们有一个数据库表存储了学生的信息,我们可以使用QSqlTableModel将数据库表关联到QTableView上,并显示出来: …...
VS-Code-C#配置
C#开发环境配置 查看更多学习笔记:GitHub:LoveEmiliaForever 1. 安装 .NET SDK 官方下载网址按照安装程序指引安装即可 2. VS Code 安装插件 插件名:C#发布者是Microsoft 该插件是基础语法插件 插件名:C# Dev Kit发布者是Mic…...
第七篇【传奇开心果系列】Python微项目技术点案例示例:数据可视化界面图形化经典案例
传奇开心果微博系列 系列微博目录Python微项目技术点案例示例系列 微博目录一、微项目开发背景和项目目标:二、雏形示例代码三、扩展思路介绍四、数据输入示例代码五、数据分析示例代码六、排名统计示例代码七、数据导入导出示例代码八、主题定制示例代码九、数据过…...
LeetCode 第33天 | 1005. K 次取反后最大化的数组和 135. 分发糖果 134. 加油站
1005. K 次取反后最大化的数组和 按照绝对值大小降序排序,然后将负值变正,如果所有负值都正了,但是还有k余量且为奇数,那就将绝对值最小值(最后一个元素)取反,否则直接结束。 class Solution {…...
PointMixer论文阅读笔记
MLP-mixer是最近很流行的一种网络结构,比起Transformer和CNN的节构笨重,MLP-mixer不仅节构简单,而且在图像识别方面表现优异。但是MLP-mixer在点云识别方面表现欠佳,PointMixer就是在保留了MLP-mixer优点的同时,还可以…...
[word] word分割线在哪里设置 #其他#经验分享
word分割线在哪里设置 在工作中有些技巧,可以快速提高工作效率,解决大部分工作,今天给大家分享word分割线在哪里设置的小技能,希望可以帮助到你。 1、快速输入分割线 输入三个【_】按下回车就是一条长直线,同样分别…...
C++ 音视频原理
本篇文章我们来描述一下音视频原理 音视频录制原理: 下面是对这张思维导图的介绍 摄像头部分: 麦克风采集声音 摄像头采集画面 摄像头采集回来的数据可以用RGB也可以用YUV来表示 图像帧帧率 一秒能处理多少张图像 图像处理 :调亮度 图像帧队列 :意思是将数据取…...
C# 只允许开启一个exe程序
C# 只允许开启一个exe程序 第一种方法 电脑只能启动一次再次点击显示当前exe程序 using System; using System.Collections.Generic; using System.Diagnostics; using System.Linq; using System.Runtime.InteropServices; using System.Threading.Tasks; using System.Win…...
【Java程序员面试专栏 分布式中间件】Redis 核心面试指引
关于Redis部分的核心知识进行一网打尽,包括Redis的基本概念,基本架构,工作流程,存储机制等,通过一篇文章串联面试重点,并且帮助加强日常基础知识的理解,全局思维导图如下所示 基础概念 明确redis的特性、应用场景和数据结构 什么是Redis,Redis有哪些应用场景 Redi…...
2024年【高处安装、维护、拆除】模拟考试题库及高处安装、维护、拆除实操考试视频
题库来源:安全生产模拟考试一点通公众号小程序 高处安装、维护、拆除模拟考试题库是安全生产模拟考试一点通生成的,高处安装、维护、拆除证模拟考试题库是根据高处安装、维护、拆除最新版教材汇编出高处安装、维护、拆除仿真模拟考试。2024年【高处安装…...
【QT+QGIS跨平台编译】之三十七:【Shapelib+Qt跨平台编译】(一套代码、一套框架,跨平台编译)
文章目录 一、Shapelib介绍二、Shapelib下载三、文件分析四、pro文件五、编译实践一、Shapelib介绍 Shapelib是一个开源的C库,用于读取、写入和操作ESRI Shapefile格式的地理矢量数据。 ESRI Shapefile是一种常见的地理信息系统(GIS)文件格式,用于存储地理矢量数据,包括…...
【机器学习基础】决策树(Decision Tree)
🚀个人主页:为梦而生~ 关注我一起学习吧! 💡专栏:机器学习 欢迎订阅!后面的内容会越来越有意思~ ⭐特别提醒:针对机器学习,特别开始专栏:机器学习python实战 欢迎订阅&am…...
图神经网络DGL框架,graph classification,多个且不同维度的node feature 训练
node feature 维度不同 我现在有许多不同的图要加入训练,每个图的节点特征维度不同,第一张图n_weight特征有10条数据,第二张图n_weight特征有15条数据,但是训练的时候,需要维度都对其,所以直接做0 padding…...
蓝桥杯(Web大学组)2022国赛真题:用什么来做计算 A
判分标准 实现重置(AC)功能,得 1 分。 实现计算式子和结果显示功能,得 3 分。 实现计算功能,得 6 分。 应该按要求来就行吧,,一开始还在想是否要考虑小数点个数的问题还有式子是否有效…… 笔记…...
高频面试之3Zookeeper
高频面试之3Zookeeper 文章目录 高频面试之3Zookeeper3.1 常用命令3.2 选举机制3.3 Zookeeper符合法则中哪两个?3.4 Zookeeper脑裂3.5 Zookeeper用来干嘛了 3.1 常用命令 ls、get、create、delete、deleteall3.2 选举机制 半数机制(过半机制࿰…...
智能在线客服平台:数字化时代企业连接用户的 AI 中枢
随着互联网技术的飞速发展,消费者期望能够随时随地与企业进行交流。在线客服平台作为连接企业与客户的重要桥梁,不仅优化了客户体验,还提升了企业的服务效率和市场竞争力。本文将探讨在线客服平台的重要性、技术进展、实际应用,并…...
苍穹外卖--缓存菜品
1.问题说明 用户端小程序展示的菜品数据都是通过查询数据库获得,如果用户端访问量比较大,数据库访问压力随之增大 2.实现思路 通过Redis来缓存菜品数据,减少数据库查询操作。 缓存逻辑分析: ①每个分类下的菜品保持一份缓存数据…...
vue3 定时器-定义全局方法 vue+ts
1.创建ts文件 路径:src/utils/timer.ts 完整代码: import { onUnmounted } from vuetype TimerCallback (...args: any[]) > voidexport function useGlobalTimer() {const timers: Map<number, NodeJS.Timeout> new Map()// 创建定时器con…...
【HTML-16】深入理解HTML中的块元素与行内元素
HTML元素根据其显示特性可以分为两大类:块元素(Block-level Elements)和行内元素(Inline Elements)。理解这两者的区别对于构建良好的网页布局至关重要。本文将全面解析这两种元素的特性、区别以及实际应用场景。 1. 块元素(Block-level Elements) 1.1 基本特性 …...
k8s业务程序联调工具-KtConnect
概述 原理 工具作用是建立了一个从本地到集群的单向VPN,根据VPN原理,打通两个内网必然需要借助一个公共中继节点,ktconnect工具巧妙的利用k8s原生的portforward能力,简化了建立连接的过程,apiserver间接起到了中继节…...
C# 求圆面积的程序(Program to find area of a circle)
给定半径r,求圆的面积。圆的面积应精确到小数点后5位。 例子: 输入:r 5 输出:78.53982 解释:由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982,因为我们只保留小数点后 5 位数字。 输…...
mac 安装homebrew (nvm 及git)
mac 安装nvm 及git 万恶之源 mac 安装这些东西离不开Xcode。及homebrew 一、先说安装git步骤 通用: 方法一:使用 Homebrew 安装 Git(推荐) 步骤如下:打开终端(Terminal.app) 1.安装 Homebrew…...
Linux系统部署KES
1、安装准备 1.版本说明V008R006C009B0014 V008:是version产品的大版本。 R006:是release产品特性版本。 C009:是通用版 B0014:是build开发过程中的构建版本2.硬件要求 #安全版和企业版 内存:1GB 以上 硬盘…...
LCTF液晶可调谐滤波器在多光谱相机捕捉无人机目标检测中的作用
中达瑞和自2005年成立以来,一直在光谱成像领域深度钻研和发展,始终致力于研发高性能、高可靠性的光谱成像相机,为科研院校提供更优的产品和服务。在《低空背景下无人机目标的光谱特征研究及目标检测应用》这篇论文中提到中达瑞和 LCTF 作为多…...
