buubling vs other thing

by joplomacedo

HTML

<a href="http://mashable.com">mashable</a>

<div id="log">
   
</div>

CSS

#log {
    position: fixed;
    bottom: 0;
    right: 0;
    left: 0;
    background: #222;
    color: #eee;
    padding: 10px;
    min-height: 40px;
}

JavaScript

var $ = document.querySelector.bind(document),
log = (function() {
    var $log = $('#log');
    
    return function ( text ) {
       $log.innerHTML += text + '<br>'; 
    };
})();



$('html').addEventListener('click', function () {
    log('click html false');
}, false);

$('a').addEventListener('click', function (e) {
    e.preventDefault();
    log('click a false');
}, false);

$('html').addEventListener('click', function (e) {
    log('click html true');
    //e.stopPropagation();
}, true);