JS中用戶交互的常見事件處理

用戶交互是基于用戶事件的，這些事件通常是鼠標事件、觸摸事件以及鍵盤事件。

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

添加事件監聽可以使用 addEventListener() ：

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

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

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

addEventListener()兼容IE9+瀏覽器和其他主流的現代瀏覽器，不兼容IE8及其以下版本。在IE8及其以下版本瀏覽器應使用attachEvent()來進行事件綁定。具體可查看： JavaScript事件處理兼容性總結

1.1 event事件類型

event事件類型具體可參考： http://www.w3school.com.cn/tags/html_ref_eventattributes.asp

1.2 event事件屬性和方法

屬性	描述	IE	非IE	W3C
altKey	返回當事件被觸發時，”ALT” 是否被按下。	Yes	Yes	Yes
button	返回當事件被觸發時，哪個鼠標按鈕被點擊。	Yes	Yes	Yes
clientX	返回當事件被觸發時，鼠標指針的水平坐標。	Yes	Yes	Yes
clientY	返回當事件被觸發時，鼠標指針的垂直坐標。	Yes	Yes	Yes
ctrlKey	返回當事件被觸發時，”CTRL” 鍵是否被按下。	Yes	Yes	Yes
metaKey	返回當事件被觸發時，”meta” 鍵是否被按下。	No	Yes	Yes
relatedTarget	返回與事件的目標節點相關的節點。	No	Yes	Yes
screenX	返回當某個事件被觸發時，鼠標指針的水平坐標。	Yes	Yes	Yes
screenY	返回當某個事件被觸發時，鼠標指針的垂直坐標。	Yes	Yes	Yes
shiftKey	返回當事件被觸發時，”SHIFT” 鍵是否被按下。	Yes	Yes	Yes
bubbles	返回布爾值，指示事件是否是起泡事件類型。	No	Yes	Yes
cancelable	返回布爾值，指示事件是否可擁可取消的默認動作。	No	Yes	Yes
currentTarget	返回其事件監聽器觸發該事件的元素。	No	Yes	Yes
eventPhase	返回事件傳播的當前階段。			Yes
target	返回觸發此事件的元素（事件的目標節點）。	No	Yes	Yes
timeStamp	返回事件生成的日期和時間。	No	Yes	Yes
type	返回當前 Event 對象表示的事件的名稱。	Yes	Yes	Yes
which	鍵盤碼。	No	Yes	Yes
charCode	鍵盤碼。	No	Yes	Yes

方法	描述	IE	非IE	W3C
initEvent()	初始化新創建的 Event 對象的屬性。	No	Yes	Yes
preventDefault()	通知瀏覽器不要執行與事件關聯的默認動作。	No	Yes	Yes
stopPropagation()	不再派發事件。	No	Yes	Yes

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

event對象的屬性（IE特有）：

屬性	描述
cancelBubble	如果事件句柄想阻止事件傳播到包容對象，必須把該屬性設為 true。
fromElement	對于 mouseover 和 mouseout 事件，fromElement 引用移出鼠標的元素。
keyCode	對于 keypress 事件，該屬性聲明了被敲擊的鍵生成的 Unicode 字符碼。對于 keydown 和 keyup 事件，它指定了被敲擊的鍵的虛擬鍵盤碼。虛擬鍵盤碼可能和使用的鍵盤的布局相關。
offsetX, offsetY	發生事件的地點在事件源元素的坐標系統中的 x 坐標和 y 坐標。
returnValue	如果設置了該屬性，它的值比事件句柄的返回值優先級高。把這個屬性設置為 fasle，可以取消發生事件的源元素的默認動作。
srcElement	對于生成事件的 Window 對象、Document 對象或 Element 對象的引用。
toElement	對于 mouseover 和 mouseout 事件，該屬性引用移入鼠標的元素。
x, y	事件發生的位置的 x 坐標和 y 坐標，它們相對于用CSS動態定位的最內層包容元素。

二. 鼠標事件

鼠標事件常用的有：

• 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屬性獲知哪個鍵按下。

具體的鍵盤碼可參考： https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode

八. 拖拽事件

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

拖拽事件的具體用法可參考我的另一篇筆記： http://www.dengzhr.com/frontend/html/927

 

來自：http://www.dengzhr.com/js/945