title: Attach listener to multiple children
body: <p>I'm trying to get rid of jquery from my page and rewrite some functionalities to pure js.
  There are 2 lists with class work, containing a few li elements. Each li element should have an action on click to add class 'active' to it.</p>
  <p>In jquery it is very simple:</p>
  <pre><code>$('.work li').on('click', function () {
              var that = $(this);
              that.parent().find('li.active').removeClass('active');
              $(this).addClass('active');
          })
  </code></pre>
  <p>Is there a nicer solution in pure js rather than making something like this with nested loops:</p>
  <pre><code>    var lists = document.getElementsByClassName('work');
      for(var i=0; i&lt;lists.length; i++){
         var children = lists[i].querySelectorAll('li');
         for(var j=0; j&lt;children.length;j++){
          children[j].addEventListener();
         }
      }
  </code></pre>