鼠标事件
先列出html5中鼠标常见的一系列事件：
| 事件名称 | 描述 |
|---|---|
| onclick | 当单击鼠标时运行脚本 |
| ondblclick | 当双击鼠标时运行脚本 |
| ondrag | 当拖动元素时运行脚本 |
| ondragend | 当拖动操作结束时运行脚本 |
| ondragenter | 当元素被拖动至有效的拖放目标时运行脚本 |
| ondragleave | 当元素离开有效拖放目标时运行脚本 |
| ondragover | 当元素被拖动至有效拖放目标上方时运行脚本 |
| ondragstart | 当拖动操作开始时运行脚本 |
| ondrop | 当被拖动元素正在被拖放时运行脚本 |
| onmousedown | 当按下鼠标按钮时运行脚本 |
| onmousemove | 当鼠标指针移动时运行脚本 |
| onmouseout | 当鼠标指针移出元素时运行脚本 |
| onmouseover | 当鼠标指针移至元素之上时运行脚本 |
| onmouseup | 当松开鼠标按钮时运行脚本 |
| onmousewheel | 当转动鼠标滚轮时运行脚本 |
| onscroll | 当滚动元素滚动元素的滚动条时运行脚本 |
下面的例子实现了部分鼠标事件：
<style type="text/css">
div { width: 30px;border: 1px solid gray; height: 30px;background-color: coral;}
</style>
<body>
<div id="box"
onclick = "myclick()"
ondblclick="mydblclick()"
onmouseenter="mymouseEnter()"
onmousedown="mymousesDown()"
onmouseup="mymouseUp()"
></div>
</body>
<script type="text/javascript">
function myclick(){
console.log("我被点了一下！")
}
function mydblclick(){
console.log("我被点了两下！")
}
function mymouseEnter(){
console.log("我的鼠标移进来了！")
}
function mymousesDown(){
console.log("我的鼠标点下去了！")
}
function mymouseUp(){
console.log("我的鼠标松开了！")
}
</script>
运行以上代码，可以发现如下几个问题：
- ondblclick表示双击，触发这个函数时，同时也执行了两次 onclick 鼠标单击函数。
在上述例子中，双击元素会输出： 我被点了一下！我被点了一下！我被点了两下！ - onclick事件是 onmousedown事件和onmouseup事件的结合体。实际上onclick事件是在onmouseup事件触发后再触发；
单击元素，先输出： 我的鼠标松开了！，再输出：我被点了一下！
鼠标事件属性
在使用鼠标事件函数时可以往函数中传入event参数，event代表鼠标的事件对象。
例如：
<style type="text/css">
div { width: 30px;border: 1px solid gray; height: 30px;background-color: coral;}
</style>
<body>
<div id="box" onclick = "myclick(event)"></div>
</body>
<script type="text/javascript">
function myclick(event){
console.log(event)
}
</script>
运行页面，单击元素，在控制台中可见：
MouseEvent对象
对象中常见属性介绍：
| 属性 | 描述 |
|---|---|
| clientX | 返回鼠标位置相对于浏览器窗口左上角的水平坐标 |
| clientY | 返回鼠标位置相对于浏览器窗口左上角的垂直坐标 |
| offsetX | 返回鼠标位置距离事件作用对象左侧边缘的水平距离 |
| offsetY | 返回鼠标位置距离事件作用对象左侧边缘的垂直距离 |
| pageX | 返回鼠标位置距离文档左侧边缘的距离 |
| pageY | 返回鼠标位置距离文档顶部的距离 |
| altKey | 鼠标事件发生时是否按下了alt键，返回为bool值 |
| ctrlKey | 鼠标事件发生时是否按下了ctrl键，返回为bool值 |
| metaKey | 鼠标事件发生时是否按下了meta键，返回为bool值 |
| shiftKey | 鼠标事件发生时是否按下了shift键，返回为bool值 |
其他的可以自己点开看看，输出试试；
举例：
<style type="text/css">
div { width: 30px;border: 1px solid gray; height: 30px;background-color: coral;}
</style>
<body>
<div id="box" onclick = "myclick(event)"></div>
</body>
<script type="text/javascript">
function myclick(event){
console.log(event)
console.log("触发事件的dom元素的ID："+event.target.id)
console.log("事件类型："+event.type)
}
</script>
结果如下：
