javascript之鼠标事件

鼠标事件

假定有一个按钮，通过这个按钮触发鼠标事件

<button id="btn">点我</button>

鼠标单击onclick

语法形式

DOM对象.οnclick=匿名函数

//获取DOM对象 let btn=document.getElementById("btn") //设置鼠标单击事件 btn.onclick=function() { console.log("点击事件") }

鼠标双击事件

语法形式

DOM对象.ondblclick

//获取DOM对象 let btn=document.getElementById("btn") //设置鼠标双击事件 btn.ondblclick=function() { console.log("双击事件") }

鼠标移到某元素之上

语法

DOM对象.onmouseover

//获取DOM对象 let btn=document.getElementById("btn") btn.onmousemove=function() { console.log("鼠标移动事件") }

鼠标离开某个元素

语法

DOM对象.onmouseout

//获取DOM对象 let btn=document.getElementById("btn") //设置鼠标离开时事件 btn.onmouseout=function() { console.log("鼠标离开事件") }

鼠标点下去事件

语法

DOM对象.onmousedown

//获取DOM对象 let btn=document.getElementById("btn") //设置鼠标点下去的事件 btn.onmousedown=function() { console.log("鼠标点下去事件") }

鼠标松开的事件

语法

DOM对象.onmouseup

//获取DOM对象 let btn=document.getElementById("btn") //设置鼠标松开的对象 btn.onmouseup=function() { console.log("鼠标松开事件") }

鼠标右键点击事件

语法

DOM事件.oncontextmenu

//获取DOM对象 let btn=document.getElementById("btn") //设置鼠标右键点击事件 btn.oncontextmenu=function() { console.log("鼠标右键点击事件") }