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

JavaScript小记——事件

news 文章来源：https://blog.csdn.net/m0_63138660/article/details/130207585 2025/5/14 21:59:36

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

机器学习中的三个重要环节：训练、验证、测试

本文重点模型训练、验证和测试是机器学习中的三个重要环节。这三个环节之间存在着紧密的关系，它们相互作用，共同构建出一个完整的机器学习模型。在本文中，我们将详细介绍模型训练、验证和测试之间的关系。模型训练、验证和测试之间的关系模型训练是机器学习中最基本的…...

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

机器学习实战：Python基于LDA线性判别模型进行分类预测（五）

文章目录 1 前言1.1 线性判别模型的介绍1.2 线性判别模型的应用 2 demo数据演示2.1 导入函数2.2 训练模型2.3 预测模型 3 LDA手写数字数据演示3.1 导入函数3.2 导入数据3.3 输出图像3.4 建立模型3.5 预测模型 4 讨论 1 前言 1.1 线性判别模型的介绍线性判别模型（…...

编程日记 2023/5/31 1:10:00

Java枚举(Enum)

枚举（enum） enum全称enumeration，JDK 1.5中引入的新特性。在Java中，被enum关键字修饰的类型就是枚举类型可以将枚举看成一个类，它继承于java.lang.enum类，当定义一个枚举类型时，每一个枚举类型…...

编程日记 2023/4/23 14:07:24

【Python】【进阶篇】二十一、Python爬虫的多线程爬虫

目录二十一、Python爬虫的多线程爬虫21.1 多线程使用流程21.2 Queue队列模型21.3 多线程爬虫案例1) 案例分析2) 完整程序二十一、Python爬虫的多线程爬虫网络爬虫程序是一种 IO 密集型程序，程序中涉及了很多网络和本地磁盘的 IO 操作，这会消耗大…...

编程日记 2023/4/23 14:02:23

Python从入门到精通14天(eval、literal_eval、exec函数的使用)

eval、literal_eval、exec函数的使用 eval函数literal_eval函数exec函数三者的区别 eval函数 eval()是Python中的内置函数，它可以将一个字符串作为参数，并将该字符串作为Python代码执行。它的语法格式为：eval(expression,globalsNone,locals…...

编程日记 2023/4/23 13:57:22

队列的基本操作（C语言链表实现）初始化，入队，出队，销毁，读取数据

文章目录前言一、队列基本变量的了解二、队列的基本操作2.1队列的初始化（QueueInit）2.2入队（QueuePush）2.3判断是否为空队（QueueEmpty）2.4出队（QueuePop）2.5队列的队头数据&#xf…...

编程日记 2023/4/23 13:52:20

项目支付接入支付宝【沙箱环境】

前言订单支付接入支付宝，使用支付宝提供的沙箱机制模拟为订单付款。我这里主要记录一下沙箱环境如何接入到系统中，具体细节的实现。按照官方文档来就可以了。 1、使用步骤这里有几个重要数据要拿到，一个是支付宝的公钥和私钥&#xff0c…...

编程日记 2023/4/23 13:47:19

程序员应该如何提升自己

作为一名程序员，以下是您可以考虑的一些方法来提高自己的技能和知识： 深入学习编程语言和相关工具：了解您使用的编程语言和相关工具的基本原理和高级特性，以便更好地理解其工作方式并更有效地使用它们。刻意练习：刻意…...

编程日记 2023/4/23 13:42:18

全球上线！ABB中国涡轮增压器分拆 – 数据清理阶段完成

ABB是数字行业的技术前沿者，拥有四项主营业务：电气化，工业自动化，运动控制以及机器人和离散自动化。ABB总部位于瑞士苏黎世，业务遍及100多个国家，拥有约105，000名员工。2021年，该公司…...

编程日记 2023/4/23 13:37:12

手写简易 Spring（三）

文章目录三. 手写简易 Spring（三）1. Bean 对象初始化和销毁方法1. XML 添加 init-method 与实现 InitializingBean 接口注册初始化2. XML 添加 destroy-method 与实现 DisposableBean 接口注册销毁3. DefaultSingletonBeanRegistry 优秀的解耦方法 2. 定…...

编程日记 2023/4/23 13:32:11