使用者互動是基於使用者事件的，這些事件通常是滑鼠事件、觸控事件以及鍵盤事件。

一. 監聽器與事件處理程式

新增事件監聽可以使用 addEventListener() ：

element.addEventListener(type, handler [, userCapture])

移除事件監聽可以使用 removeEventListener() ：

element.removeEventListener(type, handler [, userCapture])

addEventListener()相容IE9+瀏覽器和其他主流的現代瀏覽器，不相容IE8及其以下版本。在IE8及其以下版本瀏覽器應使用attachEvent()來進行事件繫結。具體可檢視： 

1.1 event事件型別

1.2 event事件屬性和方法

除了上面W3C規範所規定的屬性和方法外，IE瀏覽器還支援以下屬性。

event物件的屬性（IE特有）：

二. 滑鼠事件

滑鼠事件常用的有：

• mousedown
• mouseup
• click
• dbclick
• mousewheel
• mousemove
• mouseover
• mouseout
• mouseenter

三. 滑鼠位置

每個滑鼠事件都有兩個屬性用於確定滑鼠的當前位置：pageX與pageY。結合這兩個屬性及目標元素相對於document的偏移量，可以確定滑鼠在canvas元素上的相對座標。遺憾的是，並不是所有的瀏覽器都支援pageX和pageY屬性，可能要用到clientX和clientY。

獲取滑鼠位置的相容性寫法如下：

// 獲取滑鼠的當前位置
function getMouse(event) {
    var event = event || window.event;
    var mouse = {};
    var x, y;
    if(event.pageX || event.pageY) {
        x = event.pageX;
        y = event.pageY;
    } else if(event.clientX || event.clientY) {
        var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        x = event.clientX + scrollLeft;
        y = event.clientY + scrollTop;
    }
    mouse.x = x;
    mouse.y = y;
    return mouse;
}

使用方法如下：

<canvas id="canvas" width="300" height="300" style="background: #ccc;"></canvas>

var canvas = document.getElementById("canvas");
canvas.addEventListener("mousemove", function(e) {
    var x = getMouse(e).x,
        y = getMouse(e).y;
    console.log("x: " + x + "; y: " + y);
});

// 獲取滑鼠的當前位置
function getMouse(event) {
    var event = event || window.event;
    var mouse = {};
    var x, y;
    if(event.pageX || event.pageY) {
        x = event.pageX;
        y = event.pageY;
    } else if(event.clientX || event.clientY) {
        var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        x = event.clientX + scrollLeft;
        y = event.clientY + scrollTop;
    }
    mouse.x = x;
    mouse.y = y;
    return mouse;
}

四. 觸控事件

觸控事件與滑鼠事件相似，一個觸控點可以被想象成一個滑鼠游標。不過滑鼠游標會一直停留在螢幕上，而受制卻會從裝置上按下、移動以及釋放同一時間可能發生多點觸控，某個觸控點會儲存在觸控事件的一個數組中，不過一般都建議使用第一個觸控點。

常用到的觸控事件有：

• touchstart
• touchend
• touchmove

五. 觸控位置

其中， touchstart 和 touchmove 事件的第一個觸控點位置為：

event.touches[0]

touchend事件的第一個觸控點位置為：

event.changedTouches[0]

<canvas id="canvas" width="300" height="300" style="background: #ccc;"></canvas>

var canvas = document.getElementById("canvas");
canvas.addEventListener("touchstart", function(e) {
    var touches = e.touches ? e.touches[0] : e;
    touchstartPosition = {
        x : touches.pageX,
        y : touches.pageY
    };
});

canvas.addEventListener("touchmove", function(e) {
    var touches = e.touches ? e.touches[0] : e;
    touchmovePosition = {
        x : touches.pageX,
        y : touches.pageY
    };
    console.log(touchmovePosition);
});

canvas.addEventListener("touchend", function(e) {
    var changedTouches = e.changedTouches ? e.changedTouches[0] : e;
    touchsEndPosition = {
        x : changedTouches.pageX,
        y : changedTouches.pageY
    };
    console.log(touchsEndPosition);
});

六. 鍵盤事件

鍵盤事件僅有兩個：

• keydown
• keyup

七. 鍵盤碼

在一個鍵盤事件中，可以通過事件物件的keyCode屬性獲知哪個鍵按下。

八. 拖拽事件

• dragstart
• drag
• dragenter
• dragover
• dragleave
• drop
• dragend