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://xiahunao.cn/news/2661769.html

如若内容造成侵权/违法违规/事实不符,请联系瞎胡闹网进行投诉反馈,一经查实,立即删除!

相关文章

Spring高手之路-SpringIOC

目录 何为IOC IOC的优点 Spring的IOC 补充 IOC是如何实现的&#xff1f; 何为IOC 所谓的IOC&#xff08;inversion of control&#xff09;&#xff0c;就是控制反转的意思。何为控制反转&#xff1f; 在传统的程序设计中&#xff0c;应用程序代码通常控制着对象的创建和管…

面试算法77:链表排序

题目 输入一个链表的头节点&#xff0c;请将该链表排序。 分析 归并排序的主要思想是将链表分成两个子链表&#xff0c;在对两个子链表排序后再将它们合并成一个排序的链表。 这里可以用快慢双指针的思路将链表分成两半。如果慢指针一次走一步&#xff0c;快指针一次走两步…

docker-compose部署zabbix服务

1.首先要有docker环境&#xff0c; 关闭防火墙&#xff0c;selinux 开启docker&#xff0c;并设置开机自启动 Linux的docker的安装https://blog.csdn.net/m0_58146415/article/details/134654933 2.docker-compose的安装----github下载 curl -SL https://github.com/docke…

JavaSE语法之十一:接口(超全!!!)

文章目录 1. 概念2. 语法规则3. 接口使用4. 接口特性5. 实现多个接口6. 接口间的继承7. 接口使用实例8. Clonable 接口和深拷贝9. 抽象类和接口的区别&#xff08;重要&#xff01;&#xff09; 1. 概念 在现实生活中的接口比比皆是&#xff0c;如&#xff1a;笔记本上的USB接…

批量抠图软件哪个好用?推荐这三款抠图工具给你

在数字图像处理的世界里&#xff0c;抠图是个不可或缺的环节。对于那些经常需要从复杂背景中提取主体的设计师和摄影师来说&#xff0c;抠图技巧无疑是一项宝贵的职业技能。然而&#xff0c;当面对大量的抠图需求时&#xff0c;手动处理不仅耗时&#xff0c;而且效率低下。因此…

css+js实现鼠标移动边框高亮效果

前言&#xff1a;效果是鼠标移入空白区域&#xff0c;边框高亮的效果。效果是在douyin的渡一教育袁老师的课程学习到的&#xff0c;观看以后是一个实用的小特效。想看的可以平台查询&#xff0c;自己也学到了知识。 <!DOCTYPE html> <html lang"en"> <…

javascript之location常用属性和方法

文章目录 前言为什么使用location的属性和方法呢&#xff1f;属性展示hrefhosthostnameportprotocolpathname 方法展示replace(url)assign(url)reload()toString() 总结属性总结&#xff1a;方法总结&#xff1a; 前言 本章学习的是location常用属性和方法 为什么使用location的…

Wish流量推送规则是什么?wish怎么增加流量?-站斧浏览器

Wish流量推送规则是什么&#xff1f; 个性化推送&#xff1a;Wish采用智能化的算法&#xff0c;根据用户的购物历史、浏览记录、搜索行为等数据&#xff0c;为每位用户推送个性化的商品推荐。这种推送方式能够提高商品与用户的匹配度&#xff0c;从而提高转化率。 价格与销量…

KSO-SAP ABAP调用远程RFC函数详细过程

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言RFC几种调用模式1. 同步RFC2. 异步RFC3. 事务性RFC4. 队列RFC5. 并行RFC 一、创建远程链接SM59&#xff08;对方也是sap系统&#xff09;创建目标主机&#xff…

React Hooks 面试题 | 04.精选React Hooks面试题

&#x1f90d; 前端开发工程师&#xff08;主业&#xff09;、技术博主&#xff08;副业&#xff09;、已过CET6 &#x1f368; 阿珊和她的猫_CSDN个人主页 &#x1f560; 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》 &#x1f35a; 蓝桥云课签约作者、已在蓝桥云…

互斥量介绍

