下面是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>
当鼠标进入黄色区域后,在黄、红、蓝三个区域里移动是不会产生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>
当鼠标移入黄色区域,然后进入蓝色区域时,会产生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!"