下面是9个鼠标事件。
click:单击鼠标左键或者按下回车键时触发。
dblclick:双击鼠标左键时触发。
mousedown:鼠标按钮被按下（左键或者右键）时触发。不能通过键盘触发。
mouseup:鼠标按钮被释放弹起时触发。不能通过键盘触发。
mouseover:鼠标移入目标元素上方。
mouseout:鼠标移出目标元素上方。
mousemove:用户移动鼠标是触发。
mouseenter:类似mouseover，但该事件不冒泡，即鼠标移到其后代元素上时不会触发。
mouseleave:类似mouseout，但该事件不冒泡，即鼠标移到其后代元素时不会触发。
页面上的所有元素都支持鼠标事件，除了mouseenter和mouseleave事件外，所有的鼠标事件都会冒泡
以mouseleave和mouseout为例：
mouseleave事件
<ul id="test" style="background:yellow;">
<li style="background:red;">haha</li>
<li style="background:blue;">lala</li>
</ul>
<script>
test=document.getElementById("test");
test.onmouseleave=test.onmouseleave =function(e){
test.innerHTML += e.bubbles;//false
}
</script>
mouseleave
当鼠标进入黄色区域后，在黄、红、蓝三个区域里移动是不会产生false的，只有当鼠标移出至白色区域才会产生false，表示mouseleave事件是不冒泡的，即鼠标移到其后代元素上时不会触发。
mouseout事件
<ul id="test" style="background:yellow;">
<li style="background:red;">haha</li>
<li style="background:blue;">lala</li>
</ul>
<script>
test=document.getElementById("test");
test.onmouseout=test.onmouseleave =function(e){
test.innerHTML += e.bubbles;//false
}
</script>
mouseout
当鼠标移入黄色区域，然后进入蓝色区域时，会产生true，因为触发了父级元素的mouseout事件，当鼠标从蓝色到红色，同样会产生true，因为触发了子级元素的mouseout事件，由此可见，mouseout事件时冒泡的，即后代元素也会触发。
bubbles事件：返回一个布尔值，如果事件是起泡类型，则返回 true，否则返回 fasle。
鼠标左键和右键
document.onmousedown=function (ev)
{
var oEvent=ev||event; //IE浏览器直接使用event或者window.event得到事件本身。
alert(oEvent.button);// IE下鼠标的 左键是1 ， 右键是2 ff和chrome下 鼠标左键是0 右键是2
};
button 事件：属性可返回一个整数，指示当事件被触发时哪个鼠标按键被点击。
<html>
<head>
<script type="text/javascript">
function whichButton(event)
{
if (event.button==2)
{
alert("You clicked the right mouse button!")
}
else
{
alert("You clicked the left mouse button!")
}
}
</script>
</head>
<body onmousedown="whichButton(event)">
<p>Click in the document. An alert box will
alert which mouse button you clicked.</p>
</body>
</html>
上面的代码可以实现当用户使用鼠标右键的时候，弹出"You clicked the right mouse button!"，否则弹出"You clicked the left mouse button!"
网友评论