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 第二组事件属性

当使用mousedownmouseup事件触发时,按下了哪个键

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协议

目录 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 在实际工作中遇到了需要在通过gunicorn启动flask应用&#xff0c;并在gunicorn启动的每个woker之前为每个woker初始化ros节点信息&#xff0c;但在改造的过程中遇到通过worker数指定节点名称时多次初始化节点时只有一个woker的节点能够初始化成功&#xff0c;因…

鸿蒙开发 数组改变,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 数据库深度解析:安装、语法与高级查询实战

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

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环境

在Windows下装了Linux发行版Debian&#xff0c;以后不用来回开启VMware啦&#xff01;并在Debian中安装了Conda,记录一下所需命令(其他版本如Ubuntu中安装是一样的命令)。 目录 1.WSL 2.安装Conda 3.Python环境配置 1.WSL Install WSL | Microsoft Learn 微软官网 ①以管理…

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开发网页实时显示当前日期和时间

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

python解释器[源代码层面]

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

ARM 寻址方式(18)

立即寻址&#xff1a; 也叫作立即数寻址。 就是 立即数&#xff0c;本身就包含在了 指令当中。 举例&#xff1a; ADD R0, R0,#1 其中&#xff0c;#1 &#xff0c; 就是立即数&#xff0c;对于16进制的立即数&#xff0c; 需要在# 后加上 #0x. 寄存器寻址。 就是数据就在…

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

系列文章目录 文章目录 系列文章目录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. 使数组按非递减顺序排列

一、题目 1、题目描述 给你一个下标从 0 开始的整数数组 nums 。在一步操作中&#xff0c;移除所有满足 nums[i - 1] > nums[i] 的 nums[i] &#xff0c;其中 0 < i < nums.length 。 重复执行步骤&#xff0c;直到 nums 变为 非递减 数组&#xff0c;返回所需执行的…

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

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

数据结构与算法(循环链表,双向链表)

循环链表 最后一个元素指向首元素 带尾指针的循环链表合并 双向链表 双向链表:在单链表的每个结点里再增加一个指向其直接前驱的指针 域 prior &#xff0c;这样链表中就形成了有两个方向不同的链&#xff0c;故称为双向链表 双向链表插入操作 思路 代码 删除操作 思路 代…

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

对于需要排序的大文件,尤其是当文件大小超过了可用内存时,可以采用外部排序算法。这里我描述一种基于归并排序思想的外部排序方法,它将大文件分割成多个小文件,在每个小文件上进行排序,然后再将这些排序好的小文件合并成一个有序的大文件。 以下是具体的步骤: 步骤 1: …

CTFHub SSRF靶场通关攻略(6-11)

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

【工控】线扫相机小结

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