Event Spread and Bubble

Characteristic description and schematic diagram:

Standard browsers and Ie9 + browsers both support bubble and capture of events, while IE8-browsers only support bubble
Standard and ie9 + browsers use stopPropagation() or cancelBubble to prevent event propagation, while ie8 - uses the e.cancelBubble attribute to prevent bubbles. Note that ie9 does not support cancelBubble attributes (which do not take effect after setting), but chrome, safari, opera, firefox all support cancelBubble attributes.
Ie8 - Adding an event to the dom element with attachEvent, but you must add on before the event name, which can only occur during the bubble phase of the element.
The stopPropagatin() method is used to prevent events from spreading. If set in the capture phase, the target and bubbling phase will not be executed.
The cancelBubble attribute can only prevent bubbling, but not capture and target events.
preventDefault() and window.event.returnValue are used in standard browsers and ie9+, both of which block default events. ie8 - You can use returnValue, preventDefault().

Sample code (ie8 - examples are not provided)

html code

<body class="body" >  
  <div class="log"></div>
  <input type="text" id="inTxt" name="intxt" />
<div class="wrap">
  <div class="cont">
    <button type="button" class="button" id="btn">Button</button>
    <select name="stopType" id="stopType">
        <option value="1">StopPropagation</option>
        <option value="2">cancelBubble</option>
    </select>
    <button type="button" class="button" id="btnReject">cont Prevent capture or bubbling</button>
  </div>
</div>
</body>

Hierarchical relationships: body - > wrap - > cont - > button, which can be compared with the above principles

Js code

$(function(){
        var $log = $('.log'), 
            $wrap = $('.wrap'),
            $cont = $('.cont'),
            $btn = document.getElementById('btn'),
            $stopType = $('#stopType'),
            $body = $('body'),
            $inTxt = $('#inTxt'),
            $btnReject = $('#btnReject');
        var ePhase = ["","capture","target","Bubbling"]

        var setBorderColor = function( $dom, color, time,event){
            $dom = $($dom);
            $log.html($log.html() + $dom.attr('class') + '[' + ePhase[event.eventPhase] + ']' + '<br/>')
            var timeIndex = window.setTimeout(function(){      
            $dom.css({
                'borderColor': color,
                'borderWidth': '4px'
            });
            }, time);
        }    
        //capture
        $body[0].addEventListener('click',function(event){ 
            $log.html($log.html() + "-------------------<br>");
            setBorderColor($body,'#0866ff ',0,event);
        },true);   
        $wrap[0].addEventListener('click',function(event){
            setBorderColor($wrap,'yellow',2000,event); 
        },true);
        $cont[0].addEventListener('click',function(event){
            event = event || window.event;
            if( $stopType.val() == '1' ){
                event.stopPropagation();
            }else{
                event.cancelBubble = true;
            }
            setBorderColor($cont,'green',1000,event);   
        },true); 
        $btn.addEventListener('click', function(event){ 
            setBorderColor($btn,'red',0,event);
        },true);
        $btnReject[0].addEventListener('click',function(event){ 
            setBorderColor($btnReject,'gray ',0,event);
        },true);
        
        //Bubbling
        $body[0].addEventListener('click',function(event){
            setBorderColor($body,'#0866ff ',0,event);
        },false); 
        $wrap[0].addEventListener('click',function(event){
            setBorderColor($wrap,'yellow',2000,event); 
        },false);  
        $cont[0].addEventListener('click',function(event){
            setBorderColor($cont,'green',1000,event);   
        },false); 
        $btn.addEventListener('click', function(event){ 
            setBorderColor($btn,'red',0,event);
        },false);
        $btnReject[0].addEventListener('click',function(event){  
            setBorderColor($btnReject,'gray ',0,event);
        },false);

        //Prevent default events
        $inTxt.keypress(function(event){
            //event.preventDefault(); 
            window.event.returnValue = false;
            $body.append( String.fromCharCode( event.keyCode ));
        });

    });

Implementing Demo for a Complete event Stream
There is code to prevent event propagation at cont's capture event
Prevent default events for validation only

Design sketch

Application scenario

Event application scenarios in capture phase are few, and are generally used in target and bubbling phase.
At this stage, the standard events of w3c have been generally supported. If the ie8-browser is not compatible, some compatibility codes can be discarded.

Posted by 486974 on Fri, 22 Mar 2019 13:15:55 -0700

Programmer Group

Event Spread and Bubble

Characteristic description and schematic diagram:

Sample code (ie8 - examples are not provided)

html code

Js code

Design sketch

Application scenario

Hot Keywords