JavaScript 常用事件演示

Hi i,m JinXiang


⭐ 前言 ⭐

本篇文章主要介绍在在JavaScript 常用事件演示以及部分理论知识


🍉欢迎点赞 👍 收藏 ⭐留言评论 📝私信必回哟😁

🍉博主收将持续更新学习记录获,友友们有任何问题可以在评论区留言


目录

一、什么是JavaScript?

二、什么是JavaScript 常用事件?

三、JavaScript 常用事件使用

常用JS事件:

使用JS事件注意事项:

常用JS事件代码示例:

1、点击事件 (click):

2、鼠标移入事件 (mouseenter):

3、鼠标移出事件(mouseleave):

4、鼠标移动事件 (mousemove):

5、键盘按下事件(keydown):

6、键盘松开事件(keyup):

7、表单提交事件(submit):

总结JS中的常用事件


一、什么是JavaScript?

JavaScript是一种高级编程语言,通常用于在网页中添加交互性和动态功能。它可以用于控制网页的各个方面,例如表单验证、动画效果、页面加载时的动作等。JavaScript是一种客户端脚本语言,意味着它在用户的浏览器中运行,而不是在服务器上。它被广泛应用于网站开发和应用程序开发中。

二、什么是JavaScript 常用事件?

JavaScript常用事件是指在网页中常用的和与用户交互相关的事件。以下是一些常见的JavaScript事件:

  1. 点击事件(onclick):当用户点击某个元素时触发。
  2. 鼠标移动事件(onmousemove):当用户在某个元素上移动鼠标时触发。
  3. 鼠标悬停事件(onmouseover):当用户将鼠标悬停在某个元素上时触发。
  4. 键盘按下事件(onkeydown):当用户按下键盘上的任意键时触发。
  5. 表单提交事件(onsubmit):当用户提交表单时触发。
  6. 页面加载事件(onload):当网页加载完成时触发。
  7. 元素失去焦点事件(onblur):当元素失去焦点时触发。
  8. 元素获得焦点事件(onfocus):当元素获得焦点时触发。

这些事件可以用来实现各种交互功能,例如按钮点击后触发某个操作、鼠标移动到某个区域改变样式等。

三、JavaScript 常用事件使用

常用的JavaScript事件可以通过给HTML元素添加事件监听器来使用。下面是一个具体的使用示例:

假设我们有一个按钮元素,我们想要在按钮被点击时触发一些操作。首先,在HTML中添加一个按钮元素和一个用来显示结果的div元素:

<button id="myButton">点击我</button>
<div id="result"></div>

然后,在JavaScript中获取按钮元素,并添加点击事件监听器:

// 获取按钮元素
var myButton = document.getElementById("myButton");// 添加点击事件监听器
myButton.addEventListener("click", function() {// 在点击事件发生时执行的操作console.log("按钮被点击了");// 更新结果div的内容var resultDiv = document.getElementById("result");resultDiv.innerHTML = "按钮被点击了";
});

这样,当用户点击按钮时,控制台会输出"按钮被点击了",并且结果div的内容也会被更新为"按钮被点击了"。

你可以根据需要选择不同的事件来使用,然后在事件监听器中编写相应的操作逻辑。

常用JS事件:

JavaScript中常用的事件可以总结如下:

  1. 点击事件 (click): 当用户点击元素时触发。

  2. 鼠标移入/移出事件 (mouseenter/mouseleave): 当鼠标移入或移出元素时触发。

  3. 鼠标移动事件 (mousemove): 当鼠标在元素上移动时触发。

  4. 键盘按下/松开事件 (keydown/keyup): 当用户按下或松开键盘上的键时触发。

  5. 表单提交事件 (submit): 当用户提交表单时触发。

  6. 文档加载事件 (DOMContentLoaded): 当页面的HTML文档已加载并解析完成时触发。

  7. 元素加载事件 (load): 当元素(如图片)加载完成时触发。

  8. 页面滚动事件 (scroll): 当页面滚动时触发。

  9. 元素改变事件 (change): 当元素的值发生改变时触发(适用于输入框、下拉框等)。

  10. 元素聚焦/失焦事件 (focus/blur): 当元素获得或失去焦点时触发。

以上仅是一些常用的JavaScript事件,实际上JavaScript还有更多的事件类型可供使用。选用合适的事件类型,能够实现丰富的交互效果和用户体验。

