JS Event binding, event capture, event bubbling and event delegation, compatible with IE

Reprint Please specify Source: http://www.cnblogs.com/zhangmingze/p/4864367.htmlEvents are divided into three phases: Event capture--event target---event bubbling event capture: When an event occurs (Onclick,onmouseover ... ) occurs first on the document, then to the body, …… finally to the destination node (that is, the event target). Event bubbling: An event does not end after reaching the event target, bubbles up through the layer until the Document object, as opposed to event capture 1, Onlick--and event bubbling, overriding Onlick overrides previous properties, no compatibility issues

null;   // Unbind the Click event and set the Onlick property to null

2, AddEventListener (Event.type, Handle, Boolean); IE8 and below do not support, belong to the DOM2 level method, can add more than one method is not overwritten

// The event type does not have a on,false representation in the third stage of the event (bubbling) triggered, and True indicates that the first stage of the event (capture) is triggered. If handle is the same method, it is executed only once.  functionfalse);   // Unbind events, as arguments and bindings boolean);

3, attachevent (Event.type, handle); IE unique, compatible with IE8 and below, can add multiple event handlers, only support the bubbling phase

// if handle is the same method, the binding executes several times, and this differs from AddEventListener, the event type is added on, such as the onclick instead of the click function  // unbind events, parameters and bindings as function() {});

4. Default Event behavior: href= "" link, submit form submission, etc.

　　● To block default events:

(1)return false; block the default event for an event that is bound by the exclusive attribute (in this way)

function () {    ...                          // Your code    return false;              // block default event behavior by returning false value };

(2)event.preventdefault (); block default events for events added through addeventlistener ()

function (e) {    var event = e | | window.event;    ... Event.preventdefault ();       // block default Event },false);

(3)event.returnvalue = false; block the default event for events added through attachevent ()

function (e) {    var event = e | | window.event;    ...     false;       // block default Event },false);

5. Next we wrap the event bindings and events into a function that is compatible with browsers, including IE6 and above

//Event Bindingsfunctionaddevent (element, EType, handle, bol) {if(Element.addeventlistener) {//If you support AddEventListenerElement.addeventlistener (EType, handle, BOL); }Else if(element.attachevent) {//If you support attacheventElement.attachevent ("on" +EType, handle); }Else{//Otherwise, use a compatible onclick bindingelement["on" +etype] =handle; }}

 //  event unbind    Removeevent (element, EType, handle, bol) { if   (Element.addeventlistener) {Element.removeeventlistener (EType, handle,    BOL);  else  if   (element.attachevent) {element.detachevent (" on "+etype, handle);  else  {element[ "on" +etype] = Span style= "color: #0000ff;"    >null  ; }}

--------------------------------------------------------------------------------------------------------------- --------------------------------

A.event bubbling, event captureStop:event.stoppropagation ();Prevent further propagation of events, including (bubbling, capturing), without parametersevent.cancelbubble = true;True to block bubbling B.Event Delegate: Uses the event bubbling feature to delegate the inner event to an outer event, and to perform an event delegate based on the properties of the events object to improve performance. Using event delegates avoids adding event listeners to a particular node, and event listeners are added to their parent elements. The event listener parses events bubbling up from child elements to find out which child element is the event.

For example, if you want to click on the table inside the TD, the common practice is for the loop to each TD binding event, TD less performance what difference, TD if more, it is not, we use Event delegation:

 <!--HTML -<TableID= "Out"Border= "1"style= "Cursor:pointer;">    <TR>     　　 <TD>Table01</TD>     　　 <TD>Table02</TD>     　　 <TD>Table03</TD>     　　 <TD>Table04</TD>     　　 <TD>Table05</TD>     　　 <TD>Table06</TD>     　　 <TD>Table07</TD>     　　 <TD>Table08</TD>     　　 <TD>Table09</TD>     　　 <TD>Table10</TD>    </TR></Table>

1     varout = document.getElementById ("Out");2     if(out.addeventlistener) {3Out.addeventlistener ("click",function(e) {4             varE = e| |window.event;5             //ie no e.target, there are e.srcelement6             vartarget = e.target| |e.srcelement;7             //To determine if the event target is TD, then target is the destination node TD8             if(target.tagName.toLowerCase () = = "TD"){9 Changestyle (target);Ten Console.log (target.innerhtml); One             } A},false); -}Else{ -Out.attachevent ("onclick",function(e) { the             varE = e| |window.event; -             //ie no e.target, there are e.srcelement -             vartarget = e.target| |e.srcelement; -             //To determine if the event target is TD, then target is the destination node TD +             if(target.tagName.toLowerCase () = = "TD"){ - Changestyle (target); + Console.log (target.innerhtml); A             } at         }); -     }; - }; - functionChangestyle (ele) { -ele.innerhtml = "clicked" -Ele.style.background= "#900"; inEle.style.color = "#fff"; }

About the event is here ...

Zhang Xiao Wo-the web front-end development on the road original.

JS Event binding, event capture, event bubbling and event delegation, compatible with IE