JavaScript(简写js)常用事件举例演示

目录

  • 1.窗口事件
    • onblur :失去焦点
    • onfocus:获得焦点
    • onload:窗口加载事件
    • onresize:窗口大小缩放事件
  • 二、表单事件
    • oninput :当文本框内容改变时 ,立即将改变内容 输出在控制台
    • onchange: 内容改变事件
    • onclick:鼠标单击时触发此事件
  • 三、键盘事件
    • onkeydown:当键盘上的某个按键被按下时触发此事件
    • onkeyup:当键盘上的某个按键被按下后(长按不会触发)按键回弹才会触发此事件
    • onkeypress:按下某个按键后触发(长按也能触发)
  • 四、鼠标事件
    • onclick:鼠标单击时触发此事件
    • ondblclick:鼠标双击时触发此事件
    • onmousedown:鼠标按下时触发此事件(长按触发不了事件)
    • onmouseup:鼠标弹起时触发的事件
    • onmouseover:鼠标移动到某个设置了此事件的元素上时触发此事件
    • onmousemove:鼠标移动时触发此事件
    • onmouseout:鼠标从某个设置了此事件的元素上离开时触发此事件
    • onmousewheel:鼠标的滚轮运行时触发

前言:
我们用到JavaScript的时候js的事件就显得特别重要了

1.窗口事件

窗口事件
onblur失去焦点
onfocus获得焦点
onload窗口加载事件
onresize窗口大小缩放事件

onblur :失去焦点

onfocus:获得焦点

/*  当窗口失去焦点时 */window.onblur = function () {alert('窗口失去了焦点!');}/*  当窗口获得焦点时 */window.onfocus = function () {alert('窗口获得了焦点!');}

在这里插入图片描述

onload:窗口加载事件

onresize:窗口大小缩放事件

/* 窗口加载完成后*/window.onload =function () {console.log("窗口加载完成!")}
/*  窗口大小改变时 事件 */window.onresize = function () {console.log("窗口大小正在发送生改变");}

在这里插入图片描述

二、表单事件

表单事件
oninput当文本框内容改变时 ,立即将改变内容 输出在控制台
onchange内容改变事件
onclick鼠标单击时触发此事件

oninput :当文本框内容改变时 ,立即将改变内容 输出在控制台

<!--oninput 当文本框内容改变时  ,立即将改变内容 一个个的输出在控制台 -->
<input type="text" id="userCode" oninput="console.log(document.getElementById('userCode').value);">

在这里插入图片描述

onchange: 内容改变事件

<!--onchange 内容改变事件-->
<input type="text" id="a1" onchange ="console.log(document.getElementById('a1').value);">

在这里插入图片描述

onclick:鼠标单击时触发此事件

<input type="button" value="点我!" onclick="console.log('被点击')">

在这里插入图片描述

三、键盘事件

键盘事件
onkeydown当键盘上的某个按键被按下时触发此事件
onkeyup当键盘上的某个按键被按下后(长按不会触发)按键回弹才会触发此事件
onkeyup按下某个按键后触发(长按也能触发)

onkeydown:当键盘上的某个按键被按下时触发此事件

 //  键盘按下事件,把回车键值输出改为'按下了回车'window.onkeydown = function (event) {// 解决兼容问题event = event || window.event;console.log("键盘按下了" + event.keyCode);if (event.keyCode === 13) {console.log('按下了回车');}}

在这里插入图片描述

onkeyup:当键盘上的某个按键被按下后(长按不会触发)按键回弹才会触发此事件

 /* onkeyup: 当松开按键时 触发 */window.onkeyup = function (event) {event = event || window.event;console.log("键盘按下了" + event.keyCode);if (event.keyCode === 13) {console.log('按下了回车');}}

onkeypress:按下某个按键后触发(长按也能触发)

/*onkeypress:按下某个按键后触发(长按也能触发)*/window.onkeypress = function (event) {event = event || window.event;console.log("键盘按下了" + event.keyCode);if (event.keyCode == 13) {console.log('按下了回车');}}

在这里插入图片描述

四、鼠标事件

鼠标事件
onclick鼠标单击时触发此事件
ondblclick鼠标双击时触发此事件
onmousedown鼠标按下时触发此事件
onmouseup鼠标弹起时触发的事件
onmouseover鼠标移动到某个设置了此事件的元素上时触发此事件
onmousemove鼠标移动时触发此事件
onmouseout鼠标从某个设置了此事件的元素上离开时触发此事件
onmousewheel当鼠标的滚轮运行时

onclick:鼠标单击时触发此事件

<input type="button" value="点我!" onclick="console.log('被点击')">

在这里插入图片描述

