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中我得到了未定义：

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

2 个答案: