javascript - DOM Events API:事件委托(delegate)和stopPropagation

这是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来完成此工作...

最佳答案

干得好:

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/