鼠标事件:
点击事件:
onclick 鼠标点击左键触发
ondblclick 鼠标左键双击触发
oncontextmenu 鼠标右击点击事件
离开事件:
onmouseout 鼠标离开触发 经过子节点的时候会触发
onmouseleave 鼠标离开触发
进入事件:
onmouseover 鼠标经过触发 经过子节点的时候会触发
onmouseenter 鼠标进入
onmousemove 鼠标移动触发 鼠标移入会不停的触发
按下弹起事件:
onmousedown 鼠标按下触发
onmouseup 鼠标弹起触发
<button id="btn1">鼠标点击左键触发</button>
<button id="btn2">鼠标左键双击触发</button>
<button id="btn3">鼠标右击点击事件</button>
<button id="btn4">鼠标离开触发out</button>
<button id="btn5">鼠标离开触发leave</button>
<button id="btn6"> 鼠标经过触发</button>
<button id="btn7">鼠标进入</button>
<button id="btn8">鼠标移动触发</button>
<button id="btn9">鼠标按下触发</button>
<button id="btn10">鼠标弹起触发</button>
<script>
// 点击事件
// onclick 鼠标点击左键触发
btn1.onclick = function(){
console.log("我是点击事件,我经常能被用到");
}
// ondblclick 鼠标左键双击触发
btn2.ondblclick = function(){
console.log("我是双击事件,一般用于打开某个软件或文件");
}
// oncontextmenu 鼠标右击点击事件
btn3.oncontextmenu = function(){
console.log("我是右击事件,我一般用于右击出现菜单栏,有刷新复制等动能");
}
// 离开事件
// onmouseout 鼠标离开触发 经过子节点的时候会触发
btn4.onmouseout = function () {
console.log("我是鼠标离开事件,但是请注意我经过子元素会触发");
}
// onmouseleave 鼠标离开触发
btn5.onmouseleave = function(){
console.log("我也是鼠标离开事件,请注意我和OUT的区别,用的时候请根据具体需求选着");
}
// 进入事件
// onmouseover 鼠标经过触发 经过子节点的时候会触发
btn6.onmouseover = function(){
console.log("我是鼠标经过事件,我和离开事件out有相同之处,都是会经过子元素触发");
}
// onmouseenter 鼠标进入
btn7.onmouseenter = function(){
console.log("我是鼠标进入事件");
}
// onmousemove 鼠标移动触发 鼠标移入会不停的触发
btn8.onmousemove = function(){
console.log("我是鼠标移动触发,所以使用时请注意我的输出值,只要鼠标动我就会触发");
}
// 按下弹起事件
// onmousedown 鼠标按下触发
btn9.onmousedown = function(){
console.log("我是鼠标按下事件。请注意,我是推荐使用的,只要是按下我就会触发");
}
// onmouseup 鼠标弹起触发
btn10.onmouseup = function(){
console.log("我是鼠标弹起事件,只要你按住不松手,我就不会被触发");
}
</script>