day13JS-MoseEvent事件

1. MouseEvent的类别

  1. mousedown ：按下键
  2. mouseup ：释放键
  3. click ：左键单击
  4. dblclick ：左键双击
  5. contextmenu ：右键菜单
  6. mousemove ：鼠标移动
  7. mouseover  : 鼠标经过 。 可以做事件委托，子元素可以冒泡给父元素 ，让父元素侦听了mouseover，子元素也是可以触发的。
  8. mouseout  ：鼠标滑开 。可以做事件委托，子元素可以冒泡给父元素 ，让父元素侦听了mouseout，子元素也是可以触发的。
  9. mouseenter ：鼠标进入。
  10.  mouseleave ：鼠标离开。

注意！！！

  • 执行顺序：mousedown —> mouseup —> click
  • 区别：mouseover和mouseout子元素也会触发，可以冒泡触发。
  • 区别：mouseenter和mouseleave是针对侦听的对象触发，阻止了冒泡。

使用案例：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.div1 {width: 100px;height: 100px;background-color: red;position: relative;left: 200px;top: 200px;}.div2 {width: 50px;height: 50px;background-color: orange;position: absolute;left: 25px;top: 25px;}</style>
</head><body><div class="div1"><div class="div2">你好</div></div><script>var div1 = document.querySelector(".div1");div1.addEventListener('mousedown', mouseHandler);div1.addEventListener('mouseup', mouseHandler);div1.addEventListener('click', mouseHandler);div1.addEventListener("mousemove", mouseHandler);div1.addEventListener("dblclick", mouseHandler)div1.addEventListener("contextmenu", mouseHandler);div1.addEventListener("mouseover", mouseHandler);div1.addEventListener("mouseout", mouseHandler);div1.addEventListener("mouseenter", mouseHandler);div1.addEventListener("mouseleave", mouseHandler);function mouseHandler(e) {console.log(e.type);if (e.type === "mousedown") {// 当有文本时，使用阻止默认行为可以禁止选中文本e.preventDefault();} else if (e.type === "contextmenu") {e.preventDefault();}}</script>
</body></html>

2. MoseEvent鼠标事件的属性详解

2.1 第一组事件属性

当鼠标事件触发时，同时按下对应的键。

1. altKey 事件属性返回一个布尔值。指示在指定的事件发生时，Alt 键是否被按下并保持住了。

 altKey使用语法：event.altKey=true|false|1|0 

function isKeyPressed(event){if (event.altKey==1){alert(" ALT 键被按下!");}else{alert(" ALT 键没被按下!");}
}

2. ctrlKey 事件属性可返回一个布尔值，指示当事件发生时，Ctrl 键是否被按下并保持住。

ctrlKey使用语法：event.ctrlKey=true|false|1|0 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body onmousedown="isKeyPressed(event)"><p>单击文档中的某个地方。一个警告框会告诉你你是否按下CTRL键。</p>
<script>
function isKeyPressed(event){if (event.ctrlKey==1){alert("CTRL键被按下!");}else{alert("CTRL键没被按下!");}
}
</script>
</body>
</html>

3. metaKey 事件属性可返回一个布尔值，指示当事件发生时，"meta" 键是否被按下并保持住。metaKey在MAC中是command键。

metaKey使用语法：event.metaKey

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body onmousedown="isKeyPressed(event)"><p>单击文档中的某个地方。一个警告框会告诉你是否你按下meta关键。</p>
<script>
function isKeyPressed(event){if (event.metaKey==1){alert("meta键被按下!");}else{alert("meta键没被按下!");}
}
</script>
</body>
</html>

4. shiftKey 事件属性可返回一个布尔值，指示当事件发生时，"SHIFT" 键是否被按下并保持住。

shiftKey 使用语法：event.shiftKey=true|false|1|0 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title></head>
<body onmousedown="isKeyPressed(event)"><p>点击该段落，弹窗会提示是否按下 shift 键。</p>
<script>
function isKeyPressed(event){if (event.shiftKey==1){alert(" shift 键被按下!");}else{alert(" shift 键没被按下!");}
}
</script>
</body>
</html>

 2.2 第二组事件属性

当使用mousedown，mouseup事件触发时，按下了哪个键

mousedown：当鼠标指针移动到元素上方，并按下鼠标按键（左、右键均可）时，会发生 mousedown事件。

mouseup：当在元素上松开鼠标按键（左、右键均可）时，会发生 mouseup事件。

1. button: 鼠标左键(参数为0时) ，鼠标中键(参数为1时) ，鼠标右键(参数为2时)。button 事件属性可返回一个整数，指示当事件被触发时哪个鼠标按键被点击。

2. buttons: 鼠标左键(参数为1时) ，鼠标中键(参数为3时) ，鼠标右键(参数为2时)。

3. which: 鼠标左键(参数为1时) ，鼠标中键(参数为2时) ，鼠标右键(参数32时)。

2.3 第三组事件属性

1. detail ：用于滚轮滚动触发滚动距离。detail:1。

2. relatedTarget ：失焦聚焦时，上一次触发的元素。 relatedTarget:null。

2.4 第四组事件属性

鼠标点击相对视口的坐标 ，位置是相对位置。

1. clientX事件属性返回当事件被触发时鼠标指针相对于浏览器页面（或客户区）的水平坐标。客户区指的是当前窗口。

使用方法：event.clientX

2. clientY 事件属性返回当事件被触发时鼠标指针向对于浏览器页面（客户区）的垂直坐标。 客户区指的是当前窗口。

使用方法：event.clientY

下面的例子可显示出事件发生时鼠标指针的坐标：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function show_coords(event){var x=event.clientX;var y=event.clientY;alert("X coords: " + x + ", Y coords: " + y);
}
</script>
</head>
<body><p onmousedown="show_coords(event)">请在文档中点击。</p></body>
</html>

x和y与上面的clientX和clientY作用一样。

2.5 第五组事件属性

鼠标点击相对页面左上角距离，位置是绝对位置。

pageX :水平方向。

pageY :垂直方向。

2.6 第六组事件属性

 相对屏幕左上角距离。

screenX 事件属性可返回事件发生时鼠标指针相对于屏幕的水平坐标。

screenY 事件属性可返回事件发生时鼠标指针相对于屏幕的垂直坐标。

2.7 第七组事件属性

是mousemove事件相对上次移动位置的偏移值。

movementX :水平方向。

movementY :垂直方向。

2.8 第八组事件属性

1. 如果父子容器定位，都是相对e.target这个目标对象的左上角距离。

2. 如果子元素没有定位，layerX、layerY则向上查找定位的父元素，如果没有找到则相对html左上角定位，如果找到父元素定位了，则相对父元素左上角距离。

layerX:519

layerY:112

offsetX:520

offsetY:112

3. input标签和焦点事件

3.1 焦点事件

focus：聚焦事件。在元素获得焦点时触发。这个事件不会冒泡；所有浏览器都支持。

blur：失焦事件。元素失去焦点时触发。这个事件不会冒泡；所有浏览器都支持。

注意！！！

1. 不能事件委托，仅用于input、textArea、select、a、button。

2. blur、focus 不支持冒泡。

focusin ：聚焦事件。在元素获得焦点时触发，与 HTML 事件 focus 等价，但它冒泡。

focusout ：失焦事件。在元素失去焦点时触发。与 HTML 事件 blur 等价，冒泡。

注意！！！

1. 可以事件委托，可以用表单和表单元素。

2. focusin、focusout 支持冒泡。

当焦点从页面的一个元素移动到另一个元素时，事件的触发顺序：

  • focusout 在失去焦点的元素上触发。
  • focusin 在获得焦点的元素上触发。
  • blur 在失去焦点的元素上触发。
  • focus 在获得焦点的元素上触发。

案例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><a href="#">超链接</a><form action=""><input type="text" name="user"><button type="submit">提交</button></form><script>let input=document.querySelector("input");input.addEventListener("focus",focusHandler);input.addEventListener("blur",focusHandler);function focusHandler(e){console.log(e);}let form=document.querySelector("form");form.addEventListener("focusin",focusHandler);form.addEventListener("focusout",focusHandler);function focusHandler(e){console.log(e);}</script>
</body>
</html>

3.2 input标签 (input事件)

 input 输入时触发事件，可以委托给父元素。 input可以当作一个事件使用。

 input是事件时常用的事件属性：

  • data：每次输入到 input 中的文本内容。
  • inputType :输入的类型（ "insertCompositionText"）。
  • isComposing : 是否输入法输入。是的时候值为true。

案例：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><a href="#">超链接</a><form action=""><input type="text" name="user"><button type="submit">提交</button></form><script>let id;let input = document.querySelector("input");input.addEventListener("input", inputHandler);function inputHandler(e) {if (id) return;id = setTimeout(() => {clearTimeout(id);id = undefined;console.log(input.value);}, 500)}</script>
</body></html>

4. 节流和防抖

        节流 ：第一次进入执行程序，在一定时间内不能再次进入，等待时间过后可以再次进入，然后又不能进入。

         防抖：第一次不能进入，间隔一定时间后可以进入，然后不能进入，间隔一定时间后再次可以进入。

setTimeout(() => { }, 500)let id = setTimeout(function () {clearTimeout(id);
}, 500)

5. 拖拽案例

方法一：

6. 走路案例

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

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

相关文章

机器学习——贝叶斯分类器

机器学习——贝叶斯分类器

一、贝叶斯决策论 贝叶斯决策论是概率框架下实施决策的基本方法。   假设有 N N N种可能的类别标记&#xff0c;即 Y { c 1 , c 2 , . . . , c N } Y\{c_1,c_2,...,c_N \} Y{c1​,c2​,...,cN​}&#xff0c; λ i j \lambda_{ij} λij​是将一个真实标记为 c j c_j cj​的样…
阅读更多...
【网络】网络层协议——IP协议

【网络】网络层协议——IP协议

目录 1.TCP和IP的关系 2.IP协议报文 2.1. 4位首部长度&#xff0c;16位总长度&#xff0c;8位协议 2.2. 8位生存时间 &#xff0c;32位源IP地址和32位目的IP地址 3.IP地址的划分 3.1.IP地址的表现形式 3.2.旧版IP地址的划分 3.2.1.旧版IP地址的划分思路 3.2.2.分类划…
阅读更多...
一文读懂flask

一文读懂flask

一文读懂flask 在实际工作中遇到了需要在通过gunicorn启动flask应用&#xff0c;并在gunicorn启动的每个woker之前为每个woker初始化ros节点信息&#xff0c;但在改造的过程中遇到通过worker数指定节点名称时多次初始化节点时只有一个woker的节点能够初始化成功&#xff0c;因…
阅读更多...
鸿蒙开发 数组改变，ui渲染没有刷新

鸿蒙开发 数组改变，ui渲染没有刷新

问题描述&#xff1a; 数组push, 数组长度改变&#xff0c;ui也没有刷新 打印出了数组 console.log(this.toDoData.map(item > ${item.name}).join(, ), this.toDoData.length) 原代码&#xff1a; Text().fontSize(36).margin({ right: 40 }).onClick(() > {TextPicker…
阅读更多...
MySQL 数据库深度解析：安装、语法与高级查询实战

MySQL 数据库深度解析：安装、语法与高级查询实战

一、引言 在现代软件开发和数据管理领域中&#xff0c;MySQL 数据库凭借其高效性、稳定性、开源性以及广泛的适用性&#xff0c;成为了众多开发者和企业的首选。无论是小型项目还是大型企业级应用&#xff0c;MySQL 都能提供可靠的数据存储和管理解决方案。本文将深入探讨 MyS…
阅读更多...
uni-app - - - - - 使用uview-plus详细步骤

uni-app - - - - - 使用uview-plus详细步骤

uni-app - - - - - 使用uview-plus详细步骤 1. 使用HbuilderX创建空白项目2. 安装插件3. uview-plus配置使用3.1 main.js配置3.2 uni.scss配置3.3 App.vue配置3.4 pages.json 4. 重启Hbuilderx 1. 使用HbuilderX创建空白项目 2. 安装插件 工具 > 插件安装 > 前往插件市场…
阅读更多...
“精读”怎么翻译？

“精读”怎么翻译？

中文版 “Intensive reading” 是指一种深度阅读的方式&#xff0c;通常用于精读和分析文本的细节。与广泛阅读&#xff08;extensive reading&#xff09;不同&#xff0c;广泛阅读的目标是通过阅读大量的内容来提高整体的语言理解能力&#xff0c;而集中的阅读则注重理解单一…
阅读更多...
Linux上安装Conda以管理Python环境

Linux上安装Conda以管理Python环境

在Windows下装了Linux发行版Debian&#xff0c;以后不用来回开启VMware啦&#xff01;并在Debian中安装了Conda,记录一下所需命令(其他版本如Ubuntu中安装是一样的命令)。 目录 1.WSL 2.安装Conda 3.Python环境配置 1.WSL Install WSL | Microsoft Learn 微软官网 ①以管理…
阅读更多...
STM32(F103ZET6)第二十四课：IAP离线固件升级

STM32(F103ZET6)第二十四课：IAP离线固件升级

目录 开发需求IAP介绍内部的内存分区1.内部FLASH划分2.内部数据读取3.数据写入与擦除4.具体升级函数 IAP更新升级步骤1.系统启动流程2.IAP启动流程详解3.整体设计流程4.Boot Loader的代码编写5.APP1代码编写&#xff08;目前&#xff09;6.APP2代码编写&#xff08;待升级&…
阅读更多...
WEB开发---使用HTML CSS开发网页实时显示当前日期和时间

WEB开发---使用HTML CSS开发网页实时显示当前日期和时间

自己刚开始学习html css知识&#xff0c;临时做个网页&#xff0c;实时显示当前日期和时间功能。 代码如下&#xff1a; test.html <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport&q…
阅读更多...
python解释器[源代码层面]

python解释器[源代码层面]

1 PyDictObject 在c中STL中的map是基于 RB-tree平衡二元树实现&#xff0c;搜索的时间复杂度为O(log2n) Python中PyDictObject是基于散列表(散列函数)实现&#xff0c;搜索时间最优为O(1) 1.1 散列列表 问题&#xff1a;散列冲突&#xff1a;多个元素计算得到相同的哈希值 …
阅读更多...
ARM 寻址方式（18）

ARM 寻址方式（18）

立即寻址&#xff1a; 也叫作立即数寻址。 就是 立即数&#xff0c;本身就包含在了 指令当中。 举例&#xff1a; ADD R0, R0,#1 其中&#xff0c;#1 &#xff0c; 就是立即数&#xff0c;对于16进制的立即数&#xff0c; 需要在# 后加上 #0x. 寄存器寻址。 就是数据就在…
阅读更多...
219. 存在重复元素 II【 力扣(LeetCode) 】

219. 存在重复元素 II【 力扣(LeetCode) 】

一、题目描述 给你一个整数数组 nums 和一个整数 k &#xff0c;判断数组中是否存在两个 不同的索引 i 和 j &#xff0c;满足 nums[i] nums[j] 且 abs(i - j) < k 。如果存在&#xff0c;返回 true &#xff1b;否则&#xff0c;返回 false 。 二、测试用例 示例 1&…
阅读更多...
多模态论文学习8.28

多模态论文学习8.28

系列文章目录 文章目录 系列文章目录LAMM: Label Alignment for Multi-Modal Prompt Learning学习1、论文理解1、研究背景2、论文贡献3、方法框架4、研究思路5、实验6、限制 LAMM: Label Alignment for Multi-Modal Prompt Learning学习 1、论文理解 VL模型和下游任务之间的类…
阅读更多...
单调栈，LeetCode 2289. 使数组按非递减顺序排列

单调栈，LeetCode 2289. 使数组按非递减顺序排列

一、题目 1、题目描述 给你一个下标从 0 开始的整数数组 nums 。在一步操作中&#xff0c;移除所有满足 nums[i - 1] > nums[i] 的 nums[i] &#xff0c;其中 0 < i < nums.length 。 重复执行步骤&#xff0c;直到 nums 变为 非递减 数组&#xff0c;返回所需执行的…
阅读更多...
Amos百度云下载与安装 附图文安装教程

Amos百度云下载与安装 附图文安装教程

如大家所了解的&#xff0c;Amos是一款经常被运用在社会科学研究中的数据分析软件&#xff0c;尤其广泛用于人文社会科学领域的各种研究中。运用Amos&#xff0c;可以帮助研究人员使用结构方程模型 (SEM) 对他们收集到的数据进行分析与解释。 自用Amos 24安装包&#xff0c;可按…
阅读更多...
数据结构与算法（循环链表，双向链表）

数据结构与算法（循环链表，双向链表）

循环链表 最后一个元素指向首元素 带尾指针的循环链表合并 双向链表 双向链表:在单链表的每个结点里再增加一个指向其直接前驱的指针 域 prior &#xff0c;这样链表中就形成了有两个方向不同的链&#xff0c;故称为双向链表 双向链表插入操作 思路 代码 删除操作 思路 代…
阅读更多...
一个很大的文件，文件的每一行是一个很大的数字，如果给你一个单机，内存比较小，存不了这么大的文件，但是硬盘是无限大的，如何对文件做一个排序输出

一个很大的文件，文件的每一行是一个很大的数字，如果给你一个单机，内存比较小，存不了这么大的文件，但是硬盘是无限大的，如何对文件做一个排序输出

对于需要排序的大文件，尤其是当文件大小超过了可用内存时，可以采用外部排序算法。这里我描述一种基于归并排序思想的外部排序方法，它将大文件分割成多个小文件，在每个小文件上进行排序，然后再将这些排序好的小文件合并成一个有序的大文件。 以下是具体的步骤： 步骤 1: …
阅读更多...
CTFHub SSRF靶场通关攻略（6-11）

CTFHub SSRF靶场通关攻略（6-11）

FastCGI协议 首先写一个php的一句话木马&#xff0c;并进行base64编码 <?php eval($_POST[cmd]);?> 编码完成后把他写入shell.php文件中 echo "PD9waHAgQGV2YWwoJF9QT1NUW2NtZF0pOz8" | base64 -d > shell.php 使用Gopherus工具生成payload: 执命令 …
阅读更多...
【工控】线扫相机小结

【工控】线扫相机小结

背景简介 我目前接触到的线扫相机有两种形式： 无采集卡，数据通过网线传输。 配备采集卡，使用PCIe接口。 第一种形式的数据通过网线传输，速度较慢，因此扫描和生成图像的速度都较慢，参数设置主要集中在相机本身。第二种形式的相机配备采集卡，通常速度更快，但由于相机和…
阅读更多...
最新文章

Copyright @ 2022~2023