Question

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

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);
    }
};

另见this 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"));

如何在原型中覆盖事件监听器？

3 个答案: