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

JavaScript小记——事件

news 2025/9/18 22:59:16

HTML 事件是发生在 HTML 元素上的事情。

当在 HTML 页面中使用 JavaScript 时， JavaScript 可以触发这些事件。

Html事件

HTML 事件可以是浏览器行为，也可以是用户行为。

以下是 HTML 事件的实例：

  • HTML 页面完成加载
  • HTML input 字段改变时
  • HTML 按钮被点击

通常，当事件发生时，你可以做些事情。

在事件触发时 JavaScript 可以执行一些代码。

事件绑定的方式

方式1：直接把事件绑定在HTML元素上

<button onclick="show('hello')">一个按钮</button>function show(str) {alert("点击事件执行了"+str);}

方式2：使用代码来绑定事件

<body><ul><li class="aa">01</li><li class="aa">02</li><li class="aa">03</li><li class="aa">04</li><li class="aa">05</li></ul></body><script>let a = document.getElementsByClassName("aa");a[0].onclick = function() {alert("第一个执行了");}</script>

方式3：绑定事件

 <input type="button" value="我的按钮" id="btn">let btn = document.getElementById("btn");var fun=function() {alert("按钮被点击了");}btn.addEventListener('click', fun);

事件解绑

<button id="btn">一个按钮</button>var b=function() {alert("222222")
}
btn.addEventListener("click",b)btn.removeEventListener("click",b);

常见的Html事件

焦点事件

针对表单项

onfocus  获取焦点

onblur     失去焦点

oninput      表单中内容发生变化时就触发

