DOM Events API：事件委托和stopPropagation

这是jQuery 1.7的代码：

 
  bu here  
 
   $(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; });  

点击.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/

Answer 2

 
 
 
 click me!