A simple summary about the event

Events: There are three main parts.
　　　　Event Source: source departure events such as obox, oul and other
　　　　types of events: What behavior by triggering events, such as onclick, onmousedown and other
　　　　event handlers: trigger this behavior, do things function.

= function obox.onclick () { 
        the console.log (1) 
    } 
Click obox appears in the console 1

 

　　Event Object 

Elements of the event object acquisition 

 

var obox = document.querySelector ( ". box ") // selected object class called box can be added # to select the above mentioned id 
var OP = document.querySelectorAll ( "p") // select all the p tags returned a We called the op array 
var obox = document.getElementById ( "kaka" ) // selected element with an id of kaka 
var obox = document.getElementsByClassName ( "xaxa" ) // a class for the selected element xaxa of 
var aspan = document .getElementByTagName ( "span") // get span tag name 
var auser = document.getElementsByName ( 'user' ) // get the name of the user element

 

　　Coordinate attributes

Mobile positioning coordinates of the object and the mouse

Width and height of the visible area 
            obox.clientWidth 
            obox.clientHeight 
comprises a scroll area width and height (in the case of an overflow of the adaptive scroll bar is generated, but also have distance) 
　　　　　　　obox.scrollWidth 
　　　　　　　obox.scrollHeight 
region of visible borders height 
　　　　　　　obox.offsetWidth 
　　　　　　　obox.offsetHeight 
element with respect to the block including the offset 
　　　　　　　obox.offsetTop 
　　　　　　　obox.offsetLeft 
left and Top generated when rolling 
　　　　　　　obox.scrollLeft 
　　　　　　　obox.ScrollTop 
============= ================================================== ============== 

mouse coordinates relative to the source of the event 
 　　　　　　.offsetX 
　　　　　　 .offsetY 
mouse coordinates relative to the page, but 
　　　　　　 .clientX 
　　　　　　 .elientY 
mouse coordinates relative to the page 
　　　　　　 .pageX 
　　　　　　 .pageY
Mouse coordinates relative to the entire screen 
　　　　　　 .screenX 
　　　　　　 .ScreenY

 

Relations event object acquisition

　　

DOM relationship selector 
parent element selected from subelements 
              obox.children returns an array of 

sub-element selected from the elements of the parent 
             ~~~ .parentNode element returns a 

first subelement 
                obox.fristElementChild 

last child 
                obox.ladtElementChild 

sibling elements on 
                obox. previousElementSibling 

next sibling element 
                obox.nextElementSibling 

========================================= " 
here are other elements Dom selectors 
parent element selected sub-elements

 

Event Source
Event Type
key acquisition
event bubbling
default event

bindings Event ways:
DOM0 level (evaluation formula)
DOM2 level (monitor type)

event delegate:
Event Source
event bubbling

State event flow
event capture
target
event bubbling