如何覆盖原型中的事件侦听器

Question

我正在尝试实现两个方法：start和stop。问题是，停止似乎不起作用。

const MyObj = function(x) {
    this.x = x;
};
MyObj.prototype.start = function(el) {
    el.onclick = (function() {
        console.log(this.x);
    }).bind(this);
};
MyObj.prototype.stop = function(el) {
    el.onclick = null;
};
const obj = new MyObj("x");
document.getElementById("checkbox").onchange = function() {
    if (this.value) {
        obj.start(document.body);
    }
    else {
        obj.stop(document.body);
    }
};

我试过""和function(){}而不是null，但它们也没有效果。如果我在浏览器控制台中设置onclick事件，在我调用start之后，它就工作了。

我该怎么修？

Answer 1

obj.stop(document.body)从不运行，因为this.value始终是true。你要找的是this.checked。

固定代码：

const MyObj = function(x) {
    this.x = x;
};
MyObj.prototype.start = function(el) {
    el.onclick = (function() {
        console.log(this.x);
    }).bind(this);
};
MyObj.prototype.stop = function(el) {
    el.onclick = null;
};
const obj = new MyObj("x");
document.getElementById("checkbox").onchange = function() {
    if (this.checked) {
        obj.start(document.body);
    } else {
        obj.stop(document.body);
    }
};

另请参阅此Fiddle以获取演示。

Answer 2

使用addEventListener和removeEventListener。

el.addEventListener("click", someHandler);
// later...
el.removeEventListener('click', someHandler);

请注意，someHandler必须是同一个对象，两次都是。不要使用内联函数。

Answer 3

我制作了自己版本的事件处理程序：

var EventHandler = function(){}
EventHandler.prototype.events = [];
EventHandler.prototype.functions = [];
EventHandler.prototype.addEventListener = function(e,f,obj)   // start
{
    if (obj === undefined) obj = window;
    this.events.push(e);
    this.functions.push(f);
    obj.addEventListener(e,f);
};
EventHandler.prototype.removeEventListener = function(e,obj)   // stop
{
    if (obj === undefined) obj = window;
    var i = this.events.indexOf(event);
    if (i === -1)
    {
        return;
    }
    obj.removeEventListener(event,this.functions[i]);
    this.events.splice(i,1);
    this.functions.splice(i,1);
    //this.removeEventListener(e,obj);      // to remove multiple events of the same type
}

问题是，只有当它运行start方法时，它才真正添加onclick侦听器。

const MyObj = function(x) {
    this.x = x;
};
MyObj.prototype.start = function(el)
{
    var self = this;
    el.addEventListener("click",function()
    {
        console.log(self.x);
    });
    console.log("started");
    console.log(el);
};
MyObj.prototype.stop = function(el) {
    var self = this;
    el.removeEventListener("click",function()
    {
        console.log(self.x);
    });
    console.log("stopped");
};
var test = new MyObj(54);
test.start(document.getElementById("thing"));