simple delegate

by Justin Chen

HTML

<script src="https://getfirebug.com/firebug-lite-debug.js"></script>
<div id="container">
  <div class="div0">
    <div class="div1 test">
      <div class="div2">
        <a class="aaa" href="#">aaa</a>
        <a class="bbb" href="#">bbb</a>
        <a class="ccc" href="#">ccc</a>      
      </div>
    </div>
  </div>
</div>

CSS

div{
  padding: 10px;
  border:1px solid #ccc;
}
a{
  display: inline-block;
  margin: 10px;
  background: blue;
  color: white;
}

JavaScript

var container = document.getElementById('container');

container.addEventListener('click', function(event){
  var target = event.target, 
      findMatch = function(){
        while(
          target.classList && 
          !target.classList.contains('test')
        ){
          if(target === container){
            return target = null;
          }
          target = target.parentNode;
        }        
      };
	findMatch();
  // result
  console.log('target on', event.target);
  console.log('match on', target);
}, false);