click：单击事件。

dblclick：双击事件。

mousedown：按下鼠标键时触发。

mouseup：释放按下的鼠标键时触发。

mousemove：鼠标移动事件。

mouseover：移入事件。

mouseout：移出事件。

mouseenter：移入事件。

mouseleave：移出事件。

contextmenu：右键事件。

mouseover事件和mouseenter事件，都是鼠标进入一个节点时触发。两者的区别是，mouseenter事件只触发一次，而只要鼠标在节点内部移动，mouseover事件会在子节点上触发多次。

var div = document.getElementById("div")

var p = document.getElementById("p")

div.onmouseover=function(){

console.log("div")

}

p.onmouseover=function(){

console.log("p")

} //冒泡阶段

div.onmouseenter=function(){

console.log("div")

}

p.onmouseenter=function(){

console.log("p")

} //捕获阶段

鼠标事件属性

MouseEvent.altKey

MouseEvent.ctrlKey

MouseEvent.metaKey

MouseEvent.shiftKey

分别代表鼠标事件发生时，是否按下了对应的键盘按键。返回值为布尔值。

document.body.onclick=function(e){

e=e||window.event

console.log("altKey:"+e.altKey); //是否按下alt键

console.log("ctrlKey:"+e.ctrlKey); //是否按下Ctrl键

console.log("metaKey:"+e.metaKey); //是否按下meta键

console.log("shiftKey:"+e.shiftKey); //是否按下shift键

}

MouseEvent.button属性返回一个数值，表示事件发生时按下了鼠标的哪个键。

0代表左键

1代表中键

2代表右键

document.body.onmousedown=function(e){

e=e||window.event

console.log(e.button)

}

MouseEvent.clientX，MouseEvent.clientY

MouseEvent.clientX属性返回鼠标位置相对于浏览器窗口左上角的水平坐标，

MouseEvent.clientY属性返回鼠标位置相对于浏览器窗口左上角的垂直坐标，

这两个属性都是只读属性。

document.body.onmousedown=function(e){

e=e||window.event

console.log(e.clientX,e.clientY)

}

MouseEvent.offsetX，MouseEvent.offsetY

MouseEvent.offsetX属性返回鼠标位置距离事件作用对象左侧边缘的水平距离，

MouseEvent.offsetY属性返回鼠标位置距离事件作用对象左侧边缘的垂直距离，

这两个属性都是只读属性。

div.onclick=function(e){

e=e||window.event

console.log(e.offsetX,e.offsetY)

//鼠标事件触发时,当前鼠标位置距离目标节点左上角的距离

}

MouseEvent.pageX，MouseEvent.pageY

MouseEvent.pageX属性返回鼠标位置距离文档左侧边缘的距离，

MouseEvent.pageY属性返回鼠标位置距离文档顶部的距离。

这两个属性都是只读属性。

document.body.onclick=function(e){

e=e||window.event

console.log("pageY:"+e.pageY) //距离文档顶部

console.log("clientY:"+e.clientY) //距离可视窗口顶部

}

MouseEvent.movementX，MouseEvent.movementY(了解)

MouseEvent.movementX属性返回上一个mousemove事件与当前mousemove事件间的水平位移，

MouseEvent.movementY属性返回上一个mousemove事件与当前mousemove事件的垂直距离。

这两个属性都是只读属性。

e.screenX,e,screenY

距离屏幕的水平和垂直距离

鼠标滚轮事件

滚轮事件在火狐浏览器中是DOMMouseScroll，而在其他浏览器中是onmousewheel。

向上下滚就保存到e.detail里面

火狐：e.detail 滴太哦

向上滚动返回值为大于0

向下滚动返回值为小于0

非火狐：e.wheelDelta 带哦特

向上滚动返回值为小于0

向下滚动返回值为大于0

function wheelEvent(e){

e=e||window.event

if(e.detail){ //判断是否支持e.detail 支持的话说明是火狐

if(e.detail<0){

console.log("向上滚动")

}else{

console.log("向下滚动")

}

}else{ //不支持,说明是其他浏览器

if(e.wheelDelta<0){

console.log("向下滚动")

}else{

console.log("向上滚动")

}

}

}

document.body.onmousewheel=wheelEvent

document.body.addEventListener("mousewheel",wheelEvent) //非火狐

document.body.addEventListener("DOMMouseScroll",wheelEvent) //火狐