DOM事件

事件：觸發-響應機制

Event接口表示在DOM中發生的任何事件，一些是用戶生成的（例如鼠標或鍵盤事件），而其他由API生成。

1 事件三要素

事件源:觸發(被)事件的元素

事件類型:事件的觸發方式(例如鼠標點擊或鍵盤點擊)

事件處理程序:事件觸發後要執行的代碼(函數形式)

2 事件的基本使用

var box = document.getElementById('box');
box.onclick = function() {
  console.log('代碼會在box被點擊後執行');  
};

3 案例

點擊按鈕彈出提示框

點擊按鈕修改元素的樣式

4 註冊/移除事件的三種方式

var box = document.getElementById('box');
box.onclick = function () {
  console.log('點擊後執行');
};
box.onclick = null;
box.addEventListener('click', eventCode, false);
box.removeEventListener('click', eventCode, false);
box.attachEvent('onclick', eventCode);
box.detachEvent('onclick', eventCode);
function eventCode() {
  console.log('點擊後執行');
}

5 兼容代碼

function addEventListener(element, type, fn) {
  if (element.addEventListener) {
    element.addEventListener(type, fn, false);
  } else if (element.attachEvent){
    element.attachEvent('on' + type,fn);
  } else {
    element['on'+type] = fn;
  }
}

function removeEventListener(element, type, fn) {
  if (element.removeEventListener) {
    element.removeEventListener(type, fn, false);
  } else if (element.detachEvent) {
    element.detachEvent('on' + type, fn);
  } else {
    element['on'+type] = null;
  }
}

6 事件的三個階段

1. 捕獲階段

2. 當前目標階段

3. 冒泡階段

事件對象.eventPhase屬性可以查看事件觸發時所處的階段

7 事件對象的屬性和方法

event.type 獲取事件類型

clientX/clientY     所有瀏覽器都支持，窗口位置

pageX/pageY       IE8以前不支持，頁面位置

event.target || event.srcElement 用於獲取觸發事件的元素

event.preventDefault() 取消默認行爲

8 案例

跟着鼠標飛的天使

鼠標點哪圖片飛到哪裏

獲取鼠標在div內的座標

9 阻止事件傳播的方式

標準方式 event.stopPropagation();

IE低版本 event.cancelBubble = true; 標準中已廢棄

10 常用的鼠標和鍵盤事件

onmouseup 鼠標按鍵放開時觸發

onmousedown 鼠標按鍵按下觸發

onmousemove 鼠標移動觸發

onkeyup 鍵盤按鍵按下觸發

onkeydown 鍵盤按鍵擡起觸發