JS：从按钮调用函数

Question

我正在学习纯JavaScript。我的问题非常基本，我希望有人能够指出我正确的方向。在画布绘图练习中，我使用以下函数：

drawingTools.pencil = function () {
    document.getElementById("activeTool").value = "Pencil";

    this.mousedown = function (evt) {
        isDrawing = true;
        startX = getendY(tmp_canvas, evt);

    };
    this.mousemove = function (evt) {
        compositeDraw()
        endY = getendY(tmp_canvas, evt);

        if (isDrawing) {
            tmp_context.beginPath();
            tmp_context.moveTo(startX.x, startX.y);
            tmp_context.lineTo(endY.x, endY.y);
            tmp_context.lineJoin = 'round';
            tmp_context.lineCap = "round";
            tmp_context.stroke();
            tmp_context.strokeStyle = defaultLineColor;
            tmp_context.lineWidth = defaultLineThickness;
        }
        startX = endY;
    };
    this.mouseup = function (evt) {
        isDrawing = false;
        drawtmp_contextOncanvas();
    }
};

使用以下行可以正常使用此功能：

pencil.addEventListener('click', this.changeDrawingTool, false);

当我尝试使用如下按钮图标调用drawingTools.pencil函数时：

 document.getElementById("iconPencil").addEventListener('click', drawingTools.pencil, false);

不会触发上述功能。

演示：

http://jsfiddle.net/pgyu7/

Answer 1

在第二个选项中

 document.getElementById("iconPencil").addEventListener('click', drawingTools.pencil, false);

this指向#iconPencil元素。此元素不实现mousedown，mousemove

等方法

为避免遗漏this，您可以使用 bind

document.getElementById("iconPencil").addEventListener('click', drawingTools.pencil.bind(pencil), false);