Mouse events in JS

click： Click events .
dblclick： Double-click the event .
mousedown： Trigger when mouse button is pressed .
mouseup： Triggered when the pressed mouse button is released .
mousemove： Mouse movement events .
mouseover： Move in event .
mouseout： Remove Events .
mouseenter： Move in event .
mouseleave： Remove Events .
contextmenu： Right click events .

mouseover Events and mouseenter event , It is triggered when the mouse enters a node . The difference between the two ,mouseenter The event is triggered only once , As long as the mouse moves inside the node ,mouseover The event will trigger multiple times on the child node .
 

var div = document.getElementById("div")
var p   = document.getElementById("p")
div.onmouseover=function(){
    console.log("div")
}
p.onmouseover=function(){
    console.log("p")            
}                               // bubbling phase 
div.onmouseenter=function(){
    console.log("div")
}
p.onmouseenter=function(){
    console.log("p")
}                               // Capture phase 

Mouse event properties
MouseEvent.altKey
MouseEvent.ctrlKey
MouseEvent.metaKey
MouseEvent.shiftKey
Respectively represents when the mouse event occurs , Whether the corresponding keyboard key is pressed . Return value is Boolean .

document.body.onclick=function(e){
    e=e||window.event
    console.log("altKey:"+e.altKey);            // Whether to press alt key 
    console.log("ctrlKey:"+e.ctrlKey);          // Whether to press Ctrl key 
    console.log("metaKey:"+e.metaKey);          // Whether to press meta key 
    console.log("shiftKey:"+e.shiftKey);        // Whether to press shift key 
}

MouseEvent.button Property returns a value , Indicates which mouse button was pressed when the event occurred .
0 For the left button
1 Represents the middle key
2 Right click

document.body.onmousedown=function(e){
    e=e||window.event
    console.log(e.button)
}

MouseEvent.clientX,MouseEvent.clientY
MouseEvent.clientX Property returns the horizontal coordinate of the mouse position relative to the upper left corner of the browser window ,
MouseEvent.clientY Property returns the vertical coordinate of the mouse position relative to the upper left corner of the browser window ,
Both properties are read-only .

document.body.onmousedown=function(e){
    e=e||window.event
    console.log(e.clientX,e.clientY)
}

MouseEvent.offsetX,MouseEvent.offsetY
MouseEvent.offsetX Property returns the horizontal distance between the mouse position and the left edge of the event object ,
MouseEvent.offsetY Property returns the vertical distance between the mouse position and the left edge of the event object ,
Both properties are read-only .

div.onclick=function(e){
    e=e||window.event
    console.log(e.offsetX,e.offsetY)
    // When the mouse event is triggered , The distance between the current mouse position and the upper left corner of the target node 
}

MouseEvent.pageX,MouseEvent.pageY
MouseEvent.pageX Property returns the distance between the mouse position and the left edge of the document ,
MouseEvent.pageY Property returns the distance from the mouse position to the top of the document .
Both properties are read-only .

document.body.onclick=function(e){
    e=e||window.event
    console.log("pageY:"+e.pageY)               // From the top of the document 
    console.log("clientY:"+e.clientY)           // From the top of the visual window 
}

MouseEvent.movementX,MouseEvent.movementY( understand )
MouseEvent.movementX Property returns the previous mousemove Events and current mousemove Horizontal displacement between events ,
MouseEvent.movementY Property returns the previous mousemove Events and current mousemove The vertical distance of the event .
Both properties are read-only .
e.screenX,e,screenY
Horizontal and vertical distance from the screen
Mouse wheel events
The scroll event in Firefox is DOMMouseScroll, In other browsers onmousewheel.
Roll up and down and save to e.detail Inside
firefox ：e.detail Drop too Oh
Scroll up to return a value greater than 0
Scroll down to return a value less than 0
Non Firefox ：e.wheelDelta Take special
Scroll up to return a value less than 0
Scroll down to return a value greater than 0
 

function wheelEvent(e){
            e=e||window.event
            if(e.detail){   // Judge whether to support e.detail     If you support it, it means Firefox 
                if(e.detail<0){
                    console.log(" Scroll up ")
                }else{
                    console.log(" Scroll down ")
                }
            }else{          // I won't support it , Description is other browsers 
                if(e.wheelDelta<0){
                    console.log(" Scroll down ")
                }else{
                    console.log(" Scroll up ")
                }
            }
        }
        
document.body.onmousewheel=wheelEvent                           
document.body.addEventListener("mousewheel",wheelEvent)         // Non Firefox 
document.body.addEventListener("DOMMouseScroll",wheelEvent)     // firefox