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的事件作用给用户带来了很多便捷,我们也可以更方便的收集到用户的信息,单词虽多,但也有规律

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

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

相关文章

基于Python的短视频APP大学生用户数据分析预测

温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长 QQ 名片 :) 1. 项目背景 本项目以国内高校大学生在一段时间内对某短视频平台的使用数据为基础。通过数据分析和建模方法&#xff0c;我们深入挖掘这些数据中所蕴含的信息&#xff0c;以实现对高校和大学生维度的统计分析。…

演员-评论家算法:多智能体强化学习核心框架

演员-评论家算法 演员-评论家算法&#xff1a;策略梯度算法 DQN 算法演员-评论家的协作流程演员&#xff1a;策略梯度算法计算智能体策略预期奖励的梯度公式分解时间流程拆解 通过采样方法近似估计梯度公式拆解时间流程拆解 改进策略设置基线&#xff1a;适用于减小方差、加速…

Flowable中6种部署方式

1. addClasspathResource src/main/resources/processes/LeaveProcess.bpmn20.xml Deployment deploy repositoryService.createDeployment().name("请假审批").addClasspathResource("processes/LeaveProcess.bpmn20.xml").deploy();2. addInputStream…

简述计算机⽹络七层模型和各⾃的作⽤?

这张图大家看下就好了&#xff0c;慢慢学习了解上面的东西就好&#xff0c;在面试中需要回答以下内容&#xff1a; 物理层&#xff1a;主要负责通过物理媒介传输⽐特流&#xff0c;如电缆、光纤、⽆线电波等。物理层规定了物理连接的规范&#xff0c;包括电缆的类型、接⼝的规范…

苹果Mac电脑甘特图管 EasyGantt最新 for mac

EasyGantt提供直观的界面&#xff0c;让用户能够轻松创建具有时间轴视图的甘特图。你可以添加并排列任务、设置任务的开始和结束日期、调整任务之间的依赖关系等。 任务管理&#xff1a;软件允许你添加、编辑和删除任务&#xff0c;设定任务的优先级和状态&#xff0c;并为每个…

Decorator装饰模式(单一责任)

Decorator&#xff08;装饰模式&#xff1a;单一责任模式&#xff09; 链接&#xff1a;装饰模式实例代码 解析 目的 在某些情况下我们可能会“过度地使用继承来扩展对象的功能”&#xff0c;由于继承为类型引入的静态特质&#xff0c;使得这种扩展方式缺乏灵活性&#xff…

web前端 JQuery下拉菜单的案例

浏览器运行结果&#xff1a; JQuery下载&#xff1a; 链接&#xff1a;https://pan.baidu.com/s/17LXZigLQ8yau0toTGj4P_Q?pwd4332 提取码&#xff1a;4332 代码&#xff1a; <!doctype html> <html> <head> <meta charset"UTF-8"><…

超详细YOLOv8图像分类全程概述:环境、训练、验证与预测详解

目录 yolov8导航 YOLOv8&#xff08;附带各种任务详细说明链接&#xff09; 搭建环境说明 数据集准备 项目目录结构展示 不同版本性能对比 模型参数和性能解释 模型对比 训练 执行训练示意代码 训练参数说明 训练正常执行示意 训练结果文件解释 weights args.yaml…

GoogleNet

时间&#xff1a;2014 网络中的亮点&#xff1a; 引入了Inception结构&#xff08;融合不同尺度的特征信息&#xff09;使用11的卷积核进行降维以及映射处理添加两个辅助分类器帮助训练丢弃全连接层&#xff0c;使用平均池化层&#xff08;大大减少模型参数&#xff09; Alex…

高光回眸:阿里云容器服务如何全面助力精彩亚运

作者&#xff1a;刘佳旭 谢乘胜 贤维 引言 2023 年&#xff0c;第 19 届杭州亚运会在杭州成功举办。在亚运之光和科技之光的交相辉映下&#xff0c;这届亚运会成为亚运史上首届“云上亚运”&#xff0c;用云计算创造了历史&#xff0c;赛事核心系统和转播全面上云&#xff0c…

如何使用Spoofy检测目标域名是否存在欺骗攻击风险

