Web API之鼠标事件
创始人
2024-06-03 14:11:38
0

鼠标事件

关于事件的监听,我们可以通过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

相关内容

热门资讯

安卓4.4系统tv软件,探索安... 亲爱的读者们,你是否曾为家里的电视屏幕增添一些智能的魔力而烦恼?别担心,今天我要给你带来一个超级实用...
安卓系统的研究人物,安卓系统发... 你知道吗?在科技飞速发展的今天,安卓系统可是占据了智能手机市场的大半壁江山。而在这片广阔的天地里,有...
山寨苹果刷会安卓系统,安卓系统... 你知道吗?在科技圈里,总有一些让人眼前一亮的小秘密。今天,我要给你揭秘一个关于山寨苹果刷安卓系统的神...
安卓系统新用户登录,畅享智能生... 你刚刚入手了一台全新的安卓手机,是不是有点小激动呢?别急,别急,让我来给你详细介绍一下安卓系统新用户...
安卓8.0系统推荐版本,体验流... 你有没有发现,手机系统更新换代的速度简直就像小孩子的成长一样快?这不,安卓8.0系统已经悄悄地来到了...
安卓系统怎么分享位置吗,一键操... 你是不是也有过这样的经历:和朋友约好见面,却因为找不到对方而急得团团转?别担心,今天就来教你怎么在安...
安卓系统更新加速器,畅享极速升... 你有没有发现,手机更新系统的时候总是慢吞吞的,让人等得心痒痒?别急,今天就来给你安利一款神器——安卓...
百答系统和安卓系统区别,差异解... 你有没有想过,为什么你的手机里装了那么多应用,却还是觉得信息不够全面?其实,这背后的大脑——操作系统...
安卓锁系统设置软件,软件设置与... 手机里的秘密可多了去了,是不是有时候你也会觉得,这手机里的信息要是被别人看到了可怎么办呢?别担心,今...
安卓电视u盘游戏系统,轻松畅享... 你有没有想过,家里的安卓电视也能玩上那些刺激的电脑游戏呢?没错,就是那种让你一玩就停不下来的游戏!今...
挂载安卓系统为读写权限,读写权... 你有没有想过,你的手机里那些神奇的安卓系统,竟然可以赋予某些应用读写权限?这听起来是不是有点像科幻电...
安卓12系统怎么打补丁,保障设... 亲爱的安卓用户们,你是否也遇到了系统卡顿、bug频发的小烦恼呢?别急,今天就来给你支个招——安卓12...
客厅电脑用安卓系统好吗,体验智... 亲爱的读者,你是不是在为客厅电脑选择操作系统而烦恼呢?安卓系统,这个我们日常手机上常见的操作系统,是...
安卓系统能看访客记录,轻松查看... 你有没有想过,你的安卓手机里藏着一个小秘密?没错,就是访客记录!是的,你没听错,你的手机里竟然能查看...
印度安卓系统电脑推荐,性能卓越... 你有没有想过,在印度这片神奇的土地上,用一台安卓系统电脑会是怎样的体验呢?想象阳光洒在泰姬陵的白色大...
安卓系统合作公司,安卓系统合作... 你知道吗?在科技的世界里,安卓系统可是个超级明星呢!它不仅拥有庞大的用户群体,还吸引了一大批合作公司...
苹果表有安卓系统时间,时间同步... 你有没有发现,最近苹果表也开始支持安卓系统了?没错,就是那个一直以封闭著称的苹果,竟然也开始拥抱安卓...
原生安卓系统裁剪图片,原生安卓... 你有没有发现,用原生安卓系统拍照,有时候拍出来的照片分辨率超高,但就是有点大,想裁剪却不知道怎么操作...
安卓系统蓝牙开关APP,安卓系... 你有没有遇到过这种情况:手机里的安卓系统蓝牙开关总是让人摸不着头脑?有时候想开蓝牙,却找不到开关在哪...
安卓系统能登录ios系统王者吗... 你有没有想过,安卓系的手机能不能登录iOS系统的王者荣耀呢?这可是个让人好奇不已的问题哦!毕竟,两个...