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

JavaScript小记——事件

news 2026/2/9 12:23:42

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 时， JavaScript 可以触发这些事件。 Html事件 HTML 事件可以是浏览器行为，也可以是用户行为。以下是 HTML 事件的实例： HTML 页面完成加载HTML input 字段改变…...

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

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

if else嵌套这次来研究if else嵌套在汇编中的表现形式，本次以获取三个数中最大的数这个函数为例子，分析if else的汇编形式求三个数中的最大值首先贴上代码： #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是一款标注软件，作为一个开源项目，它的源码可以在github上找到。官方仓库地址为： https://github.com/heartexlabs/labelImg 小白安装时的最新版本编译出来的界面长这样： 之前在小白的博客里，也教过…...

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

JavaScript里实现继承的几种方式

JavaScript 中的继承可以通过以下几种方式来实现： 1、原型链继承：通过将子类的原型对象指向父类的实例来实现继承。这种方式的优点是实现简单，缺点是父类的私有属性和方法子类是不能访问的。 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”，指的是一种数据库管理系统，旨在处理大量非结构化和半结构化数据。与使用具有预定义架构的表格格式的传统SQL数据库不同，NoSQL数据库是无模式的，并且允许灵活和动态的数据结构。 NoSQL数据库是必需的&…...

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

面试马铭泽

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

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

查看AWS S3的目录

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

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

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

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

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

【redis】bitmap、hyperloglog、GEO案例

【redis】bitmap、hyperloglog、GEO案例文章目录【redis】bitmap、hyperloglog、GEO案例前言一、面试题二、统计的类型聚合统计排序统计问题：思路二值统计 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

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

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

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

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

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

编程日记 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操作

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

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

Linux command(split)

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

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

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

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

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

法规标准-ISO 16787标准解读

ISO 16787是做什么的？ ISO 16787全称为智能运输系统-辅助泊车系统（APS）-性能要求和测试程序，其中主要描述了对APS系统的功能要求及测试规范 APS类型根据目标停车位类型将APS系统分为两类： 1）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

业务系统对接大模型的基础方案：架构设计与关键步骤

业务系统对接大模型：架构设计与关键步骤在当今数字化转型的浪潮中，大语言模型（LLM）已成为企业提升业务效率和创新能力的关键技术之一。将大模型集成到业务系统中，不仅可以优化用户体验，还能为业务决策提供…...

编程新知 2026/2/8 4:53:03

手游刚开服就被攻击怎么办？如何防御DDoS？

开服初期是手游最脆弱的阶段，极易成为DDoS攻击的目标。一旦遭遇攻击，可能导致服务器瘫痪、玩家流失，甚至造成巨大经济损失。本文为开发者提供一套简洁有效的应急与防御方案，帮助快速应对并构建长期防护体系。一、遭遇攻击的紧急应…...

编程新知 2026/2/8 4:37:03

树莓派超全系列教程文档--(62)使用rpicam-app通过网络流式传输视频

使用rpicam-app通过网络流式传输视频使用 rpicam-app 通过网络流式传输视频UDPTCPRTSPlibavGStreamerRTPlibcamerasrc GStreamer 元素文章来源： http://raspberry.dns8844.cn/documentation 原文网址使用 rpicam-app 通过网络流式传输视频本节介绍来自 rpica…...

编程新知 2025/11/5 13:03:58

转转集团旗下首家二手多品类循环仓店“超级转转”开业

6月9日，国内领先的循环经济企业转转集团旗下首家二手多品类循环仓店“超级转转”正式开业。转转集团创始人兼CEO黄炜、转转循环时尚发起人朱珠、转转集团COO兼红布林CEO胡伟琨、王府井集团副总裁祝捷等出席了开业剪彩仪式。据「TMT星球」了解，“超级…...

编程新知 2026/2/8 4:08:40

生成 Git SSH 证书

🔑 1. 生成 SSH 密钥对在终端（Windows 使用 Git Bash，Mac/Linux 使用 Terminal）执行命令： ssh-keygen -t rsa -b 4096 -C "your_emailexample.com" 参数说明： -t rsa&#x…...

编程新知 2025/9/18 11:31:13

Unit 1 深度强化学习简介

Deep RL Course ——Unit 1 Introduction 从理论和实践层面深入学习深度强化学习。学会使用知名的深度强化学习库，例如 Stable Baselines3、RL Baselines3 Zoo、Sample Factory 和 CleanRL。在独特的环境中训练智能体，比如 SnowballFight、Huggy the Do…...

编程新知 2026/2/8 12:54:53

mysql已经安装，但是通过rpm -q 没有找mysql相关的已安装包

文章目录现象：mysql已经安装，但是通过rpm -q 没有找mysql相关的已安装包遇到 rpm 命令找不到已经安装的 MySQL 包时，可能是因为以下几个原因：1.MySQL 不是通过 RPM 包安装的2.RPM 数据库损坏3.使用了不同的包名或路径4.使用其他包…...

编程新知 2026/2/4 16:17:25

SQL慢可能是触发了ring buffer

简介最近在进行 postgresql 性能排查的时候，发现 PG 在某一个时间并行执行的 SQL 变得特别慢。最后通过监控监观察到并行发起得时间 buffers_alloc 就急速上升，且低水位伴随在整个慢 SQL，一直是 buferIO 的等待事件，此时也没有其他会话的争抢。SQL 虽然不是高效 SQL ，但…...

编程新知 2025/10/2 9:17:52