title: removeEventlistener not working as expected with arrow function and parameter
body: <p>I've got a page which can hold multiple editable contents. I want to fire some kind of check event whenever the content is edited.</p>
  
  <p>My code to achieve this looks like this:</p>
  
  <pre><code>// Find all editable elements.
  let allEditableElements = document.querySelectorAll('[contenteditable="true"]');
  
  for(let i = 0; i &lt; allEditableElements.length; i++){
  
    //Remove eventListener to prevent duplicate events.
    allEditableElements[i].removeEventListener('input', (event) =&gt; {myClass.myEventMethod(event);}, false);
  
    // Add event.
    allEditableElements[i].addEventListener('input', (event) =&gt; {myClass.myEventMethod(event);}, false);
  } 
  </code></pre>
  
  <p>Everything works fine so far. But as I said users can edit the content, which includes adding new editable contents to the page itself. At that point the events will be set again, which is why I'm trying to remove the <code>event</code> beforehand.</p>
  
  <p><strong>My question is why would the <code>removeEventListener</code> function not work as expected? And isn't there a way to name given events like so:</strong></p>
  
  <pre><code>// With eventNameGivenByUser an event could be removed just by its name.
  addEventListener('eventTriggerName', 'eventNameGivenByUser', function(), [, options]);
  </code></pre>
  
  <hr>
  
  <p>Of course I did some research and found out that the code itself would work like this:</p>
  
  <pre><code>// Find all editable elements.
  
  let allEditableElements = document.querySelectorAll('[contenteditable="true"]');
  
  for(let i = 0; i &lt; allEditableElements.length; i++){
  
    //Remove eventListener to prevent duplicate events.
    allEditableElements[i].removeEventListener('input', myClass.myEventMethod, false);
  
    // Add event.
    allEditableElements[i].addEventListener('input', myClass.myEventMethod, false);
  } 
  </code></pre>
  
  <p>However this is without passing parameters, which is mandatory in such a dynamic setup...</p>
  
  <p>Hope someone will tell me that in 2017 there is a nice and decent way without using libraries.</p>
  
  <hr>
  
  <p><strong>Edit 08.02.2017:</strong></p>
  
  <p>Just for the curious ones:
  The Solution is to not pass any parameter to the listener:</p>
  
  <pre><code>// as you can see there is no (event) and no arrow function either.
  addEventListener('input', myClass.myEventMethod, false);
  </code></pre>
  
  <p>All there is to do now is to call prepare the method like this:</p>
  
  <pre><code>// The Parameter will be passed through anyway!
  myEventMethod(event) {
  
        /**
        * Do stuff with event parameter.
        */
  
  };
  </code></pre>
  
  <p>After that the listener can be removed like so:</p>
  
  <pre><code>removeEventListener('input', myClass.myEventMethod, false);
  </code></pre>
  
  <hr>
  
  <p><strong>Sidenote:</strong></p>
  
  <p>I'm using electron and do not need cross browser support. It just has to be compatible with <code>Chromium: 56.0.2924.87</code>.</p>
  
  <p>Regards, Megajin</p>