队列 环形缓冲区 休眠唤醒 信号量全局整数 休眠唤醒 互斥量全局整数 休眠唤醒 优先级继承 什么叫优先级继承 优先级翻转 也就是C想获得A的锁&#xff0c;但是A的锁还没有被释放&#xff0c;所以C进入了阻塞状态&#xff0c;这时候B就来执行。B一直也没有停下来。所以A也…

【全网最详细】手把手教学Charles抓包工具详细自学教程,完整版安装教程,详细介绍工具栏如何使用及实战案例(建议收藏)

Charles抓包工具 【1】Charels简介【2】Charles安装Charles客户端下载下载安装完成后激活Charles配置苹果系统操作 【3】什么是证书&#xff1f;为何需要证书&#xff1f;http协议是不安全的使用对称秘钥进行数据加密非对称秘钥加密小技巧 【4】Charles 乱码解决办法1.解决resp…

2023-12-29 工作心得补充 适时抽取方法,让代码变简洁

1 JSONObject 实际上是个map 2 数据库实际上也是map 只不过map 是竖着写&#xff0c;数据库横着写. 3 像 用户名 密码 这种后续可能随时会改的&#xff0c;不要写死在代码里&#xff0c;都写成nacos参数。 4 方法的抽取 让代码变得简洁 可读性很高。这是方法抽取的秘诀。写文…

鸿蒙开发之崩溃信息收集FaultLogger

前申&#xff1a;果然系统的API没有让我失望&#xff0c;日志完全看不出来崩溃原因所在 一、使用 logCrash() {FaultLogger.query(FaultLogger.FaultType.JS_CRASH,(err,val) > {if (err) {console.log(fault log get an errJSON.stringify(err))return}let len val.lengt…

SpringBoot+AOP+Redis 防止重复请求提交

本文项目基于以下教程的代码版本&#xff1a; https://javaxbfs.blog.csdn.net/article/details/135224261 代码仓库: springboot一些案例的整合_1: springboot一些案例的整合 1、实现步骤 2.引入依赖 我们需要redis、aop的依赖。 <dependency><groupId>org.spr…

大厂整理的23年前端工程师面试手册,高频面试题终结篇,github上标星16k!

前端开发所需掌握知识点概要&#xff1a; HTML&CSS&#xff1a;浏览器内核、渲染原理、依赖管理、兼容性、CSS语法、层次关系&#xff0c;常用属性、布局、选择器、权重、CSS盒模型、Hack、CSS预处理器、CSS3动画 JavaScript&#xff1a; 数据类型、运算、对象、Function、…

【JavaWeb学习-第四章(2)】前后端分离开发 前端工程化

文章目录 1. 前后端分离开发1.1. 介绍1.2. YAPI1.2.1. YAPI 介绍1.2.2. 接口文档管理 3. 前端工程化3.1. 介绍3.2. 前端工程化入门3.2.1. 环境准备3.2.1.1. NodeJS安装3.2.1.2. Vue-cli 安装 3.2.2. Vue项目简介3.2.2.1. 创建vue项目3.2.2.2. vue项目之目录结构介绍3.2.2.3. 运…

Python高级用法:生成器(generator)

生成器&#xff08;generator&#xff09; 生成器是一种返回生成序列的方法&#xff0c;与直接使用列表等方式返回序列的方式不同的是&#xff0c;他的生成可以是无限的。 生成器可以与next搭配使用&#xff0c;可以被看作是一种特殊的迭代器。 yield语句 yield一般与循环相…

CNAS中兴新支点——源代码审计对企业有哪些好处?

源代码扫描&#xff0c;对应用程序进行静态漏洞扫描&#xff0c;分析源代码中存在的安全风险&#xff0c;运行应用于模拟器中对应用进行实时漏洞攻击检测。 你是否了解源代码扫描对企业的好处&#xff1f; 一、源代码扫描&#xff0c;通常能够帮助企业解决这些问题&#xff1…

pycharm用Pipenv创建项目

一、pipenv介绍 pipenv是一个python的包管理工具&#xff0c;提供python的各个版本间的管理&#xff0c;各种包管理。官网 pipenv主要有以下特点&#xff1a; pipenv集成了pip&#xff0c;virtualenv两者的功能。pipenv会在项目根目录下创建Pipfile文件用于记录包的版本信息…