Javascript 如何在不中断removeEventListener的情况下将self（this）传递给addEventListener？

我正在将checkboxchange事件添加到复选框中。（moveButton是一个复选框，因为我在使用CSS复选框）

如果选中该复选框，则会将eventListener添加到body.document

DR.prototype.toggleMove = function(e, self){
    if(self.moveButton.checked){
        document.body.addEventListener("click", function bodyEvent(e){self.removeableEventHandler(e, self)}, false);
    }else{
        console.log("unchecked");
        document.body.removeEventListener("click",  function bodyEvent(e){self.removeableEventHandler(e, self)}, false);
    }
}

如果我不在函数中包装self.removeableEventHandler，我将无法将self附加到该函数，但是当我在函数中包装self.removeableEventHandler时，如果复选框未选中，我将无法删除该事件

DR.prototype.removeableEventHandler = function(e, self){
            console.log(e.clientX, e.clientY);
            self.ele.style.top = e.clientY + "px"; 
            self.ele.style.left = e.clientX + "px"; 
};

---

看来我在这里遇到了一个范围难题。我不知道怎么修。我试图在选中复选框时使窗体可移动，然后在取消选中复选框时删除移动事件

removeEventListener callbak函数需要引用与addEventListener中相同的函数，请尝试以下操作：

DR.prototype.removeableEventHandler = function(e, self){
            console.log(e.clientX, e.clientY);
            self.ele.style.top = e.clientY + "px"; 
            self.ele.style.left = e.clientX + "px"; 
};

function bodyEvent(e) {
    self.removeableEventHandler(e, self);
}
DR.prototype.toggleMove = function(e, self) {
    if (self.moveButton.checked) {
        document.body.addEventListener("click", bodyEvent, false);
    } else {
        console.log("unchecked");
        document.body.removeEventListener("click", bodyEvent, false);
    }
};

---

removeEventListener

通过传递原始函数引用来工作。如果你传递一份复印件，它就不起作用了

你可以做：

DR.prototype.toggleMove = (function () {
    var boundBodyEvent;
    function bodyEvent(e) {
        this.removeableEventHandler(e);
    }
    return function (e) {
        if (this.moveButton.checked) {
            boundBodyEvent= bodyEvent.bind(this);
            document.body.addEventListener("click", boundBodyEvent, false);
        } else {
            document.body.removeEventListener("click", boundBodyEvent, false);
        }
    };
}());

我认为你不需要到处传递

self

，这对我来说似乎很奇怪。我正在使用

bind

覆盖

bodyEvent

中的

this

，以引用您的

DR

实例，而不是DOM元素

我还使用即时调用来避免将

bodyEvent

放在全局范围内

---

或者，您也不必费心删除事件侦听器，而可以在事件侦听器中设置一个开关：

DR.prototype.init = function () {
    var self = this;
    document.body.addEventListener("click", function (e) {
        if (self.moveButton.checked) {
            self.removeableEventHandler(e);
        }
    }, false);
}

---

我以为这有用，但我不认为有用<

bodyEvent

中的code>self未绑定。谢谢@Halcyon填补了我知识库中的另一个漏洞。：）