添加和删​​除事件监听器-JavaScript

Question

当我单击div时，我试图添加addEventListener。我已经找到了很多问题和答案，但是并没有使它起作用。 实际上，我想将一些参数传递给我的eventListener。

一开始我尝试过：

document.getElementsByClassName('my-div')[0].addEventListener('click', customFunction(event, args1, args2));

但是它没有用。确实，单击并不会进入customFunction。

因此，我尝试使用bind：

document.getElementsByClassName('my-div')[0].addEventListener('click', customFunction.bind(null, event, args1, args2));

这一次，单击一次它就会传递到customFunction。

但是，param事件是Event类型，而不是MouseEvent类型。在事件对象中，我无权访问currentTarget或通常在具有addEventListener的事件中找到的东西。

这可能是由于事件是事件类型，而通常是MouseEvent类型。

我虽然使用这样的匿名函数：

element.addEventListener("click", function() {
  // do something
});

但是我需要删除eventListener，并使用任意函数将其清除。最好存储对象函数，以便在此之后删除addEventListener。

我该怎么办？

Answer 1

尝试将customFunction放在这样的回调函数中

document.getElementsByClassName('my-div')[0].addEventListener('click', function(event) {
  customFunction(event, args1, args2)
});

要删除事件，请使用removeEventListener

Answer 2

您可以JQuery绑定事件

$( "#target" ).click(function() {
  alert( "Handler for .click() called." );
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="target">
  Click here
</div>
<div id="other">
  Trigger the handler
</div>

REF：JQuery Click Event

用您的功能替换警报

Answer 3

    const clickEventListener = ['click', function (event) { 
      customFunction(event, args1, args2) 
    }];
    element.addEventListener(...clickEventListener);
    element.removeEventListener(...clickEventListener);

这解决了我的问题。

medium link