js event capture and bubbling

Event capture and bubbling

A bubbling: is passed to the outside by the innermost element, the default (the reverse capture)

Prevent bubbling (capture)

w3c standards: event.stopPropagation

IE:event.cancelBunnle=true

II. (Event delegate behavior :)

 

var d1 = document.getElementById("d1");
        var d2 = document.getElementById("d2");
        var d3 = document.getElementById("d3");
        d1.onclick = function(){
             alert ( "China")
         }
         d2.onclick = function(){
             alert ( "Hubei")
         }
         d3.onclick = function(){
             alert ( "Wuhan")
         } 
Binding written two events: time listener 
dom.addEventListener (. Event name handler callback [, boolean]) 
ccallback called callback function; when the function parameters as a function of time, we control such a parameter called callback function 
[ ] denotes optional parameters, any of the manual is the same 
false bubbling phase the default value 
true for the capture phase
 d1.addEventListener ( 'the Click', function (Event) { 
            var Event Event = || the window.event; / / compatibility
             alert ( "China") 
            that event.stopPropagation (); // block the capture
         }, to false); 
        d2.addEventListener ( 'the Click', function () { 
            alert ( "Hubei") 
        }, to false); 
        d3.addEventListener ( 'the Click', function (Event) { 
            var Event Event = || the window.event; 
            Alert ( "Wuhan")
            event.stopPropagation (); // prevent bubbling
         }, false);

 

II. Behavior (When you click to bring)

<a href="http://www.baidu.com">百度</a>

When you click the consequences arising

Click on a link, the consequences are jumping

 

Prevent the default behavior:

var a = document.getElementsByTagName("a")[0];
        a.onclick = function(event){
            // return false;  

            var event = event || window.event;
            event.preventDefault()

            // 1.return false;
            // 2 W3C standard .event.preventDefault () // IE9 is not compatible with the following
            3 // older versions of IE event.returnValue = false 
        }

Right-click events:

document.oncontextmenu = function () {// Right-click events have consequences
            the console.log ( 'press the right mouse')
            return false
        }

III. The event object

var div01 = document.getElementById("div01");
        var div02 = document.getElementById("div02");
        div01.onclick = function(event){
            // event is an event object, the object will be triggered when an event generated
            // Compatibility
            var event = event || window.event;
            var target = event.target || event.srcElement; // can get the child element clicked
            console.log(event);
            console.log(target);
        }

four. Event delegates

var ul = document.getElementsByTagName("ul")[0];
        ul.onclick = function (e) {
            e = e || window.event; // Compatibility
            var target = event.target || event.srcElement;
            console.log(target.innerHTML);
        }