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、单片机接收字符串 &…

Kafka:本地设置

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

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

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

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

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

状态模式-举例

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

蓝桥圣诞树(C++)

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

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

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

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;能否下载依赖到本地仓库

前后端分离架构的特点以及优缺点

文章目录 一、前后端不分离架构(传统单体结构)1.1 什么是前后端不分离1.2 工作原理1.3 前后端不分离的优缺点1.4 应用场景 二、前后端分离架构2.1 为什么要前后端分离2.2 什么是前后端分离2.3 工作原理2.4 前后端分离的优缺点 参考资料 一、前后端不分离架构(传统单体结构) 首…

【linux】cut的基本使用

cut主要用于按列切分文本行&#xff0c;并输出指定的字段&#xff0c;这是类unix系统中常用的文本处理工具。 基本使用 首先随便去网上找个文本或者列表文件 如果使用cat看文本的话就是这样的 sh-3.2# cat data.csv Name,Age,City,Salary Alice,30,New York,70000 Bob,25,L…

C++ 侯捷 内存管理

C 的内存获取机制&#xff1a; void* p1 malloc(512); free(p1);complex<int>* p2 new complex<int>; delete p2;void* p3 ::operator new(512); ::operator delete(p3);//GNUC void* p4 alloc::allocate(512); alloc::deallocate(p4, 512);//GNUC4.9 void* p5…

Hbase详解

Hbase 概念 base 是分布式、面向列的开源数据库&#xff08;其实准确的说是面向列族&#xff09;。HDFS 为 Hbase 提供可靠的底层数据存储服务&#xff0c;MapReduce 为 Hbase 提供高性能的计算能力&#xff0c;Zookeeper 为 Hbase 提供稳定服务和 Failover 机制&#xff0c;…

OR-NeRF论文笔记

OR-NeRF论文笔记 文章目录 OR-NeRF论文笔记论文概述Abstract1 Introduction2 Related Work3 Background4 Method4.1 Multiview Segmentation4.2 Scene Object Removal 5 ExperimentsDatasetsMetricsMultiview SegmentationScene Object Removal 6 Conclusion 论文概述 目的&am…

【软件工程】漫谈增量过程模型:软件开发的逐步之道

&#x1f34e;个人博客&#xff1a;个人主页 &#x1f3c6;个人专栏&#xff1a; 软件工程 ⛳️ 功不唐捐&#xff0c;玉汝于成 目录 前言&#xff1a; 正文 增量过程模型&#xff08;Incremental Process Model&#xff09; 主要特点和阶段&#xff1a; 优点&#xff1…

TCP 协议为什么要设计三次握手 TCP 协议,是一种可靠的,基于字节流的,面向连接的传输层协议。

文章目录 TCP 协议为什么要设计三次握手TCP 协议&#xff0c;是一种可靠的&#xff0c;基于字节流的&#xff0c;面向连接的传输层协议。TCP 通信双方的数据传输是通过字节流来实现传输的客户端向服务端发送连接请求并携带同步序列号 SYN。 今天我们来谈谈tcp的三次握手 TCP 协…

Vue2+element-ui 实现select选择器结合Tree树形控件实现下拉树效果

效果&#xff1a; DOM部分 &#xff1a; // 设置el-option隐藏的下拉选项&#xff0c;选项显示的是汉字label&#xff0c;值是value // 如果不设置一个下拉选项&#xff0c;下面的树形组件将无法正常使用 <el-form-item label"报警区域" prop"monitorId"…

如何让python在手机上运行,python程序在手机上运行

大家好&#xff0c;给大家分享一下python怎么在手机上运行爱心代码&#xff0c;很多人还不知道这一点。下面详细解释一下。现在让我们来看看&#xff01; 1. 写在前面的话 天天都在PC端运行Python代码的我&#xff0c;今天突然灵光一现&#xff0c;想着是不是能够在移动端运行P…

CSS 缩减顶部

<template><!-- mouseenter"startAnimation" 表示在鼠标进入元素时触发 startAnimation 方法。mouseleave"stopAnimation" 表示在鼠标离开元素时触发 stopAnimation 方法。 --><!-- 容器元素 --><div class"container" mou…