DOM Events API:事件委托和stopPropagation

Question

这是jQuery 1.7的代码:

<div class="test">
  <div class="bu">
    <a>
      bu here
    </a>
  </div>
</div>
<script src="http://code.jquery.com/jquery-1.7.js"></script>
<script>
$(document).on('click', '.test', function () { alert(0); return false; });
$(document).on('click', '.bu', function () { alert(1); return false; });
$(document).on('click', '.bu', function () { alert(2); return false; });
</script>

点击.test> .bu将警告"1"并警告"2",但不警告"0"

我的问题是:如何在没有jQuery的情况下(在本机DOM API上)做同样的事情？似乎,如果没有实现我自己的库,我无法使用Native DOM API ...

谢谢!

Answer 1

干得好:

document.addEventListener( 'click', function ( e ) {
    if ( hasClass( e.target, 'bu' ) ) {            
        // .bu clicked
        // do your thing
    } else if ( hasClass( e.target, 'test' ) ) {
        // .test clicked
        // do your other thing
    }   
}, false );

这里hasClass是

function hasClass( elem, className ) {
    return elem.className.split( ' ' ).indexOf( className ) > -1;
}

现场演示: http ://jsfiddle.net/Nrxp5/30/