这篇文章绝大部分是参考网上的内容而来,我就是做了一个简单的汇总,如有不足之处,欢迎指正。
js鼠标事件汇总
- onmousedown 鼠标按下事件
- onmousemove 鼠标移动事件
- onmouseout 鼠标移出事件
- onmouseover 鼠标指针移动到元素(被选元素或其子元素)上时触发常与onmouseout一起用
- onmousenter 只有在鼠标指针穿过被选元素时,才会触发,常与onmouseleave一起使用
- onmouseleave 鼠标移出事件
- onmouseup 鼠标抬起事件
- onclick 单击事件(相继触发mousedown与mouseup事件)
- ondbclick 双击事件
onmouseover、onmouseout与onmouseenter、onmouseleave区别
onmouseover、onmouseout:(冒泡)
鼠标经过时自身触发事件,经过其子元素时也触发该事件;(父亲有的东西,儿子也有)
onmouseenter、onmouseleave:(不冒泡)
鼠标经过时自身触发事件,经过其子元素时不触发该事件。(父亲的东西就是父亲的,不归儿子所有)
这四个事件两两配对使用,onmouseover、onmouseout一对,onmouseenter、onmouseleave一对,不要混合使用。
onmousemove与onmouseover的区别
时间上: onmousemove 事件触发后,再触发 onmouseover 事件。
动作上 :onmouseover 只在刚进入区域时触发;
onmousemove 除了刚进入区域触发外,在区域内移动鼠标,也会触发该事件。
ps:当鼠标移动很快时,可能不会触发这两个事件。
onmouseover与onmousemove的区别是:
当鼠标移过当前对象时就产生了onmouseover事件(onmouseover有个移入移出的过程),当鼠标在当前对象上移动时就产生了onmousemove事件,只要是在对象上移动而且没有移出对象的,就是onmousemove事件