Event listener attached to parent element, now how to bubble up clicked target to a specific class name?
<p>I have 1 event listener that is listening to the container element, I want to attach an active class to any of it's children (.container > div.active) when clicked. (So DO NOT attach an active class to .contain > div > ul.active).</p>

<p>My problem is I'm not entirely sure how bubble up the <code>.target</code> to reach the <code>div.diary</code>?</p>

<p><a href="http://jsbin.com/yereramaxe/edit?html,css,js,output" rel="nofollow">http://jsbin.com/yereramaxe/edit?html,css,js,output</a></p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>document.querySelector('.contain').addEventListener('click', diary);

function diary(e) {
 if (e.target.className === 'diary') { 
        //?.classList.add('active');
 }
}</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>* {
  font-size:0;
  padding:0;
  margin:0;
}
.diary {
  display:inline-block;
  background:red;
  width:33.33%;
  box-sizing:border-box;
  padding:10px;
}
li {
  font-size:18px;
}
ul {
  list-style-type: none;
}
div &gt; ul &gt; li {
  display:inline-block;
  width:33.33%;
}
.diary.active {
  background:blue;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="contain"&gt;

  &lt;div class="diary"&gt;
    &lt;ul&gt;
      &lt;li&gt;
        &lt;ul&gt;
          &lt;li&gt;one&lt;/li&gt;
          &lt;li&gt;two&lt;/li&gt;
          &lt;li&gt;three&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;ul&gt;
          &lt;li&gt;one&lt;/li&gt;
          &lt;li&gt;two&lt;/li&gt;
          &lt;li&gt;three&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;ul&gt;
          &lt;li&gt;one&lt;/li&gt;
          &lt;li&gt;two&lt;/li&gt;
          &lt;li&gt;three&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;

  &lt;div class="diary"&gt;
    &lt;ul&gt;
      &lt;li&gt;
        &lt;ul&gt;
          &lt;li&gt;one&lt;/li&gt;
          &lt;li&gt;two&lt;/li&gt;
          &lt;li&gt;three&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;ul&gt;
          &lt;li&gt;one&lt;/li&gt;
          &lt;li&gt;two&lt;/li&gt;
          &lt;li&gt;three&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;ul&gt;
          &lt;li&gt;one&lt;/li&gt;
          &lt;li&gt;two&lt;/li&gt;
          &lt;li&gt;three&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;

  &lt;div class="diary"&gt;
    &lt;ul&gt;
      &lt;li&gt;
        &lt;ul&gt;
          &lt;li&gt;one&lt;/li&gt;
          &lt;li&gt;two&lt;/li&gt;
          &lt;li&gt;three&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;ul&gt;
          &lt;li&gt;one&lt;/li&gt;
          &lt;li&gt;two&lt;/li&gt;
          &lt;li&gt;three&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;ul&gt;
          &lt;li&gt;one&lt;/li&gt;
          &lt;li&gt;two&lt;/li&gt;
          &lt;li&gt;three&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;

&lt;/div&gt;</code></pre>
</div>
</div>
</p>