JavaScript事件学习总结(5)js中事件类型的鼠标事件

相关阅读：

JavaScript事件学习总结(5)js中事件类型的鼠标事件。

//www . JB 51 . net/article/86259 . htm

JavaScript事件学习总结(一)事件流。

//www . JB 51 . net/article/86261 . htm

javaScript事件学习总结(4)事件的公共成员(属性和方法)。

//www . JB 51 . net/article/86262 . htm

JavaScript事件学习总结(2) js事件处理程序。

//www . JB 51 . net/article/86264 . htm

JavaScript事件学习总结(3) js事件对象。

鼠标事件

DOM3级事件中定义了9个鼠标事件。

按下mousedown:鼠标按钮(左键或右键)时触发。

它不能被键盘触发。

当mouseup:鼠标按钮被释放并弹出时触发。

它不能被键盘触发。

单击鼠标左键或按回车键时触发：这对于确保可访问性很重要，这意味着onclick事件处理程序可以通过键盘或鼠标来执行。当dblclick:双击鼠标左键时触发。鼠标悬停在目标元素上。当鼠标移动到其子元素上时触发。mouseout:鼠标移除目标元素的顶部。

当鼠标移动到元素范围内时，会触发Mouseenter:此事件不会冒泡，也就是说，当鼠标移动到其子元素上时，它不会触发。

当鼠标移出元素范围时，会触发Mouseleave:此事件不会冒泡，也就是说，当鼠标移动到其子元素时，它不会触发。

mousemove:鼠标在元素内移动时会不断触发。

它不能被键盘触发。

注释：

只有当一个元素上的mousedown和mouseup事件被相继触发时，click事件才能被触发。只有连续两次触发click事件时，才会触发dblclick事件。

如果取消了mousedown或mouseup，则不会触发click事件。或者直接或间接取消点击事件，则不会触发dblclick事件。

1.事件触发顺序。

示例：双击按钮查看上面触发的事件。

body input id=' BTN ' type=' button ' value=' click '/script var BTN=document . getelementbyid(' BTN ')；BTN . addeventlistener(' mouse down ')，function(event){ console . log(' mouse down ')；}，false)；btn.addEventListener('mouseup '，function(){ console . log(' mouse up ')；}，false)；btn.addEventListener('click ')，function(){ console . log(' click ')；}，false)；btn.addEventListener('dblclick '，function(){ console . log(' dbl click ')；}，false)；/脚本/正文

2.鼠标输入和鼠标悬停的区别。

差异：

mouseover事件会冒泡，这意味着当鼠标移动到其子元素上时，它会触发。

mouseenter事件不会冒泡，这意味着当鼠标移动到其子元素上时，它不会触发。

示例：

！DOCTYPE html html head lang=' en ' meta charset=' UTF-8 ' title/title style # outer { position : absolute；宽度： 200 px；高度： 200 px；top:0left : 0；底部：0；right : 0；margin: auto背景-颜色：粉色；} # inner { position: absolute宽度： 100 px；高度：100 px；top :50%；左侧：50%；左边距：-50px；边距-top :-50px；背景-颜色：橙色；文本对齐：中心；线高： 100 px；} #外部，#内部{ border-radius :50%；}/style script src=' http : jquery-2 . 1 . 1 . min . js '/script/headdybodydiv id=' outer ' div id=' inner '/div/div/bodyscriptvar parentDiv=document . getelementbyid(' outer ')；parent div . addevent listener(' mouseover '，function () {console.log('父div的mouse over事件被触发')；}，false)；//parent div . addevent listener(' mouseenter '，function () {//console.log('父div的mouse enter事件被触发')；//}，false)；//parent div . addevent listener(' mouseout '，function () {//console.log('父div的mouse out事件被触发')；//}，false)；//parent div . addevent listener(' mouseleave '，function(){//console . log(' parent div的mouse leave事件被触发')；//}，false)；/脚本/正文/html

注释：

Mouseover对应mouseout，mouseenter对应mouseleave。可以通过取消上述代码的注释来查看效果。

jquery中的悬停API是mouseenter和mouseleave的组合。

3.鼠标左键和右键。

脚本类型=' text/JavaScript ' document . onmousedown=function(ev){ var oEvent=ev | | event；alert(oevent . button)；//IE下鼠标左键为1，鼠标右键为2 ff，chrome下鼠标左键为0，鼠标右键为2}。/script4，鼠标悬停和鼠标移动。

一般来说，鼠标悬停就够了，但是mousemove只在特殊情况下使用。mousemove会消耗更多的资源，例如监视鼠标坐标的变化。

以上是边肖(5)介绍的JavaScript事件的学习总结。js中事件类型的鼠标事件相关知识希望对大家有所帮助！