鼠標事件
1.事件：
事件，是一種可以被js檢測到的行為，本質是一種交互操作
事件的作用：
① 各個元素之間可以借助事件進行交互
② 用戶和頁面之間也可以通過事件交互
③ 后端和頁面之間也可以通過事件交互
注意，事件通常與函數配合使用，事件發生時觸發函數執行
2.鼠標事件
js鼠標事件是指通過鼠標一系列操作（如點擊、進入等）來出發的時間
① 鼠標事件類型：
click，單擊事件
dblclick，雙擊事件
mousedown，鼠標按下時觸發
mouseup，鼠標抬起時觸發
mousemove，鼠標移動時觸發
mouseenter，鼠標移入時觸發（不冒泡）
mouseleave，鼠標移除時觸發（不冒泡）
mouseover，鼠標移入時觸發（冒泡）
mouseout，鼠標移出時觸發（冒泡）
語法：元素節點 .on+鼠標事件名 = 調用函數名；
示例：slem .ondblclick = function(){ 函數體; };
② 鼠標事件原則
鼠標的基本事件默認采用冒泡傳遞
可以給一個節點添加多個鼠標事件，不同的鼠標事件之間互不影響
mouseenter和mouseleave兩個事件為不冒泡事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <p>我們檢測到您的電腦存在2.4G的垃圾，請點擊清理緩存，進行清理</p> <button>清理緩存</button> </body> </html> <script> // onmousedown ,onmouseup,onmousemove,onmouseenter,onmouseover,onmouseleave, // onmouseout,onmousewheel,ondblclick var btns=document.getElementsByTagName('button') btns[0].onmousedown=function () { console.log("鼠標按下") } btns[0].onmouseup=function () { console.log("鼠標抬起") } btns[0].onmousemove=function () { console.log("鼠標移動") } btns[0].onmouseenter=function () { console.log("鼠標進入") } btns[0].onmouseover=function () { console.log("鼠標進入over") } btns[0].onmouseleave=function () { console.log("鼠標移出2") } btns[0].onmouseout=function () { console.log("鼠標移出") } btns[0].onmousewheel=function () { console.log("鼠標滾動") } btns[0].onmousedblclick=function () { console.log("鼠標雙擊") } </script>