鼠标事件

Posted 2023-04-18

参考技术A

1.mousewheel鼠标滚轮事件
**获取当前滚轮的值 **

如果 值 小于 0 滚轮 往下滑
如果 值 大于0 滚轮 往上滑

1. onclick 单击事件

2.ondblclick 双击事件
当给 同一个格子 同时绑定双击和点击事件时
会触发 双击事件 必定会触发两次单击事件
ondblclick = function ()

3.oncontextmenu 鼠标右键
鼠标右键 是一个有默认功能的事件 它可以打开右键菜单

4.鼠标释放事件 onmouseup
鼠标按下不会触发 松开的时候 才会触发

5.鼠标按下事件 onmousedown

1.鼠标移入事件 一共有两种
第一种就是obmouseover 和 onmouseout
（1）鼠标移入 onmouseover

（2）鼠标移出 onmouseout

给父级绑定了事件 子级没有绑定事件
但是 当鼠标移入子级的时候 会触发 父级的事件
这种情况叫做事件冒泡

第二种 鼠标移出事件 onmouseenter 和 onmouseleave

1.鼠标移入 onmouseenter

2.鼠标移出 onmouseleave

鼠标移入移出 有两种写法
共同点： 就是鼠标移入移出的方法、、
不同的：
第一种 onmouseover 和 onmouseout 会触发事件冒泡
第二种 onmouseenter 和 onmouseleave 不会触发事件冒泡

3.鼠标移动事件 onmousemove
box.onmousemove = function ()
consoloe.log(\'鼠标移动事件\')

鼠标的坐标 在 鼠标事件的 事件对象中保存
所以我们要获取 鼠标坐标 一般都是通过事件对象 event 获取

所有的鼠标事件 都可以 通过 事件对象来获取 鼠标坐标
但是 通常 我们都是在 鼠标移动事件中获取 和 使用 鼠标坐标

JS—事件类型（焦点事件、鼠标事件（部分））

参考技术A 【需要注意】虽然focus与blur不冒泡，但是却可以在捕获阶段侦听到它们。

只定义了div2即棕色的那个div的事件
【解释enter与leave】：当鼠标由粉移向棕色时，显示enter，鼠标由棕移向绿时，不显示leave与enter。当移出粉色时，显示leave。
【解释over与out】：当鼠标由粉移向棕色时，显示over，鼠标由棕移向绿时，显示out在显示over，鼠标由绿移向棕时，显示out载显示over。为什么会显示呢？是因为事件冒泡，由棕移向绿时会触发div3的over事件，但是div3并没有定义，所以向上冒泡到div2。所以会显示div2的over事件。
【总结】mouseenter与mouseleave是IE提出的事件，不冒泡。但是mouseover与mouseout事件则通过简单的e.stopPropagation()也无法避免冒泡的现象。