Как перезаписать прослушиватель событий в прототипе?

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

Использовать addEventListener и removeEventListener.

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

Отметьте, что someHandler должен быть одним и тем же объектом, оба раза. Не используйте встроенную функцию.

Answer 2

Я сделал свою версию обработчика событий:

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 
} 

Проблема у вас есть, что только тогда, когда он запускает метод запуска это на самом деле добавить 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")); 

Answer 3

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 для демонстрации.