好的，所以我正在制作一个小的html5画布绘图库，我遇到了一个小问题，这里是代码（小提琴）：
var drawr = {
init: function (canvas_id, canvasWidth, canvasHeight) { //height & width are optional
this.canvas_id = document.getElementById(canvas_id);
this.canvasWidth = canvasWidth;
this.canvasHeight = canvasHeight;
this.context = this.canvas_id.getContext('2d');
if (canvasWidth) {
this.canvas_id.width = canvasWidth;
}
if (canvasHeight) {
this.canvas_id.height = canvasHeight;
}
},
//magic line drawing function
ctx: function (a, b, x, y, dLineColor, dLineWidth) { //lineWidth & lineColor are optional; defaults are 1px & 'black'
this.context.lineJoin = 'round';
this.context.beginPath();
this.context.moveTo(a, b);
this.context.lineTo(x, y);
this.context.closePath();
this.context.strokeStyle = dLineColor;
this.context.lineWidth = dLineWidth;
this.context.stroke();
},
//destroy event handlers to prevent drawing
destroy: function () {
//destroy event handlers
},
draw: function (lineColor, lineWidth) {
//create some utilities for draw function to use
var localPen = {};
var drawing = false;
var canvasPos = {
x: this.canvas_id.offsetLeft,
y: this.canvas_id.offsetTop
}
//initiate event handlers
this.canvas_id.addEventListener('mousedown', addDraw, false);
function addDraw(e) {
drawing = true;
console.log(drawing);
localPen.x = e.pageX - canvasPos.x;
localPen.y = e.pageY - canvasPos.y;
};
this.canvas_id.addEventListener('mousemove', function (e) {
var drawTo = {
x: e.pageX - canvasPos.x,
y: e.pageY - canvasPos.y
}
if (drawing) {
drawr.ctx(localPen.x, localPen.y, drawTo.x, drawTo.y, lineColor, lineWidth);
}
localPen.x = drawTo.x;
localPen.y = drawTo.y;
});
this.canvas_id.addEventListener('mouseup', function (e) {
drawing = false;
});
this.canvas_id.addEventListener('mouseleave', function (e) {
drawing = false;
});
}
}
drawr.init('my_canvas');
drawr.draw('red', 10);
drawr.draw('blue', 5);
我在这里要完成的是：当我呼叫drawr.draw();一秒（或第三等）时，它会覆盖前一个功能。我该怎么办呢？正如您在我的fiddle中看到的那样，每个实例同时运行。
随意编辑，更新，删除，对我发出错误的代码等等。
答案 0 :(得分：4)
对addEventListener的调用将覆盖前一个，或者对removeEventListener的调用将删除侦听器，仅当为该事件类型指定的处理函数严格等于。即使词法相同，匿名函数也不等于在单独执行方法期间创建的第二个匿名函数。
这里有一个想法：将您的处理程序定义为闭包中的单独函数，如下所示：
obj = function() {
function handler() { /* handle the click; "this" is the element */ }
return {
draw: function() {
this.elt.addEventListener('click', handler);
//draw a bunch of stuff
},
undraw: function() {
this.elt.removeEventListener('click', handler);
//undraw a bunch of stuff
}
};
}();
现在，由于handler始终严格等于自身，removeEventListener将成功删除处理程序。或者，第二个addEventListener将不会执行任何操作（只需保留当前处理程序）。
但是，handler无权访问该对象的this;它将使用事件的目标元素作为其this进行调用。为了将对象this放入事件处理程序中，您可能会尝试尝试
this.elt.addEventListener('click', handler.bind(this));
但这将无法实现您想要的效果，因为每次调用该方法时handler.bind(this)的值都不同，因此您将再次使用冗余事件处理程序或removeEventListener s不工作。
如果您真的想要处理程序中的对象this，并且无法弄清楚如何从事件中检索它，则可以初始化handler的绑定版本在某些init函数中：
obj = {
handler: function(event) { /* handle the click; "this" is the object */ },
draw: function() {
this.elt.addEventListener('click', this.handler);
//draw a bunch of stuff
},
undraw: function() {
this.elt.removeEventListener('click', this.handler);
//undraw a bunch of stuff
},
init: function() {
this.handler = this.handler.bind(this);
return this;
}
}.init();
由于this.handler始终与自身相同，因此按预期工作。
EventListener 解决此问题的一种更优雅的方法是向addEventListener而不是函数传递具有EventListener接口的对象，该接口是实现特殊命名的{{}的任何对象。 1}}方法，可以是＆＃39;这个＆＃39;对象本身，所以你可以这样做：
handleEvent请注意obj = {
handleEvent: function(event) {
// "this" is the object
if (event.type === 'click') {
// do stuff
}
},
draw: function() {
this.elt.addEventListener('click', this);
},
undraw: function() {
this.elt.removeEventListener('click', this);
}
};
传递给this。换句话说，我们将对象本身作为addEventListener的实例传递，因为它实现了EventListener。 handleEvent是对象的完整方法，因此可以完全访问其所有方法和属性，并且因为handleEvent与自身相同，所以添加，添加和删除行为都可以作为你要。
我没有看到这种方法非常用，但它可以使事件处理更加简化，特别是如果你在它周围添加一些糖，例如安排处理每种事件类型的单个方法：
this