title: Adding evenlistener to header of div
body: <p>I have multiple eventlisteners to my div: <code>dragstart</code>, <code>dragenter</code>, <code>dragover</code>, <code>dragleave</code>, <code>drop</code> and <code>dragend</code>.</p>
  
  <p>To attach them to my div, I use the <code>body onload</code> function:</p>
  
  <pre><code>function addListeners()
  {
      var cols = document.querySelectorAll('#columns .column');
      [].forEach.call(cols, function(col) {
        col.addEventListener('dragstart', handleDragStart, false);
        col.addEventListener('dragenter', handleDragEnter, false);
        col.addEventListener('dragover', handleDragOver, false);
        col.addEventListener('dragleave', handleDragLeave, false);
        col.addEventListener('drop', handleDrop, false);
        col.addEventListener('dragend', handleDragEnd, false);
      });
  }
  </code></pre>
  
  <p><strong>but</strong> this code adds the eventlistener to the whole div. I only want the header of the div to respond to these events:</p>
  
  <p><img src="https://i.stack.imgur.com/G7HlE.png" alt="drag and drop example"></p>
  
  <p>Now I can click on any part of the div and drag it, but I only want to be able to click on the black part (header) of the div to move it. The black part is a simple <code>header</code> in CSS.</p>
  
  <h3>HTML</h3>
  
  <pre><code>&lt;body onload="addListeners()"&gt;
  
  &lt;div id="columns"&gt;
    &lt;div class="column" draggable="true"&gt;&lt;header&gt;A&lt;/header&gt;Textual information inside div A&lt;/div&gt;
    &lt;div class="column" draggable="true"&gt;&lt;header&gt;B&lt;/header&gt;Textual information inside div B&lt;/div&gt;
    &lt;div class="column" draggable="true"&gt;&lt;header&gt;C&lt;/header&gt;Textual information inside div C&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  </code></pre>
  
  <p>A JSFiddle of my full page can be found <a href="http://jsfiddle.net/Lxcpr/" rel="nofollow noreferrer" title="here">here.</a> </p>
  
  <p>How can this be done?</p>