javascript - DOM 事件 API : event delegation and 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>

Xlicking on .test > .bu 会提示“1”和“2”，但不会提示“0”

我的问题是:如何在没有 jQuery(在 native 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/