Dom--dom Events

DOM0 Events

var odiv = document.getElementById ("Div1");

when we trigger the click behavior of the Odiv element itself, it causes the following function to execute: not just execution, but our browser will also pass a parameter value to this method by default--we will typically set it to a formal parameter receive ( Of course it can be obtained with arguments)--"Event object": Contains information about the event that we are currently working on

The event Object E itself also has a compatibility problem: In the standard browser is the parameter value passed by the browser by default E, under Ie6~8 we are using the event property under the Global object window e=e| | window.event;
1. E.type stores the current event behavior type, for example: "Click" ...
2, E.target Store is the event source (which element the current event occurs on) This property is incompatible: e.srcelement Example: e.target=e.target| | e.srcelement;
3. E.clientx/e.clienty: The offset value of the x and y axes of the mouse trigger point from the upper left corner of the current screen window
4, E.pagex/e.pagey: The mouse trigger point distance from the entire document (first screen) the upper left corner of the x and Y axis offset value But in IE does not exist this property
e.pagey=e.pagey| | (E.clienty+ (document.documentelement.scrolltop| | DOCUMENT.BODY.SCROLLTOP));
5, E.preventdefault? E.preventdefault (): E.returnvalue = False, and the default behavior of blocking events
6, E.stoppropagation? E.stoppropagation (): E.cancelable = true;--bubble propagation of an organization event
Odiv.onclick = function (e) {
e = e | | window.event;
    }

The default behavior of understanding: Take a tag, the natural click when the default behavior of the jump link, if we just want to implement click, do not want to implement the jump, then the default behavior needs to be banned;
var olink = document.getElementById ("Link1");
Olink.onclick = function (e) {
e = e | | window.event;
alert (1);
//e.preventdefault? E.preventdefault (): E.returnvalue = false;
//href= "javascript:;" is equivalent to the default behavior of blocking it
    }

 DOM2 Level events

DOM Level two event: the two methods defined on the prototype of the built-in class eventtarget that the element belongs to: AddEventListener, RemoveEventListener is our DOM two-level binding event method
The element. AddEventListener (Eventtype,eventfn,true/false) is generally written false to allow it to occur during the bubbling propagation phase, and true to cause it to occur during the capture propagation phase.
Ie6~8 is incompatible with our AddEventListener this method--->attachevent ("on" +eventtype,eventfn) occurs only during the bubbling phase (DetachEvent remove event binding)

    var odiv = document.getElementById ("Div1");        Odiv.addeventlistener ("click", Function () {            console.log (this);//this-->odiv        }, False);        Odiv.attachevent ("onclick", function () {            console.log (this);//this-->window        });

　　

The benefits of DOM level two events relative to DOM0 level events:
1, DOM2 level events can be relatively flexible control of our communication mechanism
2, DOM0 level event can only give one element of the same event type binding a method, the second method of binding will be our first cover out, and the DOM2 level event can give an element of the same event type to bind many different methods (these methods exist in the event pool, when I click, Each of these methods will be executed individually);
3. Event types in DOM0 can be used in DOM2, but DOM2 event bindings provide some types of events that are not DOM0: domcontentloaded (HTML structure loading complete) ...

Odiv.addeventlistener ("click", Function (e) {        console.log (1);    }, False);    Odiv.addeventlistener ("click", Function (e) {        console.log (2);    }, False);//Click to output once 1  2

　

$ (document) in Window.onload and jquery. The difference between ready:
1, Window.onload is when the HTML structure, pictures, text, etc. are loaded to complete the execution, and ready is as long as the HTML structure is loaded to execute;
2, window.onload in the page can be used once, and ready can be used multiple times;
Principle: Ready in jquery is DOM2 level event binding, binding is domcontentloaded this method, and Window.onload uses DOM0-level event binding, the OnLoad event;

Dom--dom Event