说明
鼠标操作时，触发事件，执行函数
事件类型
- mousedown : 按下鼠标按键时触发的事件。
- mouseup : 鼠标按键按下后，弹起时触发的事件
- click : 按下鼠标并弹起，是一次点击事件
- dblclick : 鼠标双击时触发的事件
- mousemove : 鼠标移动时触发的事件，会一直触发
- mousewheel ：鼠标滚轮滚动式触发的事件。
- contextmenu：鼠标右键菜单弹出前触发的事件。
鼠标移入移出1
- mouseover : 鼠标移入到某对象范围 触发的事件
- mouseout : 鼠标移出某对象范围 触发的事件。
注意：鼠标指针移入、移出 元素 或 其子元素，都会触发该事件，即：会发生 事件冒泡
鼠标移入移出2
- mouseenter：鼠标移入到某对象范围 触发的事件
- mouseleave：鼠标移出某对象范围 触发的事件
注意：鼠标指针移入、移出 元素 时，才会触发该事件
案例-各种点击事件
css：
<style>
#box{
width: 200px;
height: 200px;
background-color: cadetblue;
}
</style>
html：
<div id="box"></div>
JavaScript
注意： click 一般不与 onmousedown、onmouseup 同时存在
<script type="text/javascript">
var boxObj = document.getElementById("box")
boxObj.addEventListener("dblclick",function(){
console.log("触发双击事件")
})
boxObj.addEventListener("mousedown",function(){
console.log("鼠标按下事件")
})
boxObj.addEventListener("mouseup",function(){
console.log("鼠标弹起事件")
})
boxObj.addEventListener("click",function(){
console.log("鼠标点击事件")
})
</script>
执行结果：
案例
css：
<style>
#box{
width: 200px;
height: 200px;
background-color: cadetblue;
}
</style>
html：
<div id="box"></div>
JavaScript：
<script>
var boxObj = document.getElementById("box")
boxObj.onmouseover = function(event){
boxObj.innerText="鼠标移入"
boxObj.style.backgroundColor = "goldenrod"
event.target.style.cursor='crosshair' // 设置鼠标显示十字准星
}
boxObj.onmouseout = function(){
boxObj.innerText="鼠标移出"
boxObj.style.backgroundColor = "cadetblue"
}
// onclick 一般不与 onmousedown、onmouseup同时存在
// boxObj.onclick = function(){
// boxObj.innerText="手拿开"
// }
boxObj.onmousedown = function(){
boxObj.innerText="开枪"
}
boxObj.onmouseup = function(){
boxObj.innerText=""
}
boxObj.onmousemove = function(event){
console.log("鼠标移动：",event.clientX,event.clientY)
}
box.onmousewheel = function(){
console.log("滚轮滚动")
}
box.oncontextmenu = function(e){
console.log("右键菜单")
// 阻止默认行为，写在菜单事件中，表示阻止右键菜单
e.preventDefault()
}
</script>