添加和删除事件侦听器 - JavaScript
Add and Remove Event Listener - JavaScript
我试图在单击 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。
我该怎么办?
尝试将 customFunction
放入回调函数中,像这样
document.getElementsByClassName('my-div')[0].addEventListener('click', function(event) {
customFunction(event, args1, args2)
});
删除事件使用removeEventListener
您可以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
用您的函数替换警报
const clickEventListener = ['click', function (event) {
customFunction(event, args1, args2)
}];
element.addEventListener(...clickEventListener);
element.removeEventListener(...clickEventListener);
这解决了我的问题。
我试图在单击 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。
我该怎么办?
尝试将 customFunction
放入回调函数中,像这样
document.getElementsByClassName('my-div')[0].addEventListener('click', function(event) {
customFunction(event, args1, args2)
});
删除事件使用removeEventListener
您可以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
用您的函数替换警报
const clickEventListener = ['click', function (event) {
customFunction(event, args1, args2)
}];
element.addEventListener(...clickEventListener);
element.removeEventListener(...clickEventListener);
这解决了我的问题。