1、8-JavaScript事件模型創建可用的界面2015 Spring, xian本章內容JavaScript事件模型事件注冊HTML特性，DOM屬性和方法事件對象跨瀏覽器事件處理捕捉和冒泡對象自定義對象JavaScript事件模型事件模型DOM事件模型提供了一種方式，讓用戶與瀏覽器環境交互DOM事件模型由事件和附著在DOM對象上的事件監聽器組成DOM ElementEvent ListenerClick meOn Click Listener事件類型DOM提供的常見事件類型集合，使用于99%的時間鼠標事件觸摸事件表單事件鍵盤事件DOM事件DOM事件類型的全列表 也可以自定義事件類型常見事件類型

2、鼠標事件clickhovermouseupmousedownmouseovermouseout鍵盤事件keydownkeypresskeyup常見事件類型(2)UI事件loadabortselectresizechange焦點事件blurfocusfocusinfocusout常見事件類型(3)觸摸事件touchstarttouchendtouchcanceltouchleavetouchmove事件注冊事件處理開發者能夠為特殊事件類型和DOM元素，注冊一個事件處理器/監聽器注冊可以完成由：HTML特性使用DOM元素屬性使用DOM事件處理器作為HTML特性通過給事件處理器屬性進行簡單賦值，可以

3、附著事件處理器值是純JavaScript，且不總是函數Click MeClick Mefunction buttonClickFunction() console.log(You click the Button);使用HTML特性注冊事件處理器 演示使用DOM元素屬性使用標準的DOM事件在確定DOM元素上，并賦引用給函數可以是匿名Click mevar button = document.getElementById(click-button);button.onclick = function onButtonClick() console.log(你點擊了按鈕);使用DOM元素屬性 演示

4、使用DOM附加事件處理器到DOM上的標準方法基本語法是：示例domElement.addEventListener(eventType, eventHandler, isCaptureEvent)var button = document.getElementById(click-button);button.addEventListener(click, function () console.log(You clicked me); , false);使用DOM注冊事件處理器 演示事件對象得到事件數據事件對象事件處理器通過函數參數訪問事件對象事件對象包含相關信息：事件類型事件目標當鍵盤事件

5、觸發按下的鍵當鼠標事件觸發按下的鼠標鍵鼠標在屏幕上的位置事件對象(2)事件對象可訪問，作為僅有的函數處理器參數但是，IE并不能傳遞事件對象保存事件對象在window.event幸運的是可以簡單修復function onButtonClick(event) console.log(event.target); console.log(event.type); console.log( + event.clientX + , + event.clientY + );button.addEventListener(click, onButtonClick, false); function onBu

6、ttonClick(event) if(!event) event = window.event; / Your code事件對象 演示跨瀏覽器事件處理器記住某個瀏覽器？跨瀏覽器兼容性addEventListener并不是任何地方都支持IE的老版本有自己的方法來附加事件處理器attachEvent(on + eventType, handler)使用特征檢測：domElement.attachEvent(on + eventType, eventHander);/ Up to IE8if (document.attachEvent) domElement.attachEvent();/ IE

7、9, IE 10, Firefox, Chrome, Opera, Safarielse if (document.addEventListener) domElement.addEventListener(); / Reeeally old browserselse domElementon + eventType = handler; 跨瀏覽器事件處理可以在一個方法中轉換創建有三個參數的函數目標元素事件類型事件處理器使用瀏覽器支持的方法跨瀏覽器事件處理器 演示捕捉和冒泡事件自頂向下和其他方法事件鏈當用戶點擊HTML元素時，事件也觸發了該元素的所有父節點按鈕仍然是目標，但點擊事件觸發了所有的

8、父節點事件在鏈中觸發了所有元素 Click Me 點擊觸發觸發觸發觸發事件鏈 演示兩類事件鏈有兩類事件鏈捕捉和冒泡冒泡處理器冒泡給父節點先執行的處理器是在目標上然后是其父節點，父節點的父節點，等捕捉處理器沿著事件鏈向下先執行的處理器在所有父節點上最后執行的處理器在目標上捕捉捕捉沿著事件鏈向下先執行的處理器在所有父節點的其中一個上HTMLBODYDIVBUTTON4213用戶單擊按鈕冒泡冒泡沿著事件鏈向上先執行的處理器是在目標上HTMLBODYDIVBUTTON1234用戶單擊按鈕捕捉和冒泡 演示自定義事件自定義事件創建自定義事件使用CustomEvent()構造器示例：創建自定義事件tripl

9、eclick得到body元素來附加自定義事件和addEventListenervar event = new CustomEvent(eventType); var event = new CustomEvent(tripleClick); var body = document.getElementsByTagName(body)0;body.addEventListener(tripleClick, function() alert(You click three times);, false);自定義事件(2)觸發自定義事件使用：示例body.dispatchEvent(event);(function() var button = document.getElementById(btn-click); var counter = 0; button.addEventListener(click, func