摘要：
下面的div标记用于演示鼠标事件。当鼠标在“I am div”和“I am span”两个位置处或外部操作时，不同事件的操作结果不同I am divI am span1。左键单击事件clickvaroDiv=document。查询选择器（'div'）；oDiv.onclick=函数（）｛cons
利用下面这个div标签来做鼠标事件的演示，当把鼠标在‘我是div’和’我是span‘两个位置及其之外的位置上操作时，不同事件操作结果不同
<div class="div1">我是div
<br>
<span>我是span</span>
</div>
1、左键单击事件 click
var oDiv = document.querySelector('div'); oDiv.onclick = function(){ console.log('这是一个左键单击事件'); }
2、左键双击事件 dbclick
var oDiv = document.querySelector('div'); oDiv.ondbclick = function(){ console.log('这是一个左键双击事件'); }
3、右键单击事件 contextmenu
var oDiv = document.querySelector('div'); oDiv.oncontextmenu = function(){ console.log('这是一个右键单击事件'); }
4、鼠标器按下事件 mousedown
var oDiv = document.querySelector('div'); //只要按下就触发，不分左右键 oDiv.onmousedown = function(){ console.log('鼠标按下事件'); }
5、鼠标按下抬起`` 事件 mouseup
var oDiv = document.querySelector('div'); //只要抬起就触发，不分左右键 oDiv.onmouseup = function(){ console.log('鼠标离开事件'); }
6、鼠标移入事件
经过边界线触发 mouseover mouseenter
//每经过一个子级都会触发一次 var oDiv = document.querySelector('div'); oDiv.onmouseover = function(){ console.log('鼠标over事件'); } //只触发一次，父级触发后，经过子级不再触发 var oDiv = document.querySelector('div'); oDiv.onmouseenter = function(){ console.log('鼠标enter事件'); }
7、鼠标移出事件
经过边界线触发 mouseout mouseleave
//经过父级不触发，从父级离开，并进入子级或其他级触发 var oDiv = document.querySelector('div'); oDiv.onmouseout = function(){ console.log('鼠标out事件'); } //进入父级不触发，进入子级也不触发，离开父级触发 var oDiv = document.querySelector('div'); oDiv.onmouseleave = function(){ console.log('鼠标leave事件'); }
8、鼠标移动 mousemove
鼠标再标签范围内移动，会触发事件，类似于hover
//鼠标在父级里面，每移动一步都会触发效果，小幅度移动也被记录 var oDiv = document.querySelector('div'); oDiv.onmousemove = function(){ console.log('鼠标move事件'); }