js_常用事件演示

✨前言✨

1.如果代码对您有帮助  欢迎点赞👍+收藏⭐哟   后面如有问题可以私信评论哟🗒️
2.博主后面将持续更新哟😘

🎉文章目录

  • 🍔一、在JavaScript中什么是事件?
  • 🍟二、为什么要使用事件
  • 🌭三、常见事件的使用方法
  • 🌮四、总结

🍔一、在JavaScript中什么是事件?

JavaScript 使我们有能力创建动态页面。事件是可以被 JavaScript 侦测到的行为。 网页中的每个元素都可以产生某些可以触发JavaScript函数的事件。比方说,我们可以在用户点击某按钮时产生一个 onClick 事件来触发某个函数。事件在 HTML 页面中定义。

基本原理

当我们在某个元素上添加一个事件时,根据事件执行的前后可以把它当成一个事件流,例如在DOM事件中规定的事件流包括三个阶段:事件捕获阶段、处于目标阶段和事件冒泡阶段。首先发生的是事件捕获,然后是实际的目标接收到事件,最后是冒泡阶段,可以在这个阶段对事件做出响应。

🍟二、为什么要使用事件

在JavaScript中,事件用于响应用户的交互操作或其他类型的操作。通过事件,可以将某个特定的函数或代码与特定的事件相关联。以下是一些常见的原因,为什么需要使用事件:

1、交互响应:事件可以帮助我们在用户与页面交互时做出相应的动作。
2、用户交互:事件可以捕获用户的交互行为,例如点击、拖动、滚动等操作。
3、表单验证:可以使用事件来对用户输入进行验证。
4、动态页面:事件可以用于动态地改变页面的内容和外观。
5、异步操作:事件可以与异步操作(例如AJAX请求)结合使用,以便在操作完成时执行相应的处理函数。

🌭三、常见事件的使用方法

属性作用
onclick单击事件
ondblclick双击事件
onmousedown鼠标按钮被按下
onmouseup鼠标按键被松开
onmousemove鼠标被移动
onmouseover鼠标移到某元素之上
onmouseout鼠标从某元素移开
onselect文本被选中
onscroll滚动条事件 监听滚动条滑动的高度

代码演示如下:

单击事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script>
    function showMessage(){
      console.log("这是点击事件");
    }
  </script>
</head>
<body>
<input type="button" value="点击按钮" onclick="showMessage()" />
</body>
</html>

运行结果:

在这里插入图片描述

双击事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script>
    function showMessage(){
      console.log("这是双击事件");
    }
  </script>
</head>
<body>
<input type="button" value="双击按钮" ondblclick="showMessage()" />
</body>
</html>

运行结果:

在这里插入图片描述

鼠标被移动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script>
    window.onmousemove = function (){
      console.log("这是鼠标被移动");
    }
  </script>
</head>
<body>

</body>
</html>

运行结果:

在这里插入图片描述

鼠标从某元素移开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script>
    window.onmouseout = function (){
      console.log("这是鼠标从某元素移开");
    }
  </script>
</head>
<body>

</body>
</html>

运行结果:

在这里插入图片描述

失去焦点和获得焦点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script>
      /*  窗口失去焦点时 */
      window.onblur = function (){
          console.log('窗口失去了焦点!')
      }
      /*  当窗口获得焦点时 */
      window.onfocus = function (){
          console.log('窗口获得了焦点!')
      }
  </script>
</head>
<body>

</body>
</html>

运行结果:

在这里插入图片描述

内容改变事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script>
    function fun1() {
      console.log('内容发生改变')
    }
  </script>
</head>
<body>
<input type="text" onchange="fun1()" oninput="fun1()">
</body>
</html>

运行结果:

在这里插入图片描述
onsubmit:为表单绑定提交事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        /* 为表单绑定提交事件*/
         function fun1(){
            let userCode = document.getElementById('userCode').value
            let userPwd = document.getElementById('userPwd').value
            var reg = /^[A-Za-z0_9]{6,12}$/;
            console.log('触发了表单的提交事件!')
            if (userCode === ''){
                alert('账号不能为空')
            }else if (userCode.length < 6 || userCode.length > 12){
                alert('账号长度错误')
            }else if (!reg.test(userCode)){
                alert('账号只能为字母与数字')
            }else if (userPwd === ''){
                alert('密码不能为空')
            }else if (userPwd.length < 6 || userPwd.length > 12){
                alert('密码长度错误')
            }else if (!reg.test(userPwd)){
                alert('密码只能为字母与数字')
            }else {
                return true
            }
            return false
        }
    </script>
</head>
<body>
<form onsubmit="fun1()">
<input id="userCode" type="text"><br>
<input id="userPwd" type="password"><br>
<input type="submit" onsubmit="fun1()">
</form>
</body>
</html>

