Web API之鼠标事件

鼠标事件

关于事件的监听,我们可以通过addEventListener进行监听或者通过元素的oneventname属性来指定。

const app = document.getElementById('app')
//通过addEventListener方法注册事件监听器
app.addEventListener('click',(event)=>{
  console.log('app',event)
})
//通过元素的onclick属性注册事件监听器
app.onclick = (e)=>{
}

接下来的所有事件都可以通过上面两种方式注册。

事件的捕获与冒泡 ,现在默认都是冒泡阶段注册事件处理程序。

鼠标事件类型

auxclick

实验属性。非主要鼠标按钮(比如左键)点击时触发。对应元素的onauxclick属性

click

当鼠标左键在一个元素上被按下和放开时,click事件会被触发。

如果鼠标在一个元素上被按下,移动到元素外再释放,则在包含这个两个元素的最具体的父级元素上触发事件。

事件对象类型 PointerEvent 。Pointer Event 指针事件。

contextmenu

会在用户尝试打开上下文菜单时触发。通常是鼠标点击右键或按下键盘上的菜单键(未成功)时被触发。使用菜单键,菜单会展示到聚焦元素的左下角,如果元素是DOM树,会展示到这一行的左下角。正常情况下,我们在浏览器页面上右键时,会弹出浏览器的右键菜单,我们可以通过event.preventDefault()方法禁用浏览器默认的上下文菜单。

app.addEventListener('click',(event)=>{
  console.log('app',event)
  event.preventDefault()
})

事件对象 PointerEvent

dblclick

双击事件,在单个元素上单击两次鼠标左键,触发此事件。

事件对象 MouseEvent

mousedown

在指针设备按钮按下时触发。

事件对象 MouseEvent

mouseenter

当鼠标第一次移动到触发事件元素中的激活区域时会触发。这个第一次移动我的理解是当鼠标移出这个元素,再移入这个元素就会触发。

事件对象 MouseEvent

mouseleave

指针移出某个元素时被触发。 与mouseout相似,但mouseleave不会冒泡:当指针离开元素及其所有后代时,会触发mouseleave。当指针离开元素或离开元素的后代(即使指针仍在元素内)时会触发mouseout

事件对象 MouseEvent

mousemove

当鼠标在元素上(就是元素内部)移动时会触发此事件。

事件对象 MouseEvent

mouseout

请看mouseleave

事件对象 MouseEvent

mouseover

当鼠标移动到一个元素上时,会在这个元素上触发此事件。mouseenter是激活区域才会触发。举个例子?

事件对象 MouseEvent

mouseup

当鼠标在元素中,鼠标按钮放开时触发。

事件对象 MouseEvent

MouseEvent接口

MouseEvent接口的继承关系:MouseEventUIEventEvent

依次看下EventUIEventMouseEvent 都有哪些属性和方法。

Event接口

属性

RO  表示只读(read only)

  • bubbles RO bool 用来表示该事件是否在DOM中冒泡
  • cancelBubble stopPropagation()的历史别名。在事件处理函数返回之前,将此属性设置为true,可阻止冒泡。
  • cancelable RO bool 表示事件是否可以取消
  • composed RO boo 表示事件是否可以穿过shadow DOM和常规DOM冒泡
  • currentTarget RO obj 对事件当前注册的目标的引用,标识是当前事件沿着DOM触发时事件的当前目标,他总是指向事件绑定的元素。如果同一个事件处理程序绑定多个元素时,这个就很有用了。https://developer.mozilla.org/en-US/docs/Web/API/Event/Comparison_of_Event_Targets
  • eventPhase RO  int 表示事件流整备处理到了哪个阶段。 https://www.w3.org/TR/DOM-Level-3-Events/#event-flow
  • target  RO obj 对事件原始目标值的引用。这里的原始指最初派发事件时指定的目标。
  • timeStamp RO 毫秒
  • type RO 事件的类型,不区分大小写
  • isTrusted RO 表示该事件是由浏览器发起的 还是有脚本发出的。true 用户

方法

  • composePath() 返回事件的路径。
  • preventDefault() 取消事件。告诉用户代理,如果此事件没有被显示处理,它默认的动作也不应该照常执行。但是事件还是会继续传播的。
  • stopImmediatePropagation() .对这个特定的事件而言,没有其他监听器被调用。这个事件既不会添加到相同的元素上,也不会添加到以后将要遍历的元素上。阻止监听同一事件的其他事件监听器被调用。如果多个事件监听器被附加到相同元素的相同事件类型上,当此事件触发时,它们会按其被添加的顺序被调用。如果在其中一个事件监听器中执行 stopImmediatePropagation() ,那么剩下的事件监听器都不会被调用。
  • stopPropagation() 阻止捕获和冒泡阶段中当前事件的进一步传播。但是他不能防止任何默认行为的发生。

UIEvent接口

UIEvent除了拥有Event的所有属性和方法,还包含一下属性。

