title: Adding eventListener for file drop
body: <p>I am learning how to add an <code>EventListener</code> to a <code>&lt;div&gt;</code> so that I can drop a file to it for reading a csv file. Below is my simple HTML code that adds an <code>EventListener</code>, but when I dragged and dropped a file, the Chrome browser keeps downloading the file that I dropped and the console output "hey" is not printed. If anyone could let me know what is wrong I'd greatly appreciate the help. :)</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;Test&lt;/title&gt;
  &lt;style&gt;
  #drop{
    border:2px dashed #bbb;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
    padding:25px;
    text-align:center;
    width:128px;
    font:20pt bold,"Vollkorn";color:#bbb
  }
  &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;
      &lt;div id="drop"&gt;Drop a file here&lt;/div&gt;
  
      &lt;script type="text/javascript"&gt;
          var drop_dom_element = document.getElementById('drop');
          var workbook;
  
          /* set up drag-and-drop event */
          function handleDrop(e) {
            console.log('hello');
            e.stopPropagation();
            e.preventDefault();
            console.log('hey');
          }
  
          drop_dom_element.addEventListener('drop', handleDrop, false);
          console.log('Done');        
          &lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>