添加和删除事件侦听器 - 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。

但是，参数事件是事件类型而不是 MouseEvent。在事件对象中，我无权访问 currentTarget 或我通常在使用 addEventListener 的事件中找到的东西。

这可能是因为这里的事件是 Event 类型，而通常是 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

添加和删除事件侦听器 - JavaScript

Add and Remove Event Listener - JavaScript

javascript

mouseevent

addeventlistener

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

Add and Remove Event Listener - JavaScript

javascript

mouseevent

addeventlistener

添加和删除事件侦听器 - JavaScript