load file with addEventListener
<p>I use Backbone to create a menu in my app where I can open a project:</p>

<pre><code>app.Tools = Class.extend({

  init: function(elementId, app, view) {
    this.html = $("#" + elementId);
    this.view = view;
    this.app = app;  

    this.openButton = $('&lt;li&gt;&lt;button data-toggle="modal" data-target="#openProject" class="btn btn-primary nav-item nav-link" title="Open"&gt;&lt;i class="glyphicon glyphicon-folder-open" aria-hidden="true"&gt;&lt;/i&gt;&lt;/button&gt;&lt;/li&gt;');
    this.html.append(this.openButton);
    this.openButton.click($.proxy(function(){
      if (!document.getElementById('openProject')) {
        //modal view to confirm new project
        this.html.append(
          `&lt;div class="modal fade" id="openProject" tabindex="-1" role="dialog"&gt;
              &lt;div class="modal-dialog"&gt;
                 &lt;div class="modal-content"&gt;
                    &lt;div class="modal-header"&gt;
                       &lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"&gt;&lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;&lt;/button&gt;
                       &lt;h4 class="modal-title"&gt;Open a project&lt;/h4&gt;
                    &lt;/div&gt;
                    &lt;div class="modal-body"&gt;
                       &lt;span class="glyphicon glyphicon-warning-sign"&gt;&lt;/span&gt; &lt;p&gt;Are you sure you want to do this? If you didn\'nt save your actual project, all your work will be lost for ever.&lt;/p&gt;
                    &lt;/div&gt;
                    &lt;div class="modal-footer"&gt;
                       &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Close&lt;/button&gt;
                       &lt;span class="btn btn-primary btn-file"&gt;Open project&lt;input id="open-project-butt" type="file" class="btn btn-primary"&gt;&lt;/span&gt;
                    &lt;/div&gt;
                 &lt;/div&gt;
              &lt;/div&gt;
           &lt;/div&gt;`
        );
     };

     //listen for new inputs
     document.getElementById('open-project-butt').addEventListener('change', readSingleFile, false);

     function readSingleFile() {
       $('#openProject').modal('hide');
         app.view.clear();
         newProject(app.view);

         var file = this.files[0];
         if (!file) {
           return;
         }

         var reader = new FileReader();
         reader.onload = function() {
           //parse result of the upload
           var parsed = new DOMParser().parseFromString(this.result, "text/xml");
           var stringXML = (new XMLSerializer()).serializeToString(parsed);
         }
       }
       reader.readAsText(file);
     }
   },this));
  }
});
</code></pre>

<p>The first time I open a file everything works fine. Problem is the <code>readSingleFile()</code> function is called as many times as files I open.</p>

<p>I created a <a href="http://codepen.io/anon/pen/dXEORw" rel="nofollow">codepen</a> but it works fine without Backbone.</p>

<p>Any help or lead to solve the issue? Thanks.</p>