<body><input type="text" name="username" value="请输入用户名" onfocus="show1()"  oninput="show3()"><span id="sp"></span></body><script>function show1() {document.getElementsByName("username")[0].value=""; //获取焦点时 输入框变为空}function show3() {console.log("边输入边校验");let input = document.getElementsByName("username")[0];let content = input.value;let regx=/^[a-z]{6,16}$/i;let flag = regx.test(content);let sp = document.getElementById("sp");if(flag){input.style.border = "2px solid green";sp.innerHTML = "<b style='color: green'>格式正确</b>";}else {input.style.border = "2px solid red";sp.innerHTML = "<b style='color: red'>格式错误</b>";}}</script>

键盘事件

* onkeydown 某个键盘按键被按下。不区分键码的大小写

* onkeypress 某个键盘按键被按下并松开。区分键码的大小写 a 97  A 65

* onkeyup 某个键盘按键被松开。

<body><input type="text" onkeypress="show()"></body><script>function show() {let code = event.keyCode;if(code===97||code===65){console.log("往前跑");}console.log("按键按下了："+code)}</script>

鼠标事件

onmousedown  鼠标按下

onmouseup   鼠标松开

onmouseover    鼠标移上

onmouseout    鼠标移开

onmousemove   鼠标移动

<body><button id="btn" onmousedown="down()" onmouseup="up()" onmouseover="over()" onmouseout="out()" onmousemove="move()">一个按钮</button><div id="a"></div></body><script>function down() {//which 也可以获取鼠标的按键编号 1 左键  2滚轮   3右键// button 也可以获取鼠标的按键编号 0 左键  1滚轮   2右键let code = event.which;alert("鼠标按下了"+code);}function over() {document.getElementById("btn").style.backgroundColor = "red";}function out(){document.getElementById("btn").style.backgroundColor = "green";}let div = document.getElementById("a");var w = div.getBoundingClientRect().width;var h = div.getBoundingClientRect().height;div.onmousemove=function() {div.style.width = (w++)+"px";div.style.height = (h++) + "px";}</script>

表单事件

<body><form action="123.html" method="get" id="form" onsubmit="set()">用户名:<input type="text" name="username" placeholder="请输入6-16位字母" onblur="checkUsername()"><span id="a"></span><br>密码:<input type="password" name="password" placeholder="请输入密码" onblur="checkPassword()"><span id="b"></span><br><br><input type="submit" value="注册"><input type="reset" value="重置"></form></body><script>let myForm = document.getElementById("form");myForm.onsubmit=function() {return checkUsername&&checkPassword();}function checkUsername(){let input = document.getElementsByName("username")[0];var content= input.value;var regx=/^[a-z]{6,16}$/i;var flag=regx.test(content);let sp = document.getElementById("a");if (flag){//alert("格式正确")input.style.border="2px solid green";sp.innerHTML="<b style='color:green'>格式正确</b>";}else{//alert("格式不正确")input.style.border="2px solid red";sp.innerHTML="<b style='color:red'>格式错误</b>";}return flag;}function checkPassword(){let input = document.getElementsByName("password")[0];var content= input.value;var regx=/^[0-9]{6,16}$/;var flag=regx.test(content);let sp = document.getElementById("b");if (flag){//alert("格式正确")input.style.border="2px solid green";sp.innerHTML="<b style='color:green'>格式正确</b>";}else{//alert("格式不正确")input.style.border="2px solid red";sp.innerHTML="<b style='color:red'>格式错误</b>";}return flag;}function rest(){alert("表单重置");}</script>

其他事件

<script>//onload 等页面中的所有元素，加载完毕之后，回去执行window.onload = function () {let div = document.getElementById("d1");alert(div);}</script></head><body><div id="d1"></div></body>

下拉框、单选框、多选框事件

<body><input type="text" placeholder="默认值文字" onselect="show()"><select name="" id="" onchange="show()"><option value="">请选择学历</option><option value="">小学</option><option value="">中学</option><option value="">大学</option></select><input type="radio" name="sex" id="" onchange="show()">男<input type="radio" name="sex" id="" onchange="show()">女<input type="checkbox" name="hobby" id="" onchange="show()">音乐<input type="checkbox" name="hobby" id="" onchange="show()">踢球</body><script>function show() {alert("选择了")}document.oncontextmenu=function() {return false;}document.body.oncopy=function() {return false;}</script>

事件对象

currentTarget:   获取的是绑定了该事件的元素对象

 target :  获取的是触发了该事件的元素对象 

type: 获取事件类型

 keyCode 当绑定了键盘事件，可以从事件对象中获取按键的键码（ASCII码）

which/button  当绑定了鼠标事件，可以从事件对象中获取鼠标按键的键码 0 左键 1滚轮 2右键

事件冒泡

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>#a{width: 300px;height: 300px;background: red;}#b{width: 200px;height: 200px;background: yellow;}#c{width: 100px;height: 100px;background: blue;}</style></head><body><div id="a" onclick="a()"><div id="b" onclick="b()"><div id="c" onclick="c()"></div></div></div></body><script>function a() {event.stopPropagation(); //阻止冒泡alert("a");}function b() {event.stopPropagation();//阻止冒泡alert("b");}function c() {event.stopPropagation();//阻止冒泡alert("c");}</script>
</html>

阻止元素的默认行为

e.preventDefault();

相关文章：

JavaScript小记——事件

HTML 事件是发生在 HTML 元素上的事情。 当在 HTML 页面中使用 JavaScript 时&#xff0c; JavaScript 可以触发这些事件。 Html事件 HTML 事件可以是浏览器行为&#xff0c;也可以是用户行为。 以下是 HTML 事件的实例&#xff1a; HTML 页面完成加载HTML input 字段改变…...

编程日记 2023/4/23 16:02:59

Windows逆向安全（一）之基础知识（八）

if else嵌套 这次来研究if else嵌套在汇编中的表现形式&#xff0c;本次以获取三个数中最大的数这个函数为例子&#xff0c;分析if else的汇编形式 求三个数中的最大值 首先贴上代码&#xff1a; #include "stdafx.h"int result0; int getMax(int i,int j,int k)…...

编程日记 2023/4/23 15:57:57

PyCharm+PyQt5+pyinstaller打包labelImg.exe

0 开头 labelImg是一款标注软件&#xff0c;作为一个开源项目&#xff0c;它的源码可以在github上找到。官方仓库地址为&#xff1a; https://github.com/heartexlabs/labelImg 小白安装时的最新版本编译出来的界面长这样&#xff1a; 之前在小白的博客里&#xff0c;也教过…...

编程日记 2023/4/23 15:52:56

JavaScript里实现继承的几种方式

JavaScript 中的继承可以通过以下几种方式来实现&#xff1a; 1、原型链继承&#xff1a;通过将子类的原型对象指向父类的实例来实现继承。这种方式的优点是实现简单&#xff0c;缺点是父类的私有属性和方法子类是不能访问的。 function Parent() {this.name parent;this.ag…...

编程日记 2023/4/23 15:47:55

前端:运用HTML+CSS+JavaScript实现迷宫游戏

最近感到挺无聊的，于是想到了大学期间关于栈的应用知识，于是就写了这篇博客！ 运用HTML+CSS+JavaScript实现迷宫游戏 1. 运行结果2. 实现思路3. 参考代码1. 运行结果 前端:做个迷宫玩玩，不会迷路吧！ 2. 实现思路 如果有一个迷宫，有入口，也有出口，那么怎样找到从入口到出…...

编程日记 2023/5/31 14:11:13

NoSQL数据库简介

NoSQL代表“不仅是SQL”&#xff0c;指的是一种数据库管理系统&#xff0c;旨在处理大量非结构化和半结构化数据。与使用具有预定义架构的表格格式的传统SQL数据库不同&#xff0c;NoSQL数据库是无模式的&#xff0c;并且允许灵活和动态的数据结构。 NoSQL数据库是必需的&…...

编程日记 2023/4/23 15:37:50

面试马铭泽

为什么报考这个岗位 首先&#xff0c;我对军人从小有崇敬之情&#xff0c;梦想着穿着庄严的军装&#xff0c;更对祖国有强烈的热爱之心。我的大舅是一名现役军人&#xff0c;老舅也曾服过兵役&#xff0c;从他们的谈吐以及教育中&#xff0c;让我对部队一直充满向往之情&#…...

编程日记 2023/4/23 15:32:49

查看AWS S3的目录

要查看AWS S3存储桶&#xff08;Bucket&#xff09;的目录&#xff0c;您可以通过AWS管理控制台或AWS CLI&#xff08;命令行界面&#xff09;来实现。 在AWS管理控制台中查看&#xff1a; 登录AWS管理控制台。选择S3服务。在S3存储桶列表中选择要查看的存储桶。在对象列表中…...

编程日记 2023/4/23 15:27:46

分布式系统概念和设计-操作系统中的支持和设计

分布式系统概念和设计 操作系统支持 中间件和底层操作系统的关系&#xff0c;操作系统如何满足中间件需求。 中间件需求:访问物理资源的效率和健壮性&#xff0c;多种资源管理策略的灵活性。 任何一个操作系统的目标都是提供一个在物理层&#xff08;处理器&#xff0c;内存&a…...

编程日记 2023/4/23 15:22:45

【redis】bitmap、hyperloglog、GEO案例

【redis】bitmap、hyperloglog、GEO案例 文章目录 【redis】bitmap、hyperloglog、GEO案例前言一、面试题二、统计的类型聚合统计排序统计问题&#xff1a;思路 二值统计 0和1基数统计 三、hyperloglog1、名词理解UV 独立访客PV 页面浏览量DAU 日活跃用户MAU 月活跃度 2、看需求…...

编程日记 2023/4/23 15:17:43

第二章：集合与区间

1.集合 1.内容概述 1.了解集合的意义2.了解常见集合符号的含义3.云用常见的集合符号来表示集合之间的关系、元素与集合之间的关系2.基本概念 1.集合：把一些确定的对象看成一个整体就形成了一个集合。集合一般使用大写字母A、B、C…来表示2.元素：集合中每一个对象叫做这个集合…...

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

Mysql8.0版本安装

一，使用yum方式安装 1，配置mysql安装源： sudo rpm -Uvh https://dev.mysql.com/get/mysql80-community-release-el7-3.noarch.rpm2，安装mysql8.0： sudo yum --enablerepo=mysql80-community inst...

编程日记 2023/5/31 1:08:21

开放式耳机真的比封闭式强很多吗？推荐几款主流的开放式耳机

​开放式耳机&#xff0c;顾名思义&#xff0c;就是通过骨头振动来传导声音的耳机。相比于传统耳机&#xff0c;它的声音传输更加开放&#xff0c;不会对耳膜造成压迫感&#xff0c;也不会对耳膜旁的内毛细胞造成损害。因此开放式耳机既是运动蓝牙耳机&#xff0c;又是音乐蓝牙…...

编程日记 2023/4/23 14:57:37

Doris（7）：数据导入（Load）之Routine Load

例行导入功能为用户提供了义中自动从指定数据源进行数据导入的功能 1 适用场景 当前仅支持kafka系统进行例行导入。 2 使用限制 支持无认证的 Kafka 访问&#xff0c;以及通过 SSL 方式认证的 Kafka 集群。支持的消息格式为 csv 文本格式。每一个 message 为一行&#xff0c;…...

编程日记 2023/4/23 14:52:36

linux 安装php8.1 ZipArchive和libzip最新版扩展安装

1、概述 安装前咱们先看下我本地环境 [rootelk php8]# cat /etc/redhat-release Red Hat Enterprise Linux Server release 7.9 (Maipo) [rootelk php8]# [rootelk php8]# ./bin/php -v PHP 8.1.18 (cli) (built: Apr 17 2023 13:15:17) (NTS) Copyright (c) The PHP Group Z…...

编程日记 2023/4/23 14:47:34

大数据 | 实验一：大数据系统基本实验 | 熟悉常用的HBase操作

文章目录 &#x1f4da;HBase安装&#x1f407;安装HBase&#x1f407;伪分布式模式配置&#x1f407;测试运行HBase&#x1f407;HBase java API编程环境配置 &#x1f4da;实验目的&#x1f4da;实验平台&#x1f4da;实验内容&#x1f407;HBase Shell 编程命令实现以下指定…...

编程日记 2023/4/23 14:42:33

Linux command(split)

原理 在split.c中&#xff0c;首先处理传递给split命令的参数&#xff0c;包括需要拆分的文件、拆分大小/行数等选项。然后&#xff0c;通过调用open()函数打开需要拆分的文件&#xff0c;并获取文件信息。接着根据选项计算每个拆分文件的大小/行数&#xff0c;并根据需要创建输…...

编程日记 2023/4/23 14:37:32

开放式耳机好用吗，盘点几款口碑不错的开放式耳机

​开放式耳机作为一种全新的耳机形态&#xff0c;已经成为了当前市场上非常火爆的一款产品。由于无需入耳佩戴&#xff0c;可以很好的避免了耳膜受到损伤&#xff0c;而且也能够让我们在佩戴眼镜时也能够正常使用。加上开放式耳机的音质和舒适度都要优于其他类型的耳机&#xf…...

编程日记 2023/4/23 14:32:30

法规标准-ISO 16787标准解读

ISO 16787是做什么的&#xff1f; ISO 16787全称为智能运输系统-辅助泊车系统&#xff08;APS&#xff09;-性能要求和测试程序&#xff0c;其中主要描述了对APS系统的功能要求及测试规范 APS类型 根据目标停车位类型将APS系统分为两类&#xff1a; 1&#xff09;APS类型I&a…...

编程日记 2023/4/23 14:27:29

脑力劳动-英文单词

标题 前言必学场景词汇及用法会议简报电话出差市场调研广告与媒介电脑情境常用单词会议简报电话市场调研广告与媒介电脑前言 加油 必学场景词汇及用法 会议 1meeting [ˈmitɪŋ] n．会议hold / have / call off a meeting举办/取消会议be in a meeting在开会The meeting w…...

编程日记 2023/4/23 14:22:28

利用ngx_stream_return_module构建简易 TCP/UDP 响应网关

一、模块概述 ngx_stream_return_module 提供了一个极简的指令&#xff1a; return <value>;在收到客户端连接后&#xff0c;立即将 <value> 写回并关闭连接。<value> 支持内嵌文本和内置变量&#xff08;如 $time_iso8601、$remote_addr 等&#xff09;&a…...

编程新知 2025/8/11 21:08:14

遍历 Map 类型集合的方法汇总

1 方法一 先用方法 keySet() 获取集合中的所有键。再通过 gey(key) 方法用对应键获取值 import java.util.HashMap; import java.util.Set;public class Test {public static void main(String[] args) {HashMap hashMap new HashMap();hashMap.put("语文",99);has…...

编程新知 2025/9/18 12:57:25

visual studio 2022更改主题为深色

visual studio 2022更改主题为深色 点击visual studio 上方的 工具-> 选项 在选项窗口中&#xff0c;选择 环境 -> 常规 &#xff0c;将其中的颜色主题改成深色 点击确定&#xff0c;更改完成...

编程新知 2025/9/18 12:56:38

java调用dll出现unsatisfiedLinkError以及JNA和JNI的区别

UnsatisfiedLinkError 在对接硬件设备中&#xff0c;我们会遇到使用 java 调用 dll文件 的情况&#xff0c;此时大概率出现UnsatisfiedLinkError链接错误&#xff0c;原因可能有如下几种 类名错误包名错误方法名参数错误使用 JNI 协议调用&#xff0c;结果 dll 未实现 JNI 协…...

编程新知 2025/8/21 6:35:28

深入理解JavaScript设计模式之单例模式

目录 什么是单例模式为什么需要单例模式常见应用场景包括 单例模式实现透明单例模式实现不透明单例模式用代理实现单例模式javaScript中的单例模式使用命名空间使用闭包封装私有变量 惰性单例通用的惰性单例 结语 什么是单例模式 单例模式&#xff08;Singleton Pattern&#…...

编程新知 2025/9/11 12:54:47

【CSS position 属性】static、relative、fixed、absolute 、sticky详细介绍，多层嵌套定位示例

文章目录 ★ position 的五种类型及基本用法 ★ 一、position 属性概述 二、position 的五种类型详解（初学者版） 1. static（默认值） 2. relative（相对定位） 3. absolute（绝对定位） 4. fixed（固定定位） 5. sticky（粘性定位） 三、定位元素的层级关系（z-i…...

编程新知 2025/9/18 18:12:17

解决本地部署 SmolVLM2 大语言模型运行 flash-attn 报错

出现的问题 安装 flash-attn 会一直卡在 build 那一步或者运行报错 解决办法 是因为你安装的 flash-attn 版本没有对应上&#xff0c;所以报错&#xff0c;到 https://github.com/Dao-AILab/flash-attention/releases 下载对应版本&#xff0c;cu、torch、cp 的版本一定要对…...

编程新知 2025/7/15 0:42:05

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

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

编程新知 2025/8/15 2:04:44

Spring Boot+Neo4j知识图谱实战：3步搭建智能关系网络！

一、引言 在数据驱动的背景下&#xff0c;知识图谱凭借其高效的信息组织能力&#xff0c;正逐步成为各行业应用的关键技术。本文聚焦 Spring Boot与Neo4j图数据库的技术结合&#xff0c;探讨知识图谱开发的实现细节&#xff0c;帮助读者掌握该技术栈在实际项目中的落地方法。 …...

编程新知 2025/9/17 21:39:04

BCS 2025｜百度副总裁陈洋：智能体在安全领域的应用实践

6月5日&#xff0c;2025全球数字经济大会数字安全主论坛暨北京网络安全大会在国家会议中心隆重开幕。百度副总裁陈洋受邀出席&#xff0c;并作《智能体在安全领域的应用实践》主题演讲&#xff0c;分享了在智能体在安全领域的突破性实践。他指出&#xff0c;百度通过将安全能力…...

编程新知 2025/8/26 15:36:54