总结HTML DOM事件——鼠标事件

HTML DOM事件——鼠标事件

属性	描述
onclick	点击某个对象时触发
ondblclick	双击某个对象时触发
onmousedown	按下鼠标时触发
onmouseup	鼠标被松开时触发
onmouseenter	鼠标移入时触发
onmouseleave	鼠标移出时触发
onmouseover	鼠标移动到某元素之上时触发
onmouseout	鼠标从某元素上离开时触发
onmousemove	鼠标移动时触发

下面举例说明一下onclick、ondblclick和onmousedown、onmouseup

<p onclick="myFun(this,'red')" ondblclick="myFun(this,'green')">这是一段文字，鼠标单击变为红色，鼠标双击变为绿色</p>
<p onmousedown="myFun(this,'red')" onmouseup="myFun(this,'green')">这是一段文字，鼠标按下后变为红色，鼠标松开后变为绿色</p>

function myFun(elemen,colr){
   elemen.style.color=colr
}

而对于onmouseenter、onmouseleave和onmouseover、onmouseout这几个，很多人也是傻傻分不清楚

onmouseenter和onmouseover都是移入到元素中触发的事件，它们 的区别是：onmouseenter只在移入的瞬间被触发，而onmouseover是只要鼠标在该元素之上就会被触发。
例如，页面打开时，如果鼠标就在该元素上，那么onmouseenter不会被触发。

而onmouseleave和onmouseout都是移出鼠标时触发的事件，只要鼠标不在元素身上，那么onmouseout就会被触发，而onmouseleave只会在鼠标移出元素的瞬间被触发。

onmousemove是鼠标在元素内运动触发，反而言之，若鼠标在元素中不运动，那么该方法就不会被触发；若鼠标一直在该元素内运动，则该事件会一直被触发。