title: React custom event listener
body: <p>I'm writing a Chrome extension that places a button next to the &quot;reply&quot; button of each email. And elsewhere on the page is the main React component. When the component loads, I add listeners to a custom event:</p>
  <pre><code>  componentDidMount: function() {
      this.listenForFileEmailEvent();
    },
  
    listenForFileEmailEvent: function() {
      window.addEventListener(&quot;fileThisEmail&quot;, this.handleFileEmail, false);
    },
  </code></pre>
  <p>I place the button in each email and setup the event:</p>
  <pre><code>  $(document).on(&quot;click&quot;, &quot;.file-this-email&quot;, function(e) {
      var email = $(e.target).parents(&quot;.gs&quot;).find('.gD').first().attr(&quot;email&quot;);
      var name = $(e.target).parents(&quot;.gs&quot;).find('.gD').first().attr(&quot;name&quot;);
      var content = $(e.target).parents(&quot;.gs&quot;).find(&quot;.adP&quot;).first().text();
  
      evt = new CustomEvent(&quot;fileThisEmail&quot;, {
        detail: {
          name: name,
          email: email,
          content: content
        }
      });
  
      window.dispatchEvent(evt);
    });
  </code></pre>
  <p>The component is placed in the conversation view of each thread. So, naturally, if you go between the inbox, and then back to a conversion, another component is inserted. And thus the old listeners aren't removed, so multiple events fire the second time.</p>
  <p>I tried to add the following before I setup the listener:</p>
  <pre><code>  listenForFileEmailEvent: function() {
      window.removeEventListener(&quot;fileThisEmail&quot;, this.handleFileEmail, false);
      window.addEventListener(&quot;fileThisEmail&quot;, this.handleFileEmail, false);
    },
  </code></pre>
  <p>But when I inspect the listener events after removing, and prioring to adding it again, it is still there.</p>
  <p>So I think there are 2 questions, is there a better way to do this for a rogue button that will live outside the component? And if not, how can I ensure multiple events don't fire for this?</p>