ondblclick:鼠标双击时触发此事件

<input type="button" value="双击我!" ondblclick="console.log('被双击')">

在这里插入图片描述

onmousedown:鼠标按下时触发此事件(长按触发不了事件)

<input type="button" value="点我!" onmousedown="console.log('被点击')">

在这里插入图片描述

onmouseup:鼠标弹起时触发的事件

<input type="button" value="点我!" onmouseup="console.log('被点击')">

在这里插入图片描述

onmouseover:鼠标移动到某个设置了此事件的元素上时触发此事件

/*移动到按钮上面触发*/
<input type="button" value="点我!" onmouseover="console.log('移动')">

在这里插入图片描述

onmousemove:鼠标移动时触发此事件

/*在控键范围内移动都能触发*/
<input type="button" value="点我!" onmousemove="console.log('移动')">

在这里插入图片描述

onmouseout:鼠标从某个设置了此事件的元素上离开时触发此事件

/*鼠标进入控键元素再移出控键元素触发*/
<input type="button" value="点我!" onmouseout="console.log('移开控件')">

在这里插入图片描述

onmousewheel:鼠标的滚轮运行时触发

 window.onmousewheel=function (){console.log("鼠标的滚轮运行时");}

在这里插入图片描述
总结:
其实JavaScript的事件作用给用户带来了很多便捷,我们也可以更方便的收集到用户的信息,单词虽多,但也有规律

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

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

相关文章

Arduino串口发送接收和串口中断事件

目录 一、硬件介绍 1、控制器 2、TTL转USB串口 二、软件程序 1、单片机发送字符串 &#xff08;1&#xff09;每个串口对应的类名称介绍 &#xff08;2&#xff09;发送功能 &#xff08;3&#xff09;代码 &#xff08;4&#xff09;测试 2、单片机接收字符串 &…

【Linux Shell学习笔记】Linux She的流控制

1、 if条件判断 1.1 格式 1.1.1 单分支 if [ 判断表达式 ];then 代码块 fi 1.1.2 双分支 if [ 判断表达式 ];then 代码1 else 代码2 fi 1.1.3 多分支 if [ 判断表达式1 ];then 代码1 elif [ 判断表达式2 ];then 代码2 elif [ 判断表达式3 ];then 代…

Kafka:本地设置

这是设置 Kafka 将数据从 Elasticsearch 发布到 Kafka 主题的三部分系列的第一部分;该主题将被 Neo4j 使用。第一部分帮助您在本地设置 Kafka。第二部分将讨论如何设置Elasticsearch将数据发布到Kafka主题。最后 将详细介绍如何使用连接器订阅主题并使用数据。 Kafka Kafka 是…

Linux重启命令介绍

下面介绍在 Linux 操作系统中重启和关闭相关的命令&#xff1a;shutdown、reboot、init、halt、poweroff、systemctl&#xff0c;你可以根据需要来选择适合的 Linux 命令关闭或重新启动系统。其中 shutdown、halt、poweroff、reboot 命令是用来停机、重启或切断电源&#xff0c…

JavaScript中实现页面跳转的几种常用方法

Hi i,m JinXiang ⭐ 前言 ⭐ 本篇文章主要介绍在JavaScript中实现页面跳转的几种常用方法以及部分理论知识 &#x1f349;欢迎点赞 &#x1f44d; 收藏 ⭐留言评论 &#x1f4dd;私信必回哟&#x1f601; &#x1f349;博主收将持续更新学习记录获&#xff0c;友友们有任何问题…

第二百三十四回

文章目录 1.概念介绍2.使用方法2.1 NumberPicker2.2 CupertinoPicker 3.示例代码4.内容总结 我们在上一章回中介绍了"如何在任意位置显示PopupMenu"相关的内容&#xff0c;本章回中将介绍如何实现NumberPicker.闲话休提&#xff0c;让我们一起Talk Flutter吧。 1.概念…

《Spring Cloud学习笔记:分布式事务Seata》

1.分布式事务理论基础 1.1.本地事务 本地事务&#xff0c;也就是传统的单机事务&#xff0c;在传统的数据库事务中&#xff0c;必须要满足ACID四个原则&#xff1a; 1.2.分布式事务 分布式事务&#xff0c;就是指不是在单个服务或单个数据库架构下产生的事务。 分布式事务是…

Java解决统计有序矩阵中的负数问题

Java解决统计有序矩阵中的负数问题 01 题目 给你一个 m * n 的矩阵 grid&#xff0c;矩阵中的元素无论是按行还是按列&#xff0c;都以非递增顺序排列。 请你统计并返回 grid 中 负数 的数目。 示例 1&#xff1a; 输入&#xff1a;grid [[4,3,2,-1],[3,2,1,-1],[1,1,-1,-…

