title: File input triggers change event twice (or more)
body: <p>I have a basic <code>input[file]</code> element which I hide. When you click on the <code>#holder</code> a file explorer pops up. But selecting a file triggers the <code>console.log()</code> line to be executed twice (on my computer).</p>
  <h1>Beware: the following code below crashes my Chrome tab.</h1>
  <p>You should better run it as a separate file. Cannot provide a &quot;working&quot; demo, but this is the closest I can get to <a href="https://stackoverflow.com/help/mcve">MCVE</a>.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var element = document.getElementById('holder');
  
  element.onclick = function(e) {
    var input = document.getElementById('file-input');
    input.click();
    input.addEventListener("change", function(evt) {
      console.log(evt);
      Phimij.addFiles(input.files);
    }, false);
  };</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#holder {
    border: 10px dashed #ccc;
    width: 300px;
    height: 300px;
    margin: 20px auto;
  }
  #holder.hover {
    border: 10px dashed #333;
  }
  #file-input {
    display: none;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="holder"&gt;
    &lt;input type="file" multiple id="file-input" /&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>