JavaScript事件类型：鼠标事件-原创手记-慕课网

Dom3级事件中定义了9个鼠标事件

1、click事件

click：用户单击鼠标主按钮（一般为左边按钮）或者在获得焦点的前提下按回车键时触发。
click()方法也可以触发click 事件。

2、dblclick事件、mousedown事件和mouseup事件

dblclick：用户双击鼠标主按钮（一般为左边按钮）时触发。
mousedown：按下任意鼠标按钮时触发。
mouseup：释放鼠标按钮时触发。

3、mouseenter事件、mousemove事件和mouseover事件

mouseenter：鼠标光标从元素外部首次移动到元素范围之内时触发，这个事件不冒泡，而且在光标移动到后代元素上不会重复触发。通常和mouseleave搭配使用。
mousemove：鼠标光标在元素内部移动时重复地触发。
mouseover：鼠标光标位于一个元素外部，首次移动到另一个元素边界之内（包括后代元素）时触发。

测试代码：

<div style='height:45px; width:150px; background:#FF0000;'>
  <p style='background:#FFFFFF'><span>0</span></p>
</div>
<div style='height:45px; width:150px; background:#000000;'>
  <p  style='background:#FFFFFF'><span>0</span></p>
</div>
<div style='height:45px; width:150px; background:#0000FF;'>
  <p  style='background:#FFFFFF'><span>0</span></p>
</div>

var Div=document.getElementsByTagName('div')
var arr=['mouseenter','mousemove','mouseover']

for(var i=0,len=Div.length;i<len;i++){
    (function(i){
        var Span=Div[i].getElementsByTagName('span')[0]
        var n=0
        Div[i].addEventListener(arr[i],function(){
            Span.innerHTML =n+=1
        })
    })(i)
}

4、mouseleave事件和mouseout事件

mouseleave：位于元素上方的鼠标光标移动到元素范围之外时触发，这个事件不冒泡，而且在光标移动到后代元素上不会触发。
mouseout：鼠标光标位于一个元素上方，然后用户将其移入另一个元素上时触发（另一个元素可以是这个元素的外部元素，也可以是这个元素的子元素）。

测试代码：

<div style='height:45px; width:150px; background:#FF0000;'>
  <p style='background:#FFFFFF'><span>0</span></p>
</div>
<div style='height:45px; width:150px; background:#000000;'>
  <p  style='background:#FFFFFF'><span>0</span></p>
</div>

var Div=document.getElementsByTagName('div')
var arr=['mouseleave','mouseout']

for(var i=0,len=Div.length;i<len;i++){
    (function(i){
        var Span=Div[i].getElementsByTagName('span')[0]
        var n=0
        Div[i].addEventListener(arr[i],function(){
            Span.innerHTML =n+=1
        })
    })(i)
}

HTML5中的contextmenu事件

contextmenu：通过单击鼠标右键（在Mac中是Ctrl＋单击）可以调出上下文菜单。开发人员可以通过此事件取消默认的上下文菜单而提供自定义的菜单。

例子：

<ul id='myMenu' style='position:absolute;visibility:hidden;background:#eee'>
    <li><a href=''>Menu1</a></li>
    <li><a href=''>Menu2</a></li>
    <li><a href=''>Menu3</a></li>
    <li><a href=''>Menu4</a></li>
</ul>

window.onload=function(){
    var Menu=document.getElementById('myMenu')
    document.addEventListener('contextmenu',function(event){
        event.preventDefault();
        Menu.style.left=event.pageX+'px';
        Menu.style.top=event.pageY+'px';
        Menu.style.visibility='visible';
    })
    document.addEventListener('click',function(event){
        Menu.style.visibility='hidden';
    })
}

文中的代码部分，带有“例子”和“测试代码”字样的，只是用来学习或测试某一功能用的代码，不可以直接用于项目的开发中。带有“代码如下”字样的，都是经过本人测试，简单修改即可用于项目开发中的代码，如有错误，欢迎指出。

JavaScript事件类型：鼠标事件原创