removeEventlistener 无法按预期使用箭头函数和参数[重复]

我有一个可以容纳多个可编辑内容的页面。我想在编辑内容时触发某种检查事件。

我实现此目的的代码如下所示：

// Find all editable elements.
let allEditableElements = document.querySelectorAll('[contenteditable="true"]');

for(let i = 0; i < allEditableElements.length; i++){

  //Remove eventListener to prevent duplicate events.
  allEditableElements[i].removeEventListener('input', (event) => {myClass.myEventMethod(event);}, false);

  // Add event.
  allEditableElements[i].addEventListener('input', (event) => {myClass.myEventMethod(event);}, false);
} 

到目前为止一切正常。但正如我所说，用户可以编辑内容，其中包括向页面本身添加新的可编辑内容。那时事件将再次设置，这就是为什么我试图删除event预先。

我的问题是为什么removeEventListener功能没有按预期工作？有没有一种方法可以像这样命名给定的事件：

// With eventNameGivenByUser an event could be removed just by its name.
addEventListener('eventTriggerName', 'eventNameGivenByUser', function(), [, options]);

当然，我做了一些研究，发现代码本身会像这样工作：

// Find all editable elements.

let allEditableElements = document.querySelectorAll('[contenteditable="true"]');

for(let i = 0; i < 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);
} 

然而，这是没有传递参数的，这在这样的动态设置中是强制性的......

希望有人告诉我，2017 年有一种不使用库的好方法。

编辑 2017 年 2 月 8 日：

仅供好奇的人参考： 解决方案是不向侦听器传递任何参数：

// as you can see there is no (event) and no arrow function either.
addEventListener('input', myClass.myEventMethod, false);

现在要做的就是调用prepare方法，如下所示：

// The Parameter will be passed through anyway!
myEventMethod(event) {

      /**
      * Do stuff with event parameter.
      */

};

之后，可以像这样删除监听器：

removeEventListener('input', myClass.myEventMethod, false);

边注：

我正在使用电子，不需要跨浏览器支持。它只需兼容Chromium: 56.0.2924.87.

问候，美加金

The removeEventListener方法至少需要两个参数：事件名称和要删除的侦听器函数。

在你的第一个例子中：

  allEditableElements[i].removeEventListener('input', (event) => {myClass.myEventMethod(event);}, false);

您正在定义一个先前未附加为事件侦听器的新函数，因此无法将其删除。

我不知道你的第二次尝试有什么问题：

allEditableElements[i].removeEventListener('input', myClass.myEventMethod, false);

这个应该可以正常工作。但是，您可以结合使用这两种方法：将类方法包装在函数中，并将包装的版本附加为侦听器。您只需要有一个参考即可稍后删除：

const inputListener = (event) => { myClass.myEventMethod(event); };
let allEditableElements = document.querySelectorAll('[contenteditable="true"]');


for(let i = 0; i < allEditableElements.length; i++){

  //Remove eventListener to prevent duplicate events.
  allEditableElements[i].removeEventListener('input', inputListener, false);

  // Add event.
  allEditableElements[i].addEventListener('input', inputListener, false);
} 

综上所述，我建议只使用事件委托。将侦听器附加到 DOM 中较高位置的元素上，并且不必担心出现新元素时清除和重新添加事件侦听器：

const handleContentEditable = e => {
    if( e.target.isContentEditable ){
        console.log( 'editing ', e.target );
    }
};

document.body.addEventListener('input', handleContentEditable );

https://jsfiddle.net/rd3y9gh9/1/