🌮四、总结

属性解释
click点击事件,当鼠标点击元素时触发。
mouseover鼠标悬停事件,当鼠标指针进入元素时触发。
mouseout鼠标离开事件,当鼠标指针离开元素时触发。
keydown键盘按下事件,当按下键盘上的任意键时触发。
keyup键盘松开事件,当释放键盘上的键时触发。
submit表单提交事件,当用户提交表单时触发。
load加载事件,当页面或某个元素完成加载时触发。
scroll滚动事件,当页面滚动时触发。
resize调整窗口大小事件,当调整浏览器窗口大小时触发。
focus获取焦点事件,当元素获取焦点时触发。
blur失去焦点事件,当元素失去焦点时触发。
change值改变事件,当表单元素的值发生改变时触发。
dblclick双击事件,当鼠标双击元素时触发。

这些事件可以通过addEventListener方法或者直接在HTML元素中使用on开头的属性来绑定相应的处理函数。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

西软云XMS 反序列化RCE漏洞复现

0x01 产品简介 西软云XMS是基于云平台数据中心开发的支持多酒店、多语言、多平台的酒店管理系统。致力于以新一代云架构为国内四,五星级中高端酒店提供灵活、高度整合酒店业务,助力酒店智能转型升级。 0x02 漏洞概述 西软云XMS /fox-invoker/FoxLookupInvoker接口处存在反…

Erlang、RabbitMQ下载与安装教程(windows超详细)

目录 安装Erlang 1.首先安装RabbitMQ需要安装Erlang环境 2.点击下载好的.exe文件进行傻瓜式安装,一直next即可 3.配置Erlang环境变量 安装RabbitMQ 1.给出RabbitMQ官网下载址&#xff1a;Installing on Windows — RabbitMQ&#xff0c;找到 2.配置RabbitMQ环境变量&#xff0…

国际物流公司科普_集装箱种类区分和介绍_箱讯科技

集装箱运输的不断发展&#xff0c;为适应装载不同种类货物的需要&#xff0c;因而出现了不同种类的集装箱。今天和大家一起来总结一下。 按使用材料分类 根据箱子主体部件&#xff08;侧壁、端壁、箱顶等&#xff09;采用什么材料&#xff0c;就叫做什么材料制造的集装箱&…

机器学习的任务

根据学习任务的不同&#xff0c;机器学习算法大致可分为3类&#xff1a;监督学习、无监督学习和半监督学习。 监督学习&#xff08;Supervised Learning&#xff09; 在监督学习中&#xff0c;我们有一组带有标签&#xff08;即已知输出&#xff09;的训练样本作为输入。目标是…

Baumer工业相机堡盟工业相机如何通过BGAPI SDK实现Raw格式的图像保存(C++)

Baumer工业相机堡盟工业相机如何通过BGAPI SDK实现Raw格式的图像保存&#xff08;C&#xff09; Baumer工业相机Baumer工业相机通过SDK实现Raw格式的图像保存的技术背景通过SDK获取相机信息的代码分析Baumer工业相机回调函数里保存原始图像数据Baumer保存Raw图像格式重要核心代…

用Html和js和layui写一个简单猜拳小游戏

简单学习技术&#xff0c;写了一个小游戏&#xff0c;用html和js写一个简单的小游戏。玩家点击按钮出拳&#xff0c;玩家胜利结果显示绿色&#xff0c;玩家输了结果显示红色&#xff0c;平局结果显示蓝色。 页面效果&#xff1a; 代码&#xff1a; <!DOCTYPE html> <…

低代码平台快速开发CRM 可灵活自定义的CRM软件

白码低代码平台以其简化和加速应用程序开发的方法而闻名&#xff0c;无需大量编写代码&#xff0c;只需通过可视化界面和配置来构建应用程序。在快速开发CRM方面&#xff0c;白码低代码平台具有许多优势和应用。 白码低代码平台快速搭建CRM 快速开发是白码低代码平台的一大优势…

最新AI系统ChatGPT网站系统源码,Midjourney绘画,GPT语音对话+ChatFile文档对话总结+DALL-E3文生图+思维导图一站式解决方案

一、前言 SparkAi创作系统是基于ChatGPT进行开发的Ai智能问答系统和Midjourney绘画系统&#xff0c;支持OpenAI-GPT全模型国内AI全模型。本期针对源码系统整体测试下来非常完美&#xff0c;可以说SparkAi是目前国内一款的ChatGPT对接OpenAI软件系统。那么如何搭建部署AI创作Ch…

MD5算法