状态模式-举例

在软件系统中&#xff0c;有些对象也像水一样具有多种状态&#xff0c; 这些状态在某些情况下能够相互转换&#xff0c; 而且对象在不同的状态下也将具有不同的行为。 参考日志来设置状态。 如何判断一个设计模式是行为模式还是什么其他模式&#xff1f; 什么叫行为模式&#…

蓝桥圣诞树(C++)

问题描述 输入样例&#xff1a; 1 3 101 1 2 2 3 输出样例&#xff1a; YES 思路&#xff1a; 这道题还是比较好想的&#xff0c;因为它构造的二叉树是用边连接起来的&#xff0c;不是像之前一样从上到下从左到右按编号构造的&#xff0c;所以可以用邻接表来存每个点还有边&am…

[spark] 将dataframe中的数据插入到mysql

文章目录 分区写入 foreachPartition直接写入 write.jdbc()有没有插入成功在插入时记录行数 累加器 分区写入 foreachPartition 在Spark中&#xff0c;你可以使用foreachPartition或foreach来将DataFrame中的数据插入到MySQL数据库。以下是一个基本的Scala代码示例&#xff0c…

模板 BIEE (一):模板插入数据遇到的问题和解决方案

1 说明 1.1 环境 BIEE: Oracle Business Intelligence Enterprise Edition(Oracle商业智能企业版) 版本: OBIEE 12c Server 版本: 基于Oracle Analytics Server 6.4.0 版本 模板: 制造→生产成本→按前 10 个 GL 帐户列出的生产成本 1.2 问题 不熟悉Tools根据已插入的…

一个用于并发批量执行大量关键字的robot framework库。

这个库用于并发批量执行大量robot framework关键字。从而缩短案例执行时间。 使用concurrent.futures.ProcessPoolExecutor进程池并发执行同一个robot framework关键字很多次。 源代码如下&#xff1a; import concurrent.futuresfrom robot.libraries.BuiltIn import Built…

腾讯云价格计算器,一键计算精准报价,好用!

腾讯云价格计算器&#xff1a;可以计算腾讯云服务器不同CVM实例规格、CPU内存、公网带宽和系统盘费用明细表&#xff0c;可以一键计算出精准报价明细表&#xff0c;腾讯云服务器网txyfwq.com分享大家腾讯云服务器价格计算器入口链接、使用方法及限制说明&#xff1a; 腾讯云服…

网络攻击之-暴力破解/密码喷射流量告警运营分析篇

本文从暴力破解/密码喷射的定义,暴力破解/密码喷射的流量数据包示例,暴力破解/密码喷射的suricata规则,暴力破解/密码喷射的告警研判,暴力破解/密码喷射的处置建议等几个方面阐述如何通过IDS/NDR,态势感知等流量平台的暴力破解/密码喷射类型的告警的线索,开展日常安全运营…

【SD】语法格式 分析

正确语法&#xff1a; //人物 best quality,masterpiece,solo,1boy,male focus, //人物形容 blue long hair,katana,muscular,fingerlessgloves,samurai,japanese armor,chibi,full body,blood, //背景 模型 red background,<lora:CHIBI:0.35>, 错误语法&#…

D. Unnatural Language Processing

题目&#xff1a; D. Unnatural Language Processing 每次测试的时间限制1秒钟 每次测试的内存限制256兆字节 投入标准输入 输出标准输出 露拉觉得很无聊&#xff0c;决定用这五个字母创造一种简单的语言a, b, c, d, e。有两种类型的信件: 元音—信件a和e。他们由以下人员代表…

Python 操作 MySQL:使用 mysql-connector-python 操作 MySQL 数据库

大家好&#xff0c;我是水滴~~ 当涉及到使用 Python 操作 MySQL 数据库时&#xff0c;mysql-connector-python 库是一个强大而常用的选择。该库提供了与 MySQL 数据库的交互功能&#xff0c;使您能够执行各种数据库操作&#xff0c;如连接数据库、执行查询和插入数据等。在本文…

第十一章 Stream消息驱动

Stream消息驱动 gitee:springcloud_study: springcloud&#xff1a;服务集群、注册中心、配置中心&#xff08;热更新&#xff09;、服务网关&#xff08;校验、路由、负载均衡&#xff09;、分布式缓存、分布式搜索、消息队列&#xff08;异步通信&#xff09;、数据库集群、…

maven命令行安装依赖测试

mvn dependency:get -DgroupIdorg.springframework -DartifactIdspring-core -Dversion5.3.9作用&#xff1a;可用于测试配置环境变量后&#xff0c;能否下载依赖到本地仓库