使用JS事件注意事项:

在使用JavaScript事件时,有一些注意事项需要注意:

  1. 选择合适的事件:根据需要选择适合的事件类型。不同的事件在不同的情况下触发,所以选择正确的事件对于实现所需的交互行为非常重要。

  2. 事件冒泡:JavaScript中的事件冒泡指的是,当一个元素上的事件被触发时,它的父元素也会接收到相同的事件触发。这意味着,如果多个元素都有相同的事件监听器,事件触发时可能会冒泡到多个元素上。要注意处理冒泡事件,可以使用 event.stopPropagation() 来停止事件传播。

  3. 事件绑定:可以使用 addEventListener() 方法将事件监听器绑定到元素上。可以多次绑定同一个事件到同一个元素上,也可以通过 removeEventListener() 方法解除绑定。

  4. 事件处理函数:事件处理函数是处理事件的JavaScript代码。在编写事件处理函数时,要确保代码逻辑正确并且高效。可以通过 event.target 获取事件源元素,并通过 event.preventDefault() 阻止默认行为。

  5. 跨浏览器兼容性:不同的浏览器可能对事件的处理方式有所不同。为了确保您的代码在不同的浏览器中正常工作,可以使用跨浏览器的事件处理库,如jQuery等。

  6. 注意事件的触发顺序:如果多个元素绑定了同一事件,并且这些元素之间有层级关系,事件触发的顺序可能会影响代码的执行结果。要确保事件的触发顺序符合预期,可以使用事件捕获或事件冒泡来控制。

总之,在使用JavaScript事件时,要确保正确选择事件类型、处理事件冒泡、正确绑定事件、编写高效的事件处理函数、处理跨浏览器兼容性,并注意事件触发的顺序,以确保代码的正确性和性能。

常用JS事件代码示例:

JavaScript中常用的事件示例代码如下:

1、点击事件 (click):

点击事件表示当用户点击一个元素时触发的事件。在JavaScript中,可以使用click事件来监听点击并执行相应的操作。以下是一个点击事件的示例代码:

<button id="myButton">点击我</button><script>document.getElementById("myButton").addEventListener("click", function(event) {// 执行点击时的操作console.log("按钮被点击了");});
</script>

在上面的代码中,我们通过document.getElementById("myButton")获取到一个带有idmyButtonbutton元素,并使用addEventListener方法监听其click事件。在事件处理器中,执行点击时的操作(这里只是简单地使用console.log输出一条消息)。可以根据具体需求执行不同的操作,比如弹出提示框、提交表单等。

2、鼠标移入事件 (mouseenter):

鼠标移入事件表示当鼠标指针移入一个元素时触发的事件。在JavaScript中,可以使用mouseover事件来监听鼠标移入并执行相应的操作。以下是一个鼠标移入事件的示例代码:

<div id="myDiv" style="width: 300px; height: 200px; background-color: lightblue;"></div><script>document.getElementById("myDiv").addEventListener("mouseover", function(event) {// 执行鼠标移入时的操作console.log("鼠标已移入");});
</script>

在上面的代码中,我们通过document.getElementById("myDiv")获取到一个带有idmyDivdiv元素,并使用addEventListener方法监听其mouseover事件。在事件处理器中,执行鼠标移入时的操作(这里只是简单地使用console.log输出一条消息)。可以根据具体需求执行不同的操作,比如显示某个元素、改变某个元素的样式等。

3、鼠标移出事件(mouseleave):

鼠标移出事件表示当鼠标指针移出一个元素时触发的事件。在JavaScript中,可以使用mouseout事件来监听鼠标移出并执行相应的操作。以下是一个鼠标移出事件的示例代码:

<div id="myDiv" style="width: 300px; height: 200px; background-color: lightblue;"></div><script>document.getElementById("myDiv").addEventListener("mouseout", function(event) {// 执行鼠标移出时的操作console.log("鼠标已移出");});
</script>

在上面的代码中,我们通过document.getElementById("myDiv")获取到一个带有idmyDivdiv元素,并使用addEventListener方法监听其mouseout事件。在事件处理器中,执行鼠标移出时的操作(这里只是简单地使用console.log输出一条消息)。可以根据具体需求执行不同的操作,比如隐藏某个元素、重置某个表单字段等。

4、鼠标移动事件 (mousemove):

鼠标移动事件表示当用户在页面上移动鼠标时触发的事件。在JavaScript中,可以使用mousemove事件来监听鼠标移动并执行相应的操作。以下是一个鼠标移动事件的示例代码:

<div id="myDiv" style="width: 300px; height: 200px; background-color: lightblue;"></div><script>document.getElementById("myDiv").addEventListener("mousemove", function(event) {// 执行鼠标移动时的操作console.log("鼠标位置:X=" + event.clientX + ",Y=" + event.clientY);});
</script>

在上面的代码中,我们通过document.getElementById("myDiv")获取到一个带有idmyDivdiv元素,并使用addEventListener方法监听其mousemove事件。在事件处理器中,通过event.clientXevent.clientY属性获取到鼠标指针在页面上的坐标,并执行相应的操作(这里只是简单地使用console.log输出鼠标位置)。可以根据具体需求对鼠标位置进行进一步的判断和处理。

5、键盘按下事件(keydown):

键盘按下事件表示当用户按下键盘上的键时触发的事件。在JavaScript中,可以使用keydown事件来监听键盘按下动作并执行相应的操作。以下是一个键盘按下事件的示例代码:

<input type="text" id="myInput"><script>document.getElementById("myInput").addEventListener("keydown", function(event) {// 执行键盘按下时的操作console.log("键盘按键:" + event.key);});
</script>

在上面的代码中,我们通过document.getElementById("myInput")获取到文本框元素,并使用addEventListener方法监听其keydown事件。在事件处理器中,通过event.key属性获取到按下的键的值,并执行相应的操作(这里只是简单地使用console.log输出按下的键)。可以根据具体需求对按下的键进行进一步的判断和处理。

6、键盘松开事件(keyup):

键盘松开事件表示当用户松开键盘上的键时触发的事件。在JavaScript中,可以使用keyup事件来监听键盘松开动作并执行相应的操作。下面是一个键盘松开事件的示例代码:

<input type="text" id="myInput"><script>document.getElementById("myInput").addEventListener("keyup", function(event) {// 执行键盘松开时的操作console.log("键盘按键:" + event.key);});
</script>

在上面的代码中,通过document.getElementById("myInput")获取到文本框元素,并使用addEventListener方法监听其keyup事件。在事件处理器中,我们通过event.key属性获取到松开的键的值,并执行相应的操作(这里只是简单地使用console.log输出了松开的键)。可以根据具体需求对松开的键进行进一步的判断和处理。

7、表单提交事件(submit):

表单提交事件表示当用户点击表单的提交按钮时触发的事件。在JavaScript中,可以使用submit事件来监听表单提交动作并执行相应的操作。下面是一个表单提交事件的示例代码:

<form id="myForm"><input type="text" name="username" placeholder="请输入用户名"><input type="password" name="password" placeholder="请输入密码"><input type="submit" value="提交">
</form>
document.getElementById("myForm").addEventListener("submit", function(event) {event.preventDefault(); // 阻止表单默认的提交行为// 获取表单输入的值var username = document.querySelector('input[name="username"]').value;var password = document.querySelector('input[name="password"]').value;// 执行表单提交时的操作console.log("用户名:" + username);console.log("密码:" + password);
});

在上面的代码中,通过document.getElementById("myForm")获取到表单元素,并使用addEventListener方法监听其submit事件。在事件处理器中,我们首先调用了event.preventDefault()方法来阻止表单的默认提交行为,然后通过document.querySelector方法获取到表单中输入框的值,并执行相应的操作(这里只是简单地使用console.log输出了用户名和密码)

这些是常见的JavaScript事件示例代码,你可以根据具体的需求和场景选择适合的事件类型和相应的处理函数。

总结JS中的常用事件

下面是一些常用的 JavaScript 事件和它们的描述:

事件描述
click当元素被点击时触发
mouseover当鼠标移入元素时触发
mouseout当鼠标移出元素时触发
keydown当按下键盘上的任意键时触发
keyup当释放键盘上的任意键时触发
load当页面或图片加载完成时触发
scroll当页面滚动时触发
focus当元素获得焦点时触发
blur当元素失去焦点时触发
submit当提交表单时触发
input当输入框的值发生变化时触发
change当表单元素的值发生变化时触发
resize当窗口大小改变时触发
error当加载资源失败时触发

这些事件只是其中的一部分,JavaScript 提供了更多的事件类型,开发者可以根据具体需求选择合适的事件来响应用户操作。

总结不易,希望宝宝们不要吝啬亲爱的👍哟(^U^)ノ~YO!如有问题,欢迎评论区批评指正😁

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

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

相关文章

回归预测 | MATLAB实OOA-LSTM基于鱼鹰优化算法优化长短期记忆网络的多输入单输出数据回归预测模型 (多指标,多图)

回归预测 | MATLAB实OOA-LSTM基于鱼鹰优化算法优化长短期记忆网络的多输入单输出数据回归预测模型 &#xff08;多指标&#xff0c;多图&#xff09; 目录 回归预测 | MATLAB实OOA-LSTM基于鱼鹰优化算法优化长短期记忆网络的多输入单输出数据回归预测模型 &#xff08;多指标&a…

20231228在Firefly的AIO-3399J开发板的Android11的挖掘机的DTS配置单前置摄像头ov13850

20231228在Firefly的AIO-3399J开发板的Android11的挖掘机的DTS配置单前置摄像头ov13850 2023/12/28 10:42 【碰到一个很神奇的问题】&#xff1a; 昨天晚上前置摄像头怎么也点不亮&#xff01;改了巨多的地方&#xff01;晚上睡觉之前把开发板彻底断电了&#xff01;今天开电脑…

CISSP 第2章: 人员安全和风险管理概念

第二章 人员安全和风险管理概念 2.1 促进人员安全策略 构建工作描述方面的重要因素包括: 职责分离: 把关键的、重要的和敏感工作任务分配给若干不同的管理员或高级执行者&#xff0c;防止共谋 工作职责:最小特权原则 岗位轮换:提供知识冗余&#xff0c;减少伪造、数据更改、偷…

STM32的在线升级(IAP)实现方法:BOOT+APP原理详解

0 工具准备 Keil uVision5 Cortex M3权威指南&#xff08;中文&#xff09; STM32参考手册 1 在线升级&#xff08;IAP&#xff09;设计思路 为了实现STM32的在线升级&#xff08;IAP&#xff09;功能&#xff0c;通常会将STM32的FLASH划分为BOOT和APP两个部分&#xff0c;BOO…

虚幻UE 光源-色温和光度学

文章目录 一、色温二、光度学1、lux勒克斯2、cd坎德拉3、nit尼特4、总结 三、EV曝光值 一、色温 色温可以简单的认为就是颜色的温度。 但他是有范围的&#xff0c;也是有要求的&#xff0c;并不是所有的颜色都可以有色温。 以上就是色温范围图。 而这些颜色的温度是怎么定义…

【算法每日一练]-数论 (保姆级教程 篇2 )#行列式 #甜甜花研究 #约数个数 #模数 #数树 #盒子与球

目录 今日知识点&#xff1a; 辗转相减法化下三角求行列式 组合数动态规划打表 约数个数等于质因数的次方1的乘积 求一个模数 将n个不同的球放入r个不同的盒子&#xff1a;f[i][j]f[i-1][j-1]f[i-1][j]*j 行列式 甜甜花的研究 约数个数 模数 数树 盒子与球 行列…

github短视频去除水印项目Douyin_TikTok_Download_API介绍

当下正值短视频盛行的时代。在我们浏览短视频的同时&#xff0c;经常能发现一些精美的图片、引人入胜的文案以及吸引眼球的视频&#xff0c;想要将它们保存到本地。然而&#xff0c;保存下来的图片或视频通常伴随着不太愉悦的水印&#xff0c;这显著降低了使用体验。因此&#…

开源数据可视化分析工具DataEase本地部署并实现远程访问

目录 前言 1. 安装DataEase 2. 本地访问测试 3. 安装 cpolar内网穿透软件 4. 配置DataEase公网访问地址 5. 公网远程访问Data Ease 6. 固定Data Ease公网地址 结语 作者简介&#xff1a; 懒大王敲代码&#xff0c;计算机专业应届生 今天给大家聊聊开源数据可视化分析工…

SQL IN 操作符

IN 操作符 IN 操作符允许您在 WHERE 子句中规定多个值。 SQL IN 语法 SELECT column1, column2, ... FROM table_name WHERE column IN (value1, value2, ...); 参数说明&#xff1a; column1, column2, ...&#xff1a;要选择的字段名称&#xff0c;可以为多个字段。如果…

阶段七-Bootstrap

Bootstrap&#xff1a;为应用场景设计的前端框架 一、Bootstrap介绍 1. 前端框架介绍 Java框架都是对Java SE技术或Java EE的技术进行封装&#xff0c;按照框架的要求进行搭建环境后可以简化开发流程。 前端框架是对CSS、JavaScript的封装。有的框架只封装了CSS&#xff0c…

element的form表单校验(身份证号、手机号、整数、汉字、for循环列表)

<template><div class"FormPage"><el-form ref"form" :model"form" :rules"rules" label-width"100px"><el-form-item label"姓名:" prop"name"><el-input v-model"fo…

25道RabbitMQ面试题含答案(很全)

1. 什么是RabbitMQ RabbitMQ是一个开源的消息队列系统&#xff0c;它使用AMQP&#xff08;高级消息队列协议&#xff09;标准。RabbitMQ的主要目标是提供可靠的消息传递&#xff0c;确保消息的可靠性和顺序性&#xff0c;同时提供灵活的路由和消息确认机制。 RabbitMQ基于AMQ…

Unity坦克大战开发全流程——游戏场景——游戏界面——设置界面复用

游戏场景——游戏界面——设置界面复用 先将开始场景当中的设置面板复制过来 由于设置面板挂载的脚本都是相同的&#xff0c;在BeginScene中关闭设置面板时不会报空&#xff0c;而在GameScene中关闭设置面板时却会报空&#xff0c;这是因为监听事件中的单例模式调用的实例是Beg…

Linux 硬件配置

Linux 查看硬件配置 #查看CPU [capioscapios8163 ~]$ cat /proc/cpuinfo | grep name model name : Intel(R) Xeon(R) Platinum 8163 CPU 2.50GHz model name : Intel(R) Xeon(R) Platinum 8163 CPU 2.50GHz model name : Intel(R) Xeon(R) Platinum 8163 CPU 2.50GHz mo…

基于机器视觉的害虫种类及计数检测研究-人工智能项目-附代码

概述 农业与民生和经济发展息息相关&#xff0c;对农业发展科学化的关注既是民生需求&#xff0c; 也是经济稳步发展的迫切需求。病虫害是影响农作物生长的重要因素&#xff0c;对农作物的产量和品质都能造成无法估计的损害。 - 针对目前广大农业产区农业植保人员稀缺、病虫害…

爬虫基础一(持续更新)

爬虫概念&#xff1a; 通过编写程序&#xff0c;模拟浏览器上网&#xff0c;然后让其去互联网上抓取数据的过程 分类&#xff1a; 1&#xff0c;通用爬虫&#xff1a;抓取一整张页面数据 2&#xff0c;聚焦爬虫&#xff1a;抓取页面中的局部内容 3&#xff0c;增量式爬虫&…

【UnityShader入门精要学习笔记】(2)GPU流水线

本系列为作者学习UnityShader入门精要而作的笔记&#xff0c;内容将包括&#xff1a; 书本中句子照抄 个人批注项目源码一堆新手会犯的错误潜在的太监断更&#xff0c;有始无终 总之适用于同样开始学习Shader的同学们进行有取舍的参考。 文章目录 上节复习GPU流水线顶点着色…

梯度下降简介

梯度下降简介 1、背景概述2、梯度下降3、梯度下降的步长1、背景概述 在Scikit-Learn线性回归第一篇文章(详见:传送门)中,我们给出了线性回归的损失函数的定义: L = ∑ i = 1 m ( y i − f ( x i ) ) 2 L=\sum_{i=1}^m(y_i-f(x_i))^2 L=i=1∑m​(yi​−f(xi​))2 回忆一下…

Linux操作系统极速入门[常用指令]

linux概述&#xff1a; Linux是一套免费使用和自由传播的操作系统 我们为什么要学&#xff0c;Linux&#xff1f; 主流操作系统&#xff1a; linux系统版本&#xff1a; 内核版&#xff1a; 由linux核心团队开发&#xff0c;维护 免费&#xff0c;开源 负责控制硬件 发行版&…

红队攻防实战之DC2

吾愿效法古圣先贤&#xff0c;使成千上万的巧儿都能在21世纪的中华盛世里&#xff0c;丰衣足食&#xff0c;怡然自得 0x01 信息收集: 1.1 端口探测 使用nmap工具 可以发现开放了80端口&#xff0c;网页服务器但是可以看出做了域名解析&#xff0c;所以需要在本地完成本地域名…