JavaScript mouse events

This div tag with the following mouse events to do the presentation, when the mouse is 'I am div' operating position and 'I'm span' of the two locations and beyond, different events operating results

<Div class = "div1"> I am a div

　　<br>

        <Span> I am a span </ span>

    </div>

1, left-click event click

var oDiv = document.querySelector ( 'div' ); 
oDiv.onclick = function () { 
    the console.log ( 'which is a left-click event " ); 
}

2, left double-click event dbclick

var oDiv = document.querySelector ( 'div' ); 
oDiv.ondbclick = function () { 
    the console.log ( 'which is a left click event " ); 
}

3, right-click contextmenu event

var oDiv = document.querySelector ( 'div' ); 
oDiv.oncontextmenu = function () { 
    the console.log ( 'which is a right-click event " ); 
}

4, mouse down event mousedown

var oDiv = document.querySelector ( 'div' );
 // just press triggered, either right or left key 
oDiv.onmousedown = function () { 
    the console.log ( "mouse down event ' ); 
}

5, `` lift the mouse down event mouseup

var oDiv = document.querySelector ( 'div' );
 // just lifted triggered, either right or left key 
oDiv.onmouseup = function () { 
    the console.log ( 'mouse leave event' ); 
}

6, move the mouse events
through the boundary line trigger mouseover mouseenter

// every elapse of a child triggers a 
var oDiv = document.querySelector ( 'div' ); 
oDiv.onmouseover = function () { 
    the console.log ( 'the mouse over event' ); 
} 
// triggered only once, the parent post-trigger, after the trigger is no longer child 
var oDiv = document.querySelector ( 'div' ); 
oDiv.onmouseenter = function () { 
    the console.log ( 'mouse enter events' ); 
}

7, mouse out events
through the boundary line trigger mouseout mouseleave

// After the parent do not trigger away from the parent and child, or enter other level trigger 
var oDiv = document.querySelector ( 'div' ); 
oDiv.onmouseout = function () { 
    the console.log ( 'out mouse events' ); 
} 
// into the parent does not trigger, the trigger does not enter the sub-stage, leaving the parent trigger 
var oDiv = document.querySelector ( 'div' ); 
oDiv.onmouseleave = function () { 
    the console.log ( 'mouse leave events ' ); 
}

8, mousemove mouse movements
to move the mouse within the range of labels again, it will trigger an event, similar to hover

// mouse parent inside, with every step will trigger effect, also for small movements of the recording 
var oDiv = document.querySelector ( 'div' ); 
oDiv.onmousemove = function () { 
    the console.log ( 'mouse move event' ); 
}