事件（鼠标事件）

鼠标事件：

点击事件：

onclick 鼠标点击左键触发

ondblclick 鼠标左键双击触发

oncontextmenu 鼠标右击点击事件

离开事件：

onmouseout 鼠标离开触发 经过子节点的时候会触发

onmouseleave 鼠标离开触发

进入事件：

onmouseover 鼠标经过触发 经过子节点的时候会触发

onmouseenter 鼠标进入

onmousemove 鼠标移动触发 鼠标移入会不停的触发

按下弹起事件：

onmousedown 鼠标按下触发

onmouseup  鼠标弹起触发

<button id="btn1">鼠标点击左键触发</button>
<button id="btn2">鼠标左键双击触发</button>
<button id="btn3">鼠标右击点击事件</button>
<button id="btn4">鼠标离开触发out</button>
<button id="btn5">鼠标离开触发leave</button>
<button id="btn6"> 鼠标经过触发</button>
<button id="btn7">鼠标进入</button>
<button id="btn8">鼠标移动触发</button>
<button id="btn9">鼠标按下触发</button>
<button id="btn10">鼠标弹起触发</button>
<script>
// 点击事件
//     onclick  鼠标点击左键触发
btn1.onclick = function(){
    console.log("我是点击事件，我经常能被用到");
}
//     ondblclick 鼠标左键双击触发
btn2.ondblclick = function(){
    console.log("我是双击事件，一般用于打开某个软件或文件");
}
//     oncontextmenu  鼠标右击点击事件
btn3.oncontextmenu = function(){
    console.log("我是右击事件，我一般用于右击出现菜单栏，有刷新复制等动能");
}
// 离开事件
//     onmouseout 鼠标离开触发  经过子节点的时候会触发
btn4.onmouseout = function () {
    console.log("我是鼠标离开事件，但是请注意我经过子元素会触发");
}
//     onmouseleave  鼠标离开触发
btn5.onmouseleave = function(){
    console.log("我也是鼠标离开事件，请注意我和OUT的区别，用的时候请根据具体需求选着");
}
// 进入事件
//     onmouseover 鼠标经过触发  经过子节点的时候会触发
btn6.onmouseover = function(){
    console.log("我是鼠标经过事件，我和离开事件out有相同之处,都是会经过子元素触发");
}
//     onmouseenter  鼠标进入
btn7.onmouseenter = function(){
    console.log("我是鼠标进入事件");
}
//     onmousemove  鼠标移动触发  鼠标移入会不停的触发
btn8.onmousemove = function(){
    console.log("我是鼠标移动触发，所以使用时请注意我的输出值，只要鼠标动我就会触发");
}
// 按下弹起事件
//     onmousedown  鼠标按下触发
btn9.onmousedown = function(){
    console.log("我是鼠标按下事件。请注意，我是推荐使用的，只要是按下我就会触发");
}
//     onmouseup  鼠标弹起触发
btn10.onmouseup = function(){
    console.log("我是鼠标弹起事件，只要你按住不松手，我就不会被触发");
}
</script>