关于Spoofy Spoofy是一款功能强大的域名安全检测工具&#xff0c;在该工具的帮助下&#xff0c;广大研究人员可以轻松检测单个目标域名或域名列表中的域名是否存在遭受欺诈攻击的风险。 该工具基于纯Python开发&#xff0c;可以根据SPF和DMARC记录来检测和判断目标域名是否可…

智能分析网关V4+太阳能供电模式,搭建鱼塘养殖远程视频监控方案

一、行业背景 传统的鱼塘养殖模式由于养殖区域面积大、管理难度高&#xff0c;经常会出现偷钓者、盗窃鱼苗、非法入侵等监管难题&#xff0c;给养殖户带来了不小的经济损失。为了解决这些问题&#xff0c;搭建鱼塘远程监控系统成为了必要之举。通过远程监控系统&#xff0c;管…

帆软报表中定时调度中的最后一步如何增加新的处理方式

在定时调度中,到调度执行完之后,我们可能想做一些别的事情,当自带的处理方式不满足时,可以自定义自己的处理方式。 产品的处理方式一共有如下这些类型: 我们想在除了上面的处理方式之外增加自己的处理方式应该怎么做呢? 先看下效果: 涉及到两方面的改造,前端与后端。…

java设计模式学习之【模板方法模式】

文章目录 引言模板方法模式简介定义与用途实现方式 使用场景优势与劣势在Spring框架中的应用游戏设计示例代码地址 引言 设想你正在准备一顿晚餐&#xff0c;无论你想做意大利面、披萨还是沙拉&#xff0c;制作过程中都有一些共同的步骤&#xff1a;准备原料、加工食物、摆盘。…

医院绩效考核系统源码,java源码,商业级医院绩效核算系统源码

医院绩效定义&#xff1a; “医院工作量绩效方案”是一套以工作量&#xff08;RBRVS&#xff0c;相对价值比率&#xff09;为核算基础&#xff0c;以工作岗位、技术含量、风险程度、服务数量等业绩为主要依据&#xff0c;以工作效率和效益、工作质量、患者满意度等指标为综合考…

Linux中磁盘管理与文件系统

目录 一.磁盘基础&#xff1a; 1.磁盘的结构&#xff1a; 2.硬盘的数据结构&#xff1a; 3.硬盘存储容量 &#xff1a; 4.硬盘接口类型&#xff1a; 二.MBR与磁盘分区&#xff1a; 1.MBR的概念&#xff1a; 2.硬盘的分区&#xff1a; 为什么分区&#xff1a; 2.表示&am…

传感器原理与应用复习--磁电式与霍尔传感器

文章目录 上一篇磁电感应传感器工作原理应用 霍尔传感器工作原理基本特性应用 下一篇 上一篇 传感器原理与应用复习–电容式与压电式传感器 磁电感应传感器 工作原理 导体在稳恒均匀磁场中&#xff0c;沿垂直磁场方向运动时&#xff0c;产生的感应电势为 e B l v e Blv …

C++系列-第1章顺序结构-3-输出类cout

C系列-第1章顺序结构-3-输出类cout 在线练习&#xff1a; http://noi.openjudge.cn/ https://www.luogu.com.cn/ 总结 本文是C系列博客&#xff0c;主要讲述输出类cout的用法 cout介绍与基本用法 在C中&#xff0c;cout 是用于输出&#xff08;打印&#xff09;数据的工具&…

[Github-bot]帮助处理issue和PR的github-bot

个人博客:Sekyoro的博客小屋 个人网站:Proanimer的个人网站 在看一些开源项目时,会发现一些帮忙处理issue和PR的bot,这些bot都是基于Github的AppsGitHub Apps overview - GitHub Docs GitHub Apps GitHub应用程序是扩展GitHub功能的工具。GitHub应用程序可以在GitHub上做一些…

【数据结构】快速排序(4种方式实现)

前言&#xff1a;前面我们学习了几种相对比较简单的排序&#xff0c;今天我们要一起学习的是快速排序&#xff0c;我们将通过四种方式来模拟实现快排。 &#x1f496; 博主CSDN主页:卫卫卫的个人主页 &#x1f49e; &#x1f449; 专栏分类:数据结构 &#x1f448; &#x1f4a…