JS's frequently inspected knowledge points about events: Event flow, event broadcast, native JS implementation event Proxy

1, JS inside the event flow

The three phases of the event flow are defined in the DOM2-level event Model: capture phase, target stage, bubbling phase, low version IE (IE8 and below) does not support capture phase

Capture Event Flow: Netscape the event stream, that is, the event is received by the page element, descending, and propagated to the most specific element.

Bubbling event Flow: The event stream proposed by IE, that is, the event is received by the most specific element, step up, propagate to the page.

About the JS event, here is a very detailed introduction, you can see: http://www.cnblogs.com/hyaaon/p/4630128.html

2. What is the difference between the different binding events of IE and the Internet, what are the parameters, and what is the difference between the event object E ?

Binding events:

W3C:target.addEventListener (event, Listener, usecapture);

event--event type;

listener--the function executed when the event is triggered;

usecapture--Specifies whether the event is executed during the capture or bubbling phase, when the event handle is executed in the capture phase, False (default false), and the event handle is executed during the bubbling phase.

Btn.addeventlistener ('click', function () {    //dosomething ...},false)

Corresponding event removal:

RemoveEventListener (event, function,capture/bubble);

IE:target.attachEvent (type, listener);

Type-string, event name, including "on", such as "onclick", "onmouseover", "onkeydown" and so on.

listener--implements a EventListener interface or a function in JavaScript.

Btn.attachevent ('onclick', function () {    //dosomething ... })

Corresponding event removal:

DetachEvent (event, function);

3. The principle and advantages and disadvantages of the delegate of the event (agent delegated events)

Delegate (proxy) events are those that are bound to the parent element, but are only moved if a certain match condition is met. This is achieved by the bubbling mechanism of events,

The advantages are:

(1) Can save a lot of memory consumption, reduce event registration, such as proxy all TD on the table click event is very good

(2) can be implemented when new sub-objects do not have to bind the event again, for dynamic Content section is particularly appropriate

The disadvantages are:

The application of the event agent should be limited to the above requirements, if all events are used to proxy the event can be mistaken, that is, the event is not applied to trigger the event is tied.

vartoolbar = Document.queryselector (". Toolbar"); Toolbar.addeventlistener ("Click", Function (e) {varbutton =E.target; if(!button.classlist.contains ("Active")) Button.classList.add ("Active"); ElseButton.classList.remove ("Active");});

4, handwritten native JS implement event Proxy, and require compatible browser

//Simple Event Delegationfunction delegateevent (Interfaceele, selector, type, fn) {if(Interfaceele.addeventlistener) {Interfaceele.addeventlistener (type, EVENTFN); }Else{interfaceele.attachevent (" on"+type, EVENTFN); } function Eventfn (e) {varE = e | | Window.Event; vartarget = E.target | |e.srcelement; if(Matchselector (target, selector)) {if(FN) {Fn.call (target, E); }        }    }}/** * Support #id, tagName,. ClassName * And it's simple, no combination*/function Matchselector (ele, selector) {//If use ID    if(Selector.charat (0) ==="#") {        returnEle.id = = = Selector.slice (1); }    //if use class    if(Selector.charat (0) ===".") {        return(" "+ Ele.classname +" "). IndexOf (" "+ Selector.slice (1) +" ") != -1; }    //if use TagName    returnEle.tagName.toLowerCase () = = =selector.tolowercase ();}//calledvarOdiv = document.getElementById ("Odiv");d elegateevent (Odiv,"a","Click", function () {alert ("1");})

5. How the event is distributed is event Broadcast (dispatchevent)

In general, after binding an event on an element, we rely on the user's mouse behavior on these elements to capture or trigger events, or to bring in browser behavior events, such as Click,mouseover,load and so on, and sometimes we need to Define events or, in specific cases, trigger these events . This time we can use IE under the FireEvent method , Advanced browser (CHROME,FIREFOX, etc.) have dispatchevent method .

IE under the example:

//Document BIND custom event ondataavailableDocument.attachevent ('ondataavailable', Function (Event) {alert (Event. EventType);});varObj=document.getelementbyid ("obj");//The obj element bindings the Click eventObj.attachevent ('onclick', Function (Event) {alert (Event. EventType);});//invokes the Createeventobject method of the Document object to get an object instance of the event. var Event=Document.createeventobject ();Event. EventType ='message';//trigger a custom event bound on document OnDataAvailableDocument.fireevent ('ondataavailable',Event);//triggering the OBJ element binding Click eventdocument.getElementById ("Test"). onclick =function () { obj.fireevent ( ' onclick ', event);};

Examples of advanced browsers (CHROME,FIREFOX, etc.):

//Document BIND custom event ondataavailableDocument.addeventlistener ('ondataavailable', Function (Event) {alert (Event. EventType);},false);varobj = document.getElementById ("obj");//The obj element bindings the Click eventObj.addeventlistener ('Click', Function (Event) {alert (Event. EventType);},false);//invokes the CreateEvent method of the Document object to get an object instance of the event. var Event= Document.createevent ('htmlevents');// Initevent accepts 3 parameters ://event Type, whether bubbling, whether the default behavior of the browser is blockedEvent. Initevent ("ondataavailable",true,true);Event. EventType ='message';//trigger a custom event bound on document OnDataAvailableDocument.dispatchevent (Event);varEvent1 = Document.createevent ('htmlevents'); Event1.initevent ("Click",true,true); Event1.eventtype='message';//triggering the OBJ element binding Click eventdocument.getElementById ("Test"). onclick =function () { obj.dispatchevent (event1);};

JS's frequently inspected knowledge points about events: Event flow, event broadcast, native JS implementation event Proxy