title: Only target parent with event.target?
body: <p>HTML:</p>
  
  <pre><code>&lt;div onclick="doSomething()" id="parent"&gt;
      &lt;div id="child"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#parent {
      background-color: blue;
      width: 100%;
      height: 100px;
  }
  
  #child {
      background-color: green;
      width: 50%;
      height: inherit;
  }
  
  .myClass {
      background-color: red !important;
  }
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>function doSomething() {
      event.target.className = ('myClass');
  }
  </code></pre>
  
  <p>As you can see in <a href="http://jsfiddle.net/pkywhmuk/" rel="nofollow noreferrer">this JSFIDDLE</a>, upon clicking the child, instead of applying the class to the parent which triggers the function, it applies it to the child. I want to know how to avoid this and apply it to the parent no matter where I click inside of it. I am trying to avoid using the <code>document.getElement(s)ByClass/Id</code> method.<br>Any help?</p>