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.rhkb.cn/news/229208.html

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

相关文章

VUE——IDEA 启动前端工程VS文件启动前端工程

IDEA 启动前端 目录 前言一、打开控制台二、输入npm install三、依赖下载完之后&#xff0c;输入npm run dev&#xff0c;运行前端项目1、IDEA启动前端工程2、文件目录启动前端工程 四、点击http://localhost:8080后续敬请期待 前言 启动已有的vue前端项目 一、打开控制台 选…

网络安全-真实ip获取伪造与隐藏挖掘

目录 真实ip获取应用层网络层网络连接TOAproxy protocol ip伪造应用层网络层TOA攻击proxy protocol 隐藏代理 挖掘代理多地ping历史DNS解析记录国外主机解析域名网站RSS订阅网络空间搜索引擎 总结参考 本篇文章学习一下如何服务如何获取真实ip&#xff0c;隐藏自己的ip&#xf…

docker 部署教学版本

文章目录 一、docker使用场景及常用命令1&#xff09;docker使用场景2&#xff09;rocky8(centos8)安装 docker3&#xff09;docker 常用命令补充常用命令 二、 单独部署每个镜像&#xff0c;部署spring 应用镜像推荐&#xff08;2023-12-18&#xff09;1、 安装使用 mysql1.1 …

elasticsearch系列五:集群的备份与恢复

概述 前几篇咱们讲了es的语法、存储的优化、常规运维等等&#xff0c;今天咱们看下如何备份数据和恢复数据。 在传统的关系型数据库中我们有多种备份方式&#xff0c;常见有热备、冷备、全量定时增量备份、通过开发程序备份等等&#xff0c;其实在es中是一样的。 官方建议采用s…

中间件系列 - Redis入门到实战(高级篇-多级缓存)

前言 学习视频&#xff1a; 黑马程序员Redis入门到实战教程&#xff0c;深度透析redis底层原理redis分布式锁企业解决方案黑马点评实战项目 中间件系列 - Redis入门到实战 本内容仅用于个人学习笔记&#xff0c;如有侵扰&#xff0c;联系删除 学习目标 JVM进程缓存Lua语法入…

微软发布安卓版Copilot,可免费使用GPT-4、DALL-E 3

12月27日&#xff0c;微软的Copilot助手&#xff0c;可在谷歌应用商店下载。目前&#xff0c;只有安卓版&#xff0c;ios还无法使用。 Copilot是一款类ChatGPT助手支持中文&#xff0c;可生成文本/代码/图片、分析图片、总结内容等&#xff0c;二者的功能几乎没太大差别。 值…

超详细的企业单位B级数据机房设计方案

一、项目概述 本项目旨在为企业单位构建一个符合B级标准的数据机房&#xff0c;以满足企业信息化建设的需要。项目包括机房基础设施、配电系统、空调系统、消防系统、监控系统、照明系统、网络设备等方面的设计和施工&#xff0c;以确保机房的安全、稳定和高效运行。 二、设计…

数据库索引、三范式、事务

索引 索引&#xff08;Index&#xff09;是帮助 MySQL 高效获取数据的数据结构。常见的查询算法,顺序查找,二分查找,二叉排序树查找,哈希散列法,分块查找,平衡多路搜索树 B 树&#xff08;B-tree&#xff09;。 常见索引原则有 选择唯一性索引&#xff1a;唯一性索引的值是唯…

【k8s】deamonset文件和说明

目录 deamonset的相关命令 deamonset的定义 deamonset的使用场景 deamonset的例子 deamonset字段说明 serviceAccountName DaemonSet的结构及其各个部分的作用 deamonset的相关命令 #查看<name-space>空间内有哪些deamonset kubectl get DaemonSet -n <na…

mfc100u.dll文件丢失,有五种不同解决方法

在计算机使用过程中&#xff0c;我们经常会遇到一些错误提示&#xff0c;其中之一就是“找不到mfc100u.dll文件”。那么&#xff0c;mfc100u.dll文件到底是什么&#xff1f;为什么会出现丢失的情况&#xff1f;本文将详细介绍mfc100u.dll文件的作用以及丢失的原因&#xff0c;并…

