如何在 removeEventListener 中获取 window.event

Question

此脚本正在获取#testDiv 并向其添加一些侦听器并且工作正常。

(function() {
    this.testObject = function() {
        /*options*/
        this.options = arguments[0];
    };

    /*make object*/
    testObject.prototype.make = function(){

        this.targetElement = document.getElementById('testDiv');

        this.targetElement.addEventListener('mousedown', function(evt){
            ...
        });
        this.targetElement.addEventListener('mouseup', function(evt){
            ...
        });
        this.targetElement.addEventListener('mousemove', function(evt){
            ...
        });

    };
}());

但据我所知，为了删除监听器，我应该在 addEventListener 和 removeEventListener

中使用真实函数而不是匿名函数

this.targetElement.addEventListener('mousedown', mouseDownFunction(evt));
this.targetElement.addEventListener('mouseup', mouseUpFunction(evt));
this.targetElement.addEventListener('mousemove', mouseMoveFunction(evt));

在removeEventListener中：

this.targetElement.removeEventListener('mousedown', mouseDownFunction(evt));
this.targetElement.removeEventListener('mouseup', mouseUpFunction(evt));
this.targetElement.removeEventListener('mousemove', mouseMoveFunction(evt));

这里有个问题，我无法在实际函数中获取 evt（事件）处理程序。 Error: evt is undefined

例如在 mouseDownFunction 中我得到 undefined :

function mouseDownFunction(evt){

    console.log( evt ); // evt is undefined
    console.log( window.event ) // undefined

}

如何获得evt？

提前致谢。

Answer 1

你可以做到这一点

var listener = function (event) {
  /* do something here */
};
this.targetElement.addEventListener('click', listener, false);
this.targetElement.removeEventListener('click', listener, false);

或者只是这个，应该完全一样：

function myListener(event) {
/* do something here */
}

this.targetElement.addEventListener('click', myListener, false);

并删除它：

this.targetElement.removeEventListener('click', myListener, false);

请注意，添加事件并传入函数时，不需要添加参数。您只是添加了对函数的引用（函数指针）。

Answer 2

除了Haukur的回答。你也可以这样做。

this.targetElement.addEventListener('click', function(event){myClickFunction(event);});
this.targetElement.removeEventListener('click', function(event){myClickFunction(event);});

在这里，我们将像您之前所做的那样创建一个匿名函数，然后将该匿名函数的参数传递给您的函数，即 myClickFunction。

如有额外参数，直接在函数中添加即可。

 this.targetElement.addEventListener('click', function(event){myClickFunction(event, param1, param2, param3);});

 myClickFucntion(event, param1, param2, param3){
 }

如何在 removeEventListener 中获取 window.event

How to get window.event in removeEventListener

javascript

javascript-events