一、引言 MD5&#xff08;Message-Digest Algorithm 5&#xff09;是一种广泛应用的密码散列算法&#xff0c;由Ronald L. Rivest于1991年提出。MD5算法主要用于对任意长度的消息进行加密&#xff0c;将消息压缩成固定长度的摘要&#xff08;通常为128位&#xff09;。在密码学…

算法设计与分析期末上机板子——课内题目题意与题解分析+课外知识点总结!

真正的模板&#xff01;&#xff01;&#xff01; 文章目录 课内堆实现C语言矩阵连乘E1D连分数计算C3A-钢管切割&#xff1a;动态规划C3C-流水线调度&#xff1a;动态规划C3E-矩阵连乘效率&#xff1a;区间动态规划C3F-导弹轰炸&#xff08;小偷问题&#xff09;&#xff1a;动…

flutter dio使用proxyman抓包进行网络调试

证书 wifi 手机和电脑连上同一个wifi&#xff0c;并且手机wifi使用代理&#xff0c;代理地址为电脑的ip和proxyman设置的监听端口 代码 import package:dio/dio.dart; import package:dio/io.dart; import dart:io;class ProxyUtil {static String proxyIP "";st…

MySQL GTID 主从错误

错误 搭建主从出现以下错误 Last_IO_Error: The replication receiver thread cannot start because the master has GTID_MODE OFF and this server has GTID_MODE ON. 原因 MySQL主从的 Master 和 Slave 必须 同时开启或者关闭 enforce-gtid-consistency和 gtid-mode 功能…

Centos如何修改ssh端口

想必很大一部分的同学用的是centos服务器&#xff0c;对于默认的22端口存在一定的安全风险&#xff0c;所以今天我们一起看下如何修改ssh端口 一、什么是SSH SSH&#xff08;Secure Shell&#xff09;是一种安全的远程登录协议&#xff0c;它允许您通过网络远程连接到Linux系统…

YOLOv5改进 | 2023主干篇 | 华为最新VanillaNet主干替换Backbone实现大幅度长点

一、本文介绍 本文给大家来的改进机制是华为最新VanillaNet网络&#xff0c;其是今年最新推出的主干网络&#xff0c;VanillaNet是一种注重极简主义和效率的神经网络架构。它的设计简单&#xff0c;层数较少&#xff0c;避免了像深度架构和自注意力这样的复杂操作(需要注意的是…

docker中部署mysql

原文链接&#xff1a; Docker 安装mysql8.0_docker安装mysql8.0-CSDN博客 1&#xff1a;拉取mysql镜像 docker pull mysql:8.0指定8.0版本的&#xff0c;因为我之前装的是5.6&#xff0c;不支持窗口函数&#xff0c;8版本之后的才支持&#xff0c;所以更换版本。 2&#xf…

C# WPF上位机开发(报表导出)

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 对于在工厂上班的小伙伴来说&#xff0c;导出生产数据、生成报表&#xff0c;这是很习以为常的一个工作。之前的文章中&#xff0c;虽然我们也介绍…

格密码:隐藏超平面问题与uSVP问题 (Ajtai密码)

目录 一. 技术发展 二. 隐藏超平面问题&#xff08;hidden hyperplanes problem,HHP&#xff09; 三. 唯一最短向量问题&#xff0c;unique shortest vector problem&#xff0c;uSVP 四. Ajtai-Dwork密码系统&#xff08;改进版&#xff09; 4.1 公钥 4.2 私钥 4.3 加密…

Serverless架构:无服务器应用与AWS Lambda-读书笔记

Serverless架构&#xff1a;无服务器应用与AWS Lambda-读书笔记 好的架构可以成就软件&#xff0c;缺乏架构则会破坏软件。 一、Serverless 架构的来龙去脉 在典型的Web应用程序中&#xff0c;服务器接受前端的HTTP请求并处理请求。在保存到数据库之前&#xff0c;数据可能会…

<JavaEE> TCP 的通信机制(六) -- 异常情况处理 和 总结

目录 十、异常情况处理 1&#xff09;进程崩溃终止 2&#xff09;主机正常关机 3&#xff09;机器掉电/网络断开 1> 接收端掉线 2> 发送端掉线 TCP 通信机制 总结 阅读指针 -> 《 TCP 的通信机制 -- 延时应答、捎带应答、面向字节流 》&#xff1c;JavaEE&…

如何使用mac电脑,1、使用快捷命令打开访达,2、使用终端命令创建文件,3、使用命令打开创建的文件,并且在vscode中打开

如何使用mac电脑 1、使用快捷命令打开访达 optioncommand空格键 快速进入访达 shiftcmmandn 创建一个空目录 2、使用终端命令创建文件 2.1进入文件夹 在终端页面输入“cd /Users/yunf/Desktop/”并按回车键&#xff08;此时进入到桌面文件夹&#xff0c;如果需要进入到其它…
最新文章