属性

  • detail RO  当值为非空的时候,提供当前点击数。 click/dblclick 是当前点击数 mousedown/mouseup 是1加加上当前点击数。其他值为0。
  • pageX RO 非标准  返回的相对于整个文档的x坐标以像素为单位。这个文档时基于文档边缘 考虑任何页面的水平方向上的滚动。比如页面向右滚动200px,并出现滚动条,这时文档左侧相对于窗口向左移动200px。鼠标点击距离窗口左边100px的位置,这还是pageX的返回值是300
  • pageY RO 同上
  • view RO 返回的生成时间的document.defaultView对象。在浏览器中,这是事件所在的window对象。

MouseEvent接口

MouseEvent除了拥有UIEventEvent的所有属性和方法,还包含一下属性。

属性

  • altKey RO bool 如果鼠标事件触发时 alt键被按下 返回true
  • button RO 返回一个值,代表用户按下并触发了事件的鼠标按键。这个属性只能够表明在触发事件的单个或多个按键按下或释放过程中哪些按键被按下了。默认情况下 0是左键 2是右键 但是可能会被用户修改。
  • buttons RO 指示事件触发时哪些鼠标按键被按下 。一个数字,用来标识鼠标按下的一个或者多个按键。如果按下的键为多个,则值等于所有按键对应数值进行或 (|) 运算的结果。
  • clientX RO 提供事件发生时的应用客户端区域(浏览器窗口)的水平坐标。  x属性是他的别名。
  • clientY RO 提供事件发生时的应用客户端区域(浏览器窗口)的垂直坐标。y属性是他的别名。
  • ctrlKey RO bool 如果鼠标事件触发时 ctrl键被按下 返回true
  • metaKey RO bool 如果鼠标事件触发时 meta键(window操作系统的键盘上的win键)被按下 返回true
  • movementX RO  当前事件和上一个mousemove事件之间鼠标在水平方向上的移动值。
  • movementY RO 同上 ,垂直方向
  • offsetX RO 事件对象与目标节点的内边距在x轴方向上的偏移量。当前目标节点就是发生此事件的元素。
  • offsetY RO 同上 ,y轴。
  • region RO 返回被点击事件影响的点击区域id,如果没有区域被影响则返回null
  • relatedTarget RO 鼠标事件的次要目标 https://developer.mozilla.org/zh-CN/docs/Web/API/MouseEvent/relatedTarget
  • screenX 鼠标在全局(屏幕)中的水平坐标(偏移量)。多个屏幕显示的情况下,水平对齐的屏幕将被视为单个设备。
  • screenY RO 同上,垂直坐标。
  • shiftKey bool 如果鼠标事件触发时 shift键被按下 返回true

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

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

相关文章

ChatGPT告诉你:项目管理能干到60岁吗?

早上好,我是老原。这段时间最火的莫过于ChatGPT,从文章创作到论文写作,甚至编程序,简直厉害的不要不要的。本以为过几天热度就自然消退了,结果是愈演愈烈,热度未减……大家也从一开始得玩乐心态&#xff0c…

python flask项目打包成docker镜像发布

1.编写python flask代码,简单写一个加法的接口,命名为sum.py import json from flask import Flask,request,render_template app Flask(__name__)app.route(/) def index():return hello worldapp.route(/sum,methods[POST]) def correct():a request…

C/C++网络编程笔记Socket

https://www.bilibili.com/video/BV11Z4y157RY/?vd_sourced0030c72c95e04a14c5614c1c0e6159b上面链接是B站的博主教程,源代码来自上面视频,侵删,这里只是做笔记,以供复习和分享。上一篇博客我记录了配置环境并且跑通了&#xff0…

Nginx——Nginx的优化设计

摘要 本博文介绍Nginx的优化设计方向和原理,帮助大家在nginx的使用和优化中提供一个参考的方向,让你的nginx发挥最大性能,节约系统资源。 一、Nginx开启Http2.0的优化 HTTP/2是HTTP协议的最新标准,它是HTTP/1.1的继承者。由于它…

大厂与小厂招人的区别,看完多少有点不敢相信

前两天在头条发了一条招人的感慨,关于大厂招人和小公司招人的区别。 大厂:有影响力,有钱,能够吸引了大量的应聘者。因此,也就有了筛选的资格,比如必须985名校毕业,必须35岁以下,不能…

数据结构与算法这么难,为什么我们还要学习?

文章目录前言1. 数据结构与算法是什么?2. 为什么数据结构与算法很难?3. 如何系统学习数据结构与算法?🍑 复杂度🍑 线性表🍑 树形结构🍑 图🍑 排序🍑 字符串🍑…

【c++】:模拟实现STL模板中的string

文章目录 前言一.string的模拟实现总结前言 上一篇文章我们详细介绍了STL中的string的一些常用的接口,这一篇文章我们将从底层实现string类,当然我们只是实现一些重要的,经常使用的接口,并且不是完全按照STL中的string去走的。 一…

对于从事芯片行业的人来说,有哪些知识是需要储备的?

近两年芯片行业大火,不少同学想要转行,却不知道该如何下手,需要学习哪些基础知识,下面就来看看资深工程师怎么说? 随着工艺的发展,芯片肯定是尺寸越来越小,至于小到什么样的程度是极限&#xf…

【小破站下载工具】Python tkinter 实现网站下载工具,所有数据一键获取

目录前言开发环境本次项目案例步骤先展示下完成品的效果界面导入模块先创建个窗口功能按键主要功能代码编写功能一功能二功能三前言 最近很多同学想问我,怎么把几个代码的功能集合到一起? 很简单,写一个界面就行了,想要哪个代码…

CSS的三大特性

🌟所属专栏:前端只因变凤凰之路🐔作者简介:rchjr——五带信管菜只因一枚😮前言:该系列将持续更新前端的相关学习笔记,欢迎和我一样的小白订阅,一起学习共同进步~👉文章简…

用ChatGPT生成Excel公式,太方便了

ChatGPT 自去年 11 月 30 日 OpenAI 重磅推出以来,这款 AI 聊天机器人迅速成为 AI 界的「当红炸子鸡」。一经发布,不少网友更是痴迷到通宵熬夜和它对话聊天,就为了探究 ChatGPT 的应用天花板在哪里,经过试探不少人发现&#xff0c…

vue3+vite项目移动端适配:postcss-pxtorem和amfe-flexible

一,定义 postcss-pxtorem PostCSS 的一个插件,可以从像素单位生成 rem 单位。 amfe-flexible amfe-flexible是配置可伸缩布局方案,主要是将1rem设为viewWidth/10。 二,使用 1. 设置 viewport 在 index.html 中: &l…

学生信息表

目录 一、功能说明 二、核心思想 三、所用知识回顾 四、基本框架 五、js功能实现部分 一、功能说明 (1)输入对应的信息,点击录入可以为下面的表格添加一条记录,注意当所填信息不完整时不允许进行提交。 (2&…

UE实现建筑生长(材质遮罩方式)效果

文章目录 1.实现目标2.实现过程2.1 遮罩2.2 生长动画3.参考资料1.实现目标 在UE中实现建筑的生成动画效果,GIF动图如下: 2.实现过程 通过动态设置材质遮罩OpacityMask的参数,即通过材质方式来实现建筑生长效果 2.1 遮罩 现有的教程中大多通过BoxMask-3D材质节点实现,但是…

扫地机器人(蓝桥杯C/C++)

题目描述 小明公司的办公区有一条长长的走廊,由 NN 个方格区域组成,如下图所示。 走廊内部署了 KK 台扫地机器人,其中第 ii 台在第 A_iAi​ 个方格区域中。已知扫地机器人每分钟可以移动到左右相邻的方格中,并将该区域清扫干净。…

Linux信号

目录 信号入门 1. 生活角度的信号 2. 技术应用角度的信号 3. 注意 4. 信号概念 5. 用kill -l命令可以察看系统定义的信号列表 6. 信号处理常见方式概览 产生信号 1. 通过终端按键产生信号 2. 调用系统函数向进程发信号 3. 由软件条件产生信号 4. 硬件异常产生信号 核…

DHCP原理简析及交互实践

环境: os:centos7 dnsmasq:version 2.76 一. dhcp工作原理 首先补充几个dhcp相关的基本概念: 1、动态主机配置协议DHCP(Dynamic Host Configuration Protocol)是一种网络管理协议,用于集中对用…

程序员必会技能—— 使用日志

目录 1、为什么要使用日志 2、自定义日志打印 2.1、在程序中得到日志对象 2.2、使用日志对象打印日志 2.3、日志格式 3、日志的级别 3.1、日志级别的分类 3.2、日志级别的设置 4、持久化日志 5、更简单的日志输出——lombok 5.1、如何在已经创建好的SpringBoot项目中添加…

Python+ChatGPT实战之进行游戏运营数据分析

文章目录一、数据二、目标三、解决方案1. DAU2. 用户等级分布3. 付费率4. 收入情况5. 付费用户的ARPU最近ChatGPT蛮火的,今天试着让ta写了一篇数据分析实战案例,大家来评价一下!一、数据 您的团队已经为您提供了一些游戏数据,包括…

MySQL数据库的基础语法总结(1)

MySql一.数据库,数据表的基本操作1.数据库的基本操作2. 数据表的基本操作2.1 数据库的数据类型2.1.1 整数类型2.1.2 浮点数类型和定点数类型2.1.3 字符串类型2.1.4 日期与时间类型2.2 数据表的基本操作2.2.1 创建一个数据表2.2.2 查看数据表2.2.3 查看表的基本信息的MySQL指令2…
最新文章