鼠標(biāo)事件
先列出html5中鼠標(biāo)常見的一系列事件：
| 事件名稱 | 描述 |
|---|---|
| onclick | 當(dāng)單擊鼠標(biāo)時(shí)運(yùn)行腳本 |
| ondblclick | 當(dāng)雙擊鼠標(biāo)時(shí)運(yùn)行腳本 |
| ondrag | 當(dāng)拖動(dòng)元素時(shí)運(yùn)行腳本 |
| ondragend | 當(dāng)拖動(dòng)操作結(jié)束時(shí)運(yùn)行腳本 |
| ondragenter | 當(dāng)元素被拖動(dòng)至有效的拖放目標(biāo)時(shí)運(yùn)行腳本 |
| ondragleave | 當(dāng)元素離開有效拖放目標(biāo)時(shí)運(yùn)行腳本 |
| ondragover | 當(dāng)元素被拖動(dòng)至有效拖放目標(biāo)上方時(shí)運(yùn)行腳本 |
| ondragstart | 當(dāng)拖動(dòng)操作開始時(shí)運(yùn)行腳本 |
| ondrop | 當(dāng)被拖動(dòng)元素正在被拖放時(shí)運(yùn)行腳本 |
| onmousedown | 當(dāng)按下鼠標(biāo)按鈕時(shí)運(yùn)行腳本 |
| onmousemove | 當(dāng)鼠標(biāo)指針移動(dòng)時(shí)運(yùn)行腳本 |
| onmouseout | 當(dāng)鼠標(biāo)指針移出元素時(shí)運(yùn)行腳本 |
| onmouseover | 當(dāng)鼠標(biāo)指針移至元素之上時(shí)運(yùn)行腳本 |
| onmouseup | 當(dāng)松開鼠標(biāo)按鈕時(shí)運(yùn)行腳本 |
| onmousewheel | 當(dāng)轉(zhuǎn)動(dòng)鼠標(biāo)滾輪時(shí)運(yùn)行腳本 |
| onscroll | 當(dāng)滾動(dòng)元素滾動(dòng)元素的滾動(dòng)條時(shí)運(yùn)行腳本 |
下面的例子實(shí)現(xiàn)了部分鼠標(biāo)事件：
<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("我被點(diǎn)了一下寝衫！")
}
function mydblclick(){
console.log("我被點(diǎn)了兩下甫题！")
}
function mymouseEnter(){
console.log("我的鼠標(biāo)移進(jìn)來(lái)了铛碑！")
}
function mymousesDown(){
console.log("我的鼠標(biāo)點(diǎn)下去了蟹肘！")
}
function mymouseUp(){
console.log("我的鼠標(biāo)松開了仁讨！")
}
</script>
運(yùn)行以上代碼，可以發(fā)現(xiàn)如下幾個(gè)問(wèn)題：
- ondblclick表示雙擊归榕，觸發(fā)這個(gè)函數(shù)時(shí)码泞，同時(shí)也執(zhí)行了兩次 onclick 鼠標(biāo)單擊函數(shù)。
在上述例子中幅聘，雙擊元素會(huì)輸出： 我被點(diǎn)了一下凡纳！我被點(diǎn)了一下！我被點(diǎn)了兩下喊暖！ - onclick事件是 onmousedown事件和onmouseup事件的結(jié)合體惫企。實(shí)際上onclick事件是在onmouseup事件觸發(fā)后再觸發(fā)撕瞧；
單擊元素陵叽，先輸出： 我的鼠標(biāo)松開了狞尔！，再輸出：我被點(diǎn)了一下巩掺！
鼠標(biāo)事件屬性
在使用鼠標(biāo)事件函數(shù)時(shí)可以往函數(shù)中傳入event參數(shù)偏序，event代表鼠標(biāo)的事件對(duì)象。
例如：
<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>
運(yùn)行頁(yè)面胖替，單擊元素研儒，在控制臺(tái)中可見：
MouseEvent對(duì)象
對(duì)象中常見屬性介紹：
| 屬性 | 描述 |
|---|---|
| clientX | 返回鼠標(biāo)位置相對(duì)于瀏覽器窗口左上角的水平坐標(biāo) |
| clientY | 返回鼠標(biāo)位置相對(duì)于瀏覽器窗口左上角的垂直坐標(biāo) |
| offsetX | 返回鼠標(biāo)位置距離事件作用對(duì)象左側(cè)邊緣的水平距離 |
| offsetY | 返回鼠標(biāo)位置距離事件作用對(duì)象左側(cè)邊緣的垂直距離 |
| pageX | 返回鼠標(biāo)位置距離文檔左側(cè)邊緣的距離 |
| pageY | 返回鼠標(biāo)位置距離文檔頂部的距離 |
| altKey | 鼠標(biāo)事件發(fā)生時(shí)是否按下了alt鍵，返回為bool值 |
| ctrlKey | 鼠標(biāo)事件發(fā)生時(shí)是否按下了ctrl鍵独令，返回為bool值 |
| metaKey | 鼠標(biāo)事件發(fā)生時(shí)是否按下了meta鍵端朵，返回為bool值 |
| shiftKey | 鼠標(biāo)事件發(fā)生時(shí)是否按下了shift鍵，返回為bool值 |
其他的可以自己點(diǎn)開看看燃箭，輸出試試冲呢；
舉例：
<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("觸發(fā)事件的dom元素的ID："+event.target.id)
console.log("事件類型："+event.type)
}
</script>
結(jié)果如下：