IoT 物联网常用协议

物联网协议是指在物联网环境中用于设备间通信和数据传输的协议。根据不同的作用&#xff0c;物联网协议可分为传输协议、通信协议和行业协议。 传输协议&#xff1a;一般负责子网内设备间的组网及通信。例如 Wi-Fi、Ethernet、NFC、 Zigbee、Bluetooth、GPRS、3G/4G/5G等。这些…

数据仓库-数仓优化小厂实践

一、背景 由于公司规模较小&#xff0c;大数据相关没有实现平台化&#xff0c;相关的架构都是原生的Apache组件&#xff0c;所以集群的维护和优化都需要人工的参与。根据自己的实践整理一些数仓相关的优化。 二、优化 1、简易架构图 2、ODS层优化 2.1 分段式解析 随着业务增长…

Docker 概念介绍

1、Docker 简介 Docker一个快速交付应用、运行应用的技术: 可以将程序及其依赖、运行环境一起打包为一个镜像&#xff0c;可以迁移到任意Linux操作系统运行时利用沙箱机制形成隔离容器&#xff0c;各个应用互不干扰启动、移除都可以通过一行命令完成&#xff0c;方便快捷 Doc…

Android 接入第三方数数科技平台

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、数数科技平台是什么&#xff1f;二、使用步骤1.集成SDK2. 初始化3. 发送事件和设置账号id4. 验证发送事件是否成功 小结 前言 一个成熟的App必然不可缺少对…

VSCODE : SSH远程配置+免密登录

SSH基础配置 填入地址&#xff0c;回车 ssh userhost-or-ip 然后选择默认的配置&#xff0c;回车&#xff0c;得到以下结果&#xff1a; 点击链接 选择远程的系统 输入密码 免密登录 生成SSH密钥&#xff1a; 首先&#xff0c;确保你已经在本地生成了SSH密钥。你可以使…

c语言-数据类型详细介绍

目录 前言一、数据类型介绍1.1 基本内置类型 二、类型的基本分类2.1 整型家族2.1.1 signed char表示的数值范围2.1.2 unsigned char表示的数值范围 2.2 浮点数家族2.3 构造类型2.4 指针类型2.5 空类型 总结 前言 本篇文章对c语言中数据类型进行详细介绍。 一、数据类型介绍 1…

Node.js使用jemalloc内存分配器显著减少内存使用

前言 Node.js 默认使用的是 ptmalloc(glibc) 内存分配器&#xff0c;而&#xff1a; 在服务端领域「不会选择默认的 malloc」是一个常识。&#xff08; 来源 &#xff09; ptmalloc 的分配效率较低&#xff08; 来源 &#xff09;&#xff0c;对于 长时间、多核 / 多线程 运行…

nginx+rsyslog+kafka+clickhouse+grafana 实现nginx 网关监控

需求 我想做一个类似腾讯云网关日志最终以仪表方式呈现&#xff0c;比如说qps、p99、p95的请求响应时间等等 流程图 数据流转就像标题 nginx ----> rsyslog ----> kafka —> clickhouse —> grafana 部署 kafka kafka 相关部署这里不做赘述&#xff0c;只要创…

【Linux】进程查看|fork函数|进程状态

&#x1f984; 个人主页——&#x1f390;开着拖拉机回家_Linux,大数据运维-CSDN博客 &#x1f390;✨&#x1f341; &#x1fa81;&#x1f341;&#x1fa81;&#x1f341;&#x1fa81;&#x1f341;&#x1fa81;&#x1f341; &#x1fa81;&#x1f341;&#x1fa81;&am…

uni-app 前后端调用实例 基于Springboot 数据列表显示实现

锋哥原创的uni-app视频教程&#xff1a; 2023版uniapp从入门到上天视频教程(Java后端无废话版)&#xff0c;火爆更新中..._哔哩哔哩_bilibili2023版uniapp从入门到上天视频教程(Java后端无废话版)&#xff0c;火爆更新中...共计23条视频&#xff0c;包括&#xff1a;第1讲 uni…