JavaScript事件

事件

事件-表单

元素获得焦点

onfocus: onfocus 事件在对象获得焦点时发生。鼠标点击获取焦点是发生

onblur: onblur 事件发生在对象失去焦点时,比如说你有个文本框,你鼠标点击进去,只有在离开的时候才会执行onblur事件

let userCode = document.getElementById("userCode");
userCode.onfocus = function () {this.style.background = 'red'
}
userCode.onblur = function () {this.style.background = 'green'
}
内容改变事件

onchange:当元素的值发生改变时,会发生 onchange 事件。对于单选框和复选框,在被选择的状态改变时,发生 onchange 事件。

oninput: oninput 事件在用户输入时触发。该事件在 或 元素的值发生改变时触发。

    //当鼠标离开文本框时,当内容改变时userCode.onchange = function () {console.log(this.value)}//当文本框内容改变时 执行userCode.oninput = function () {console.log(this.value)}

不同之处在于 oninput 事件在元素值改变后立即发生,而 onchange 在元素失去焦点而内容发生改变后发生。另一个区别是 onchange 事件也适用于 元素。

表单的提交事件

onsubmit:onsubmit 事件在表单提交时触发。

// 表单的提交事件
myForm.onsubmit = function () {if (userCode.value == null){return false; // 阻止表单提交}return true; // 提交表单
}
当文本框内容被选中时

onselect:onselect 事件发生在元素中的文本被选中之后。

onselect 事件主要用于 或 元素。

    userCode.onselect = function () {console.log("已经选择了文本框内容")}

事件-窗口

窗口焦点变化

onblur:事件发生在对象失去焦点时。

onfocus:事件发生在对象获得焦点时。

onblur 事件类似于 onfocusout 事件。主要区别在于 onblur 事件不会冒泡。因此,如果您想找出元素或其子元素是否失去焦点,可以使用 onfocusout 事件。但是,您可以通过使用 onblur 事件的 addEventListener() 方法的 useCapture 参数(可选)来实现这一点。

    window.onblur = function (){console.log("窗口失去焦点")}window.onfocus = function () {console.log("窗口获得焦点")}
窗口加载完成

onload: onload 事件在对象被加载后发生。

    window.onload = function () {console.log("窗口加载完成")}
窗口大小改变时间

onresize:onresize 事件发生在窗口大小发生改变时

    window.onresize = function () {console.log("窗口的大小发生改变")}

事件-键盘

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<input type="text" id="text"/>
<script>let text = document.getElementById("text");</script>
</body>
</html>
键盘按下事件

onkeydown:onkeydown 事件会在用户按下一个键盘按键时发生。

    text.onkeydown =function (event) {// console.log(event.code);console.log(event.key);// console.log(event.keyCode);}
键盘松开事件

onkeyup: onkeyup 事件会在用户松开键盘时发生。

    text.onkeyup =function (event) {// console.log(event.code);console.log(event.key);// console.log(event.keyCode);}
键盘按下并送开事件

onkeypress:onkeypress 事件会在键盘按键被按下并释放一个键时发生

    text.onkeypress =function (event) {// console.log(event.code);console.log(event.key);// console.log(event.keyCode);}

他们三者的触发顺序是

  1. onkeydown
  2. onkeypress
  3. onkeyup

事件-鼠标

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="box" style="color: white;overflow: auto;width: 200px;height: 200px;background-color: black;"><div id="box2" style="width: 100px;height: 100px;background-color: pink;"></div>这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字
</div>
<script type="text/javascript">let box = document.getElementById("box");let box2 = document.getElementById("box2");</script>
</body>
</html>
鼠标点击事件

onclick :onclick 事件在用户单击元素时发生。

    box.onclick = function () {console.log("用户单击了容器");}

ondblclick:ondblclick 事件在用户双击元素时发生。

    box.ondblclick = function () {console.log("用户双击了容器");}
鼠标移动事件

onmousemove:onmousemove 鼠标在容器中移动时触发

    box.onmousemove = function () {console.log("鼠标的指针移动时")}

onmouseover:onmouseover 事件发生在鼠标指针移动到元素或它的子元素上时

    box.onmouseover = function () {console.log("鼠标的指针移动到了容器中A")}box2.onmouseover = function () {console.log("鼠标的指针移动到了容器中B")}

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

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

相关文章

【原创】Qt库open62541 MinGW编译

一、前言 为了统一公司的驱动层开发&#xff0c;准备采用OpcUA的方式转发底层数据&#xff0c;而服务器有Windows Server&#xff0c;也有CentOS&#xff0c;因此想用Qt开发一个基于MinGW的OpcUA Server&#xff0c;这样就能跨平台部署。这里记录一下&#xff0c;希望对你也有用…

Compose | UI组件(十五) | Scaffold - 脚手架

文章目录 前言一、Scaffold脚手架简介二、Scaffold的主要组件三、如何使用Scaffold四、Compose中Scaffold脚手架的具体例子例子1&#xff1a;基本Scaffold布局例子2&#xff1a;带有Drawer的Scaffold布局例子3&#xff1a;带有Snackbar的Scaffold布局 总结 前言 Compose中的Sca…

Python循环语句——for循环临时变量作用域

一、引言 在Python编程中&#xff0c;变量是程序运行的核心。其中&#xff0c;临时变量扮演着重要的角色&#xff0c;用于存储中间结果或临时数据。然而&#xff0c;这些临时变量并非随意存在&#xff0c;它们受到作用域的限制。了解临时变量的作用域对于编写高效、可维护的代…

神经网络 | 常见的激活函数

Hi&#xff0c;大家好&#xff0c;我是半亩花海。本文主要介绍神经网络中必要的激活函数的定义、分类、作用以及常见的激活函数的功能。 目录 一、激活函数定义 二、激活函数分类 三、常见的几种激活函数 1. Sigmoid 函数 &#xff08;1&#xff09;公式 &#xff08;2&a…

代码随想录算法训练营第三十天 回溯算法总结、332.重新安排行程、51. N皇后、37. 解数独

代码随想录算法训练营第三十天 | 回溯算法总结、**332.重新安排行程、**51. N皇后、37. 解数独 回溯算法总结 回溯就是递归的副产品&#xff0c;只要有递归就会有回溯 回溯就是一个暴力搜索法&#xff0c;并不是什么高效的算法 回溯算法的题目分类&#xff1a; 组合&#…

LeetCode 第28天

93. 复原 IP 地址 这题挺难的&#xff0c;实际上我觉得分割字符串的题都挺难的&#xff0c;即使知道了回溯算法&#xff0c;也是无从下手。因为要对字符串进行处理&#xff0c;关于分割点不知道怎么处理。关键部分理解在代码里。 class Solution { private: // 判断分割的子串…

GPT每日面试题—如何理解JS原型链

充分利用ChatGPT的优势&#xff0c;帮助我们快速准备前端面试。今日问题&#xff1a;如何理解JS原型链&#xff1f; Q&#xff1a;如果在前端面试中&#xff0c;被问到如何理解JS原型链&#xff0c;怎么回答比较好&#xff1f; A&#xff1a;当面试官问到如何理解 JavaScript …

12.03 校招 实习 内推 面经

绿*泡*泡VX&#xff1a; neituijunsir 交流裙 &#xff0c;内推/实习/校招汇总表格 1、自动驾驶一周资讯 - 英伟达自动驾驶中国团队扩招&#xff1b;地平线与安波福首个合作成果取得定点&#xff1b;通用汽车自动驾驶Cruise首席执行官辞职 自动驾驶一周资讯 - 英伟达自动驾…

问题:创业者在组建创业团队时,在个人特征和动机方面更应该注重创业者的( ) #知识分享#微信#媒体

问题&#xff1a;创业者在组建创业团队时&#xff0c;在个人特征和动机方面更应该注重创业者的&#xff08; &#xff09; 参考答案如图所示

hook函数——useState

useState useState是React中的一个Hook函数&#xff0c;用于在函数组件中添加状态。基本使用语法如下&#xff1a; const [state, setState] useState(initialState) state&#xff1a;表示当前状态的值setState&#xff1a;更新状态的函数initialState&#xff1a;初始状态…

为什么是0.1uF电容?

旁路电容是电子设计中常用的电容器之一&#xff0c;主要用于过滤电源噪声和稳定电源电压。在实际应用中&#xff0c;0.1uF电容器是最常用的旁路电容值之一&#xff0c;那么为什么常用旁路电容是0.1uF而不是其他值&#xff1f;这个值又是怎么来的呢&#xff1f;本文将深入探讨这…

基于微信小程序的校园二手交易平台

博主介绍&#xff1a;✌程序员徐师兄、7年大厂程序员经历。全网粉丝12w、csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专栏推荐订阅&#x1f447;…

【Java基础常见面试题】- Java SE vs Java EE

Java SE vs Java EE Java SE&#xff08;Java Platform&#xff0c;Standard Edition&#xff09;: Java 平台标准版&#xff0c;Java 编程语言的基础&#xff0c;它包含了支持 Java 应用程序开发和运行的核心类库以及虚拟机等核心组件。Java SE 可以用于构建桌面应用程序或简…

UDP 用户数据报协议

目录 1 UDP 1.1 UDP 的主要特点 1.1.1 UDP 是面向报文的 1.1.2 UDP 通信和端口号的关系 1.2 UDP 的首部格式 1.2.1 UDP 基于端口的分用 1.3 UDP抓包 1 UDP UDP 只在 IP 的数据报服务之上增加了一些功能&#xff1a; 1.复用和分用 2.差错检测 1.1 UDP 的主要特点 1.无连…

PSM-Net根据Stereo图像生成depth图像

一、新建文件夹 在KITTI数据集下新建depth_0目录 二、激活anaconda环境 conda activate pt14py37三、修改submission.py文件 3.1 KITTI数据集路径 parser.add_argument(--datapath, default/home/njust/KITTI_DataSet/00/, helpselect model)3.2 深度图像输出路径 save…

Vision Pro新机测评!“这才是MR硬件该有的模样!”

期盼很久的Vision Pro终于到了&#xff0c;小编迫不及待地体验了一把&#xff0c;效果相当非常震撼&#xff0c;操作非常丝滑&#xff0c;画面非常清晰…来不急解释了&#xff0c;快和小编一起来看一下吧~ 新机一到公司&#xff0c;为解大家对Vision Pro 的“相思之苦”&#x…

一篇文章理解时间复杂度和空间复杂度

今天也是很开心的学到了数据结构&#xff0c;也是打算把我自己对知识的理解给写出来了。第一篇数据结构开始咯。开始之前我们先理解一个概念。 什么是算法效率&#xff1f; 算法效率是指算法执行的速度或完成任务所需的资源&#xff08;如时间和空间&#xff09;的度量。它通…

Pymysql之Cursor常用API

Cursor常用API 1、cursor.execute(query, argsNone)&#xff1a;执行sql语句。 参数: query (str)&#xff1a;sql语句。 args (tuple, list or dict)&#xff1a;sql语句中如果有变量&#xff0c;或者格式化输出&#xff0c;会在这里填充数据。 Returns&#xff1a;返…

2.8 假期作业

1.变量的指针&#xff0c;其含义是指该变量的 B 。 A&#xff09;值 B&#xff09;地址 C&#xff09;名 D&#xff09;一个标志 2.已有定义int k2;int *ptr1,*ptr2;且ptr1和ptr2均已指向变量k&#xff0c;下面不能正确执…

日志报错 git -c dif.mnemonicprefix=false -c core.guotepath=false 解决方法

前言: 在进行下面操作前,必须确保,你是否安装了Git。 查看Git 在命令行窗口中输入`git --version`: 如果这个命令成功显示了Git的版本信息,这表明Git已经被安装。 1. 使用Sourcetree SourceTree 是 Windows 和Mac OS X 下免费的 Git 和 Hg 客户端…