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

Reprint please indicate source: http://www.cnblogs.com/zhangmingze/p/4864367.html event is divided into three stages: event capture---event target---event bubbling event capture: When an event occurs (onclic K,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

Ele.onclik = 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. Ele.addeventlistener (' click ', Function () {}, false);  Unbind events, parameters and bindings as Ele.removeeventlistener (Event.type, Handle, 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 clickele.attachevent (' onclick ', function () { }); Unbind events, parameters and bindings as Ele.detachevent ("onclick", function () {});

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

To block default events:

(1) return false; Default event for events that block exclusive attributes (this way) bound

Ele.onclick = function () {    ...                         Your code    return to false;              Block default event behavior by returning false value};

(2) Event.preventdefault (); Prevent default events for events that are added through AddEventListener ()

Element.addeventlistener ("click", Function (e) {    var event = e | | window.event;    ... Event.preventdefault ();      Block default event},false);

(3) Event.returnvalue = false; Prevent default events for events that are added through Attachevent ()

Element.attachevent ("onclick", function (e) {    var event = e | | window.event;    ... Event.returnvalue = 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 binding function Addevent (element, EType, handle, bol) {    if (element.addeventlistener) {           //if support AddEventListener        Element.addeventlistener (EType, handle, BOL);    } else if (element.attachevent) {          //If support attachevent        element.attachevent ("On" +etype, handle);    } else{                                  //Otherwise use a compatible onclick binding        element["on" +etype] = handle;    }}

Event unbind function 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] = null;    }}

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

A. Event bubbling, event capture blocking: Event.stoppropagation ();             Prevent further propagation of events, including (bubbling, trapping), without parameter event.cancelbubble = true; True to block bubbling B. Event delegates: The event bubbling feature is used to delegate the inner event to the outer event, and the event delegate according to 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--><table id= "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 var out = document.getElementById ("Out"); 2 if (Out.addeventlistener) {3 Out.addeventlistener ("click", Function (e) {4 var e = e| | window.event; 5//ie no E.target, with e.srcelement 6 var target = e.target| | E.srcelement; 7//Determine if the event target is TD, the target is the destination node TD 8 if (target.tagName.toLowerCase () = = "TD") {9 chan         Gestyle (target); Console.log (target.innerhtml);}12},false);}else{14 Out.attachevent ("onclick", function (e) {$ var e = e| | Window.event;16//ie No E.target, there is e.srcelement17 var target = e.target| |                 E.SRCELEMENT;18//Determine if the event target is TD, if target is the destination node td19 if (target.tagName.toLowerCase () = = "TD") {20 Changestyle (target); Console.log (target.innerhtml); 22}23}); 24};25} ; function Changestyle (ele) {ele.innerhtml = "clicked") Ele.style.background= "#900"; ele.style.color = "#fff";         }

About the event is here ...

Categories: JavaScript Tags: event bubbling, event capture, event stages, event delegation, Stoppropagation, cancelbubble, Preventdefault, AddEventListener, attachevent

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