位置: 编程技术 - 正文
JavaScript焦点事件、鼠标事件和滚轮事件使用详解
编辑：rootadmin推荐整理分享JavaScript焦点事件、鼠标事件和滚轮事件使用详解，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:,内容如对您有帮助，希望把文章链接给更多的朋友！
焦点事件
一般利用这些事件与document.hasFocus()方法和document.activeElement属性配合。主要有：
blur：元素失去焦点，不会冒泡；DOMFocusIn：同HTML事件focus，于DOM3遭废弃，选用focusin；DOMFocusOut：同HTML事件blur，于DOM3遭废弃，选用focusout；focus：元素获得焦点，不回冒泡；focusin：获得焦点，与HTML事件focus等价，但会冒泡；focusout：失去焦点，与HTML事件blur等价；如：
当焦点从页面中的一个元素转移到另一个元素会触发下面的事件：
focusout --> focusin --> blur --> DOMFocusOut --> focus --> DOMFocusIn
鼠标事件
DOM3级事件中定义了9个鼠标事件：
举例如下：
只有在同一个元素上相继除法mousedown和mouseup事件，才会触发click事件；只有触发两次click事件，才会触发依次dblclick事件。
顺序如下：
mousedown --> mouseup --> click --> mousedown --> mouseup --> click --> dblclick
IE8之前的版本中有一个bug，在双击事件中，会跳过第二个mousedown和click事件
滚轮事件
客户区坐标位置clientX和clientY属性
如：
页面坐标位置pageX与pageY；
在IE8及更早版本中不支持这个页面坐标位置，可以计算出来，需要用到混合模式下的document.body和标准模式下的document.documentElement中的scrollLeft和scrollTop属性：
屏幕坐标位置screenX和screenY；
通过该属性可以获得相对于屏幕的坐标。
修改键
修改键有Shift、Ctrl、Alt、Meta（window上的Windows键，苹果机上的Cmd键）；对应的修改键的状态是shiftKey、ctrlKey、altKey、metaKey，这些属性包含的都是布尔值，如果相应的键被按下了，则为true，否则为false。如：
相关元素
event.relatedTarget与event.target；
relatedTarget属性提供了相关元素的信息。这个属性只对于mouseover和mouseout事件才包含值；对于其他事件的值则是null；IE8之前的版本不支持relatedTarget属性，在mouseover事件触发时，IE的fromElement属性中保存了相关元素；在mouseout事件触发时，IE的toElement属性中保存着相关元素。
如：
如：
鼠标按钮
button属性
DOM的event.button属性有三个值：0为主鼠标按钮、1为中间鼠标按钮、2为次鼠标按钮。在常规设置中，主鼠标按钮就是鼠标左键；次鼠标按钮就是鼠标右键。
IE8及之前的版本也提供了button属性，但这个属性的值与DOM的button属性有很大差异：
0：没有按下鼠标按钮；1：主鼠标按钮；2：次鼠标按钮；3：同时按下主鼠标按钮和次鼠标按钮；4：中间鼠标按钮；5：同时按下主鼠标按钮和中间鼠标按钮；6：同时按下次鼠标按钮和中间鼠标按钮；7：同时按下三个鼠标按钮
兼容版：
另外，如果要屏蔽鼠标右键，应该使用：
这个事件是HTML5定义的，以后再讨论
更多的事件信息
detail属性
对于鼠标事件来说，detail包含了一个数值，表示在给定位置上发生了多少次单击（一次mousedown和一次mouseup），次数从1开始计数，如果mousedown和mouseup之间移动了位置，detail会被重置0，如果单击间隔太长也会被重置为0.
鼠标滚轮事件
mousewheel事件和wheelDelta属性
在垂直放向上滚动页面时，就会触发mousewheel，event对象里面的wheelDelta属性则表示当用户向前滚动滚轮时，wheelDelta是的倍数；当向后滚动滚轮时，wheelDelta是-的倍数。如：
另外，在Opera 9.5之前的版本中，wheelDelta值的正负号是颠倒的。
此外，Firefox支持一个名为DOMMouseScroll的类似事件，也是在鼠标滚动滚轮时除法。有关鼠标滚轮的信息保存在detail属性中。向前滚动这个属性的值为-3的倍数，向后滚动，这个属性的值是3的倍数。
通用版：
触摸设备
iOS和Android设备中：
不支持dblclick；轻击可单击元素会触发mousemove；如果此操作会导致内容变化，将不再有其他事件发声；如果屏幕没有发生变化，那么依次发生mousedown、mouseup和click事件；mousemove事件也会触发mouseover和mouseout事件；两个手指操作会触发mousewheel和scroll；
无障碍性问题
使用click事件执行代码；
不要使用onmouseover向用户显示新的信息；不要使用dblclick执行重要的操作；
JavaScript知识点总结之如何提高性能 JavaScript的性能问题不容小觑，这就需要我们开发人员在编写JavaScript程序时多注意一些细节，本文非常详细的介绍了一下JavaScript性能优化方面的知识点
探讨JavaScript标签位置的存放与功能有无关系 在网页中，我们可以将JavaScript代码放在html文件中任何位置，但一般放在head或body标签里面。一般来说，script元素放在哪里与其的功能作用是紧密相关的
JavaScript程序开发之JS代码放置的位置 JavaScript在页面中使用，那么这些JS代码应该放在什么位置呢？下面来看一下。一般来说有两种方式，写在界面上和使用.js文件。1.1界面上的Head部分可以
标签: JavaScript焦点事件、鼠标事件和滚轮事件使用详解
本文链接地址:https://www.jiuchutong.com/biancheng/383816.html 转载请保留说明！](https://www.jiuchutong.com/image/20240129/1706497199.jpg)