JS-網站互動設計程式進化之道-Events

發表於

Groomed skirun from mount Seceda in Gröden

JavaScript&JQuery-網站互動設計程式進化之道-Events

學習筆記(5)

偉大的才能比偉大的成功更不尋常 - 沃維納格

引言

原文書名：JavaScript & JQuery: Interactive Front-End Web Development
作者：Jon Duckett
譯者：謝銘倫
出版社：碁峰
出版日期：2017/02/24

六、事件 Events

互動事件

  • 使用者介面事件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
window.addEventListener('load', setup, false); //load

resize //瀏覽器視窗被調整尺寸
scroll //使用者上下拉動卷軸

//事件位置 (螢幕 >頁面 > 操作視窗)
function showPosition(event) {                 // Declare function
    sx.value = event.screenX;                    // Update element with screenX
    sy.value = event.screenY;                    // Update element with screenY
    px.value = event.pageX;                      // Update element with pageX
    py.value = event.pageY;                      // Update element with pageY
    cx.value = event.clientX;                    // Update element with clientX
    cy.value = event.clientY;                    // Update element with clientY
}
screenX,screenY //螢幕
pageX,pageY //頁面
clientX,clientY //操作視窗
  • 鍵盤事件
1
2
lastkey.textContent = 'Last key in ASCII code: ' + e.keyCode; // e.keyCode
el.addEventListener('keypress', charCount, false);// keypress
  • 滑鼠事件
1
2
3
4
elClose.addEventListener('click', dismissNote, false); // Click

mousedown //滑鼠按下 (觸控用touchstart)
mouseup //滑鼠釋放 (觸控用touchend)
  • 聚焦事件
1
2
el.addEventListener('focus', tipUsername, false);  // focus
el.addEventListener('blur', checkUsername, false); // blur
  • 表單事件
1
2
elForm.addEventListener('submit', checkTerms, false); //submit送出前驗證
elSelectPackage.addEventListener('change', packageHint, false); //change內容變更
  • 變動事件：DOM結構變更時
1
elList.addEventListener('DOMNodeInserted', updateCount, false); // DOM節點插入
  • HTML5事件
1
2
3
4
5
6
7
8
9
//DOMContentLoaded,DOM樹建立時啟動,快過load事件
window.addEventListener('DOMContentLoaded', setup, false);

//beforeunload,頁面內容卸載之前,用在離站前提醒內容儲存
window.addEventListener('beforeunload', function(event) {
    var message = 'You have changes that have not been saved';
    (event || window.event).returnValue = message;
    return message;
});

DOM事件

  • DOM事件處理器
1
2
var elUsername = document.getElementById('username'); 
elUsername.onblur = checkUsername;  //指定事件blur,呼叫函式
  • DOM事件監聽器(呼叫多個函式)
1
2
3
4
5
6
7
var elUsername = document.getElementById('username');
elUsername.addEventListener('blur', checkUsername, false); //指定事件blur,呼叫函式

//需要傳入參數的函式
elUsername.addEventListener('blur', function() { 
    checkUsername(5);
}, false);
  • event物件
1
2
3
4
5
6
function getTarget(e) {
    if (!e) {
        e = window.event;
    }
    return e.target || e.srcElement;
    }
  • 事件流程
    • 事件氣泡（event bubbling）：事件從互動的元件向外循序啟動
    • 事件捕捉（event capturing）：事件從最外層元件向內循序啟動
    • 影響：使用指定元件 + 其祖先或後代元件 的事件處理器