鼠标事件
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>
// onm ousedown ,onmouseup,onmousemove,onmouseenter,onmouseover,onmouseleave,
// onm ouseout,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>