其他分享
首页 > 其他分享> > JS鼠标事件基础

JS鼠标事件基础

作者:互联网

一、鼠标事件

mousedown:鼠标按钮被按下(左键或者右键)时触发。不能通过键盘触发。
mouseup:鼠标按钮被释放弹起时触发。不能通过键盘触发。
click:单击鼠标左键或者按下回车键时触发。这点对确保易访问性很重要,意味着onclick事件处理程序既可以通过键盘也可以通过鼠标执行。
dblclick:双击鼠标左键时触发。
mouseover:鼠标移入目标元素上方。鼠标移到其后代元素上时会触发。
mouseout:鼠标移出目标元素上方。
mouseenter:鼠标移入元素范围内触发,该事件不冒泡,即鼠标移到其后代元素上时不会触发。
mouseleave:鼠标移出元素范围时触发,该事件不冒泡,即鼠标移到其后代元素时不会触发。
mousemove:鼠标在元素内部移到时不断触发。不能通过键盘触发。

二、onmouseover、onmouseout与onmouseenter、onmouseleave区别
onmouseover、onmouseout:(冒泡)
鼠标经过时自身触发事件,经过其子元素时也触发该事件;(父亲有的东西,儿子也有)

onmouseenter、onmouseleave:(不冒泡)
鼠标经过时自身触发事件,经过其子元素时不触发该事件。(父亲的东西就是父亲的,不归儿子所有)

这四个事件两两配对使用,onmouseover、onmouseout一对,onmouseenter、onmouseleave一对,不要混合使用。

onmousemove与onmouseover的区别
时间上: onm ousemove 事件触发后,再触发 onm ouseover 事件。

动作上 :onmouseover 只在刚进入区域时触发;

onm ousemove 除了刚进入区域触发外,在区域内移动鼠标,也会触发该事件。

注意:当鼠标移动很快时,可能不会触发这两个事件。

onm ouseover与onmousemove的区别是:

当鼠标移过当前对象时就产生了onmouseover事件(onmouseover有个移入移出的过程),当鼠标在当前对象上移动时就产生了onmousemove事件,只要是在对象上移动而且没有移出对象的,就是onmousemove事件

标签:触发,鼠标,元素,JS,onmousemove,事件,onmouseover
来源: https://www.cnblogs.com/zfy050323/p/15732259.html