Dom 事件詳解

xiaokai 發(fā)布于2019-08-30 15:56 / 2958人閱讀

摘要：級事件規(guī)定事件流包括三個階段事件捕獲目標事件事件冒泡。返回布爾值，指示事件是否可擁可取消的默認動作。返回其事件監(jiān)聽器觸發(fā)該事件的元素。返回當前對象表示的事件的名稱。不再派發(fā)事件常用于阻止事件冒泡。

事件是 JavaScript 與 HTML 交互的基礎(chǔ)。要實現(xiàn)用戶與頁面的交互，先要對目標元素綁定特定的事件、設(shè)置事件處理函數(shù)，然后用戶觸發(fā)事件，事件處理函數(shù)執(zhí)行，產(chǎn)生交互效果。

DOM 事件級別

DOM 級別分為四個級別：DOM0 級、DOM1 級、DOM2 級、DOM3 級；

DOM 事件級別分為三個級別：

DOM0 級事件

缺點：無法設(shè)置多個事件處理函數(shù)

DOM2 級事件

可以為事件設(shè)置多個事件處理函數(shù)，可以通過第三個參數(shù) ( useCapture ) 設(shè)置在什么階段執(zhí)行事件處理函數(shù)，默認是 false， 即在事件冒泡階段執(zhí)行事件處理函數(shù)。

需要注意的是在 IE8 及以下版本需要用 attachEvent 和 detachEvent 實現(xiàn)，只有兩個參數(shù)，事件名需要以 on 開頭，只支持在事件冒泡階段執(zhí)行事件處理函數(shù)。

DOM3 級事件

DOM3 級事件是在 DOM2 級事件的基礎(chǔ)上添加了更多的事件類型，允許自定義事件。

UI事件，當用戶與頁面上的元素交互時觸發(fā)，如：load、scroll

焦點事件，當元素獲得或失去焦點時觸發(fā)，如：blur、focus

鼠標事件，當用戶通過鼠標在頁面執(zhí)行操作時觸發(fā)如：dbclick、mouseup

滾輪事件，當使用鼠標滾輪或類似設(shè)備時觸發(fā)，如：mousewheel

文本事件，當在文檔中輸入文本時觸發(fā)，如：textInput

鍵盤事件，當用戶通過鍵盤在頁面上執(zhí)行操作時觸發(fā)，如：keydown、keypress

合成事件，當為IME（輸入法編輯器）輸入字符時觸發(fā)，如：compositionstart

變動事件，當?shù)讓覦OM結(jié)構(gòu)發(fā)生變化時觸發(fā)，如：DOMsubtreeModified

// 自定義事件
var event = new Event("test")
// 給元素綁定事件
domElement.addEventListener("test", function() {
    console.log("event test")
},)

// 觸發(fā)事件
setTimeout(function() {
    domElement.dispatchEvent(event)
}, 1000)

DOM 事件流

想象畫在一張紙上的一組同心圓。如果把手指放在圓心上，那么手指指向的不僅僅是一個圓，而是紙上的所有圓。所以如果點擊了某個按鈕，點擊事件不僅僅發(fā)生在這個按鈕上，整個頁面也被點擊了。

事件流又稱為事件傳播，描述的是從頁面中接收事件的順序。DOM2 級事件規(guī)定事件流包括三個階段: 事件捕獲(capturing phase)、目標事件(target phase)、事件冒泡(bubbling phase)。

發(fā)生的順序是：事件捕獲階段 --> 目標事件階段 --> 事件冒泡階段

事件冒泡

事件開始時由最具體的元素(目標元素)接收，然后逐級向上傳播。




  目標元素
  父級元素

運行結(jié)果：

事件捕獲

事件按 window -> document -> html -> body -> ... -> 目標元素 的方向向下層元素傳遞。




  目標元素
  父級元素

運行結(jié)果：

![bubbling](https://user-gold-cdn.xitu.io...
)

事件對象參數(shù) event

在用戶觸發(fā)事件，執(zhí)行事件處理函數(shù)的時候，默認會向事件處理函數(shù)傳入一個 event 對象，它記錄了該事件的狀態(tài)和行為。

event 常用屬性和方法

type 事件類型

target 事件發(fā)出者(觸發(fā)事件的元素)

currentTarget

事件監(jiān)聽者(被綁定事件的元素)

stopPropagation() 阻止事件冒泡或捕獲

preventDefault() 阻止瀏覽器默認行為

target 、currentTarget 與 this

當點擊 parent 時，輸出：

1 ...
2 ...
3 ...

當點擊 child 時，輸出：

1 ...
2 ...
3 ...

所以 target 是事件發(fā)出者，curentTarget 是事件監(jiān)聽者，事件處理函數(shù)中的 this 等同于 e.currentTarget

event 對象的一些兼容性寫法

獲得 event

// 事件處理函數(shù)
function handleClick(event) {
    var e = event || window.event
    ···
}

獲得 target

···
var target = e.target || e.srcElement
···

阻止瀏覽器默認行為

···
e.preventDefault ? e.preventDefault() : (e.returnValue = false)
···

阻止冒泡

···
e.stopPropagation ? e.stopPropagation() : (e.cancelBubble = true)
···

事件綁定與解綁

function addEvent(element, type, fn) {
    element.addEventListener ? element.addEventListener(type, fn, false) : element.attachEvent("on"+ type, fn)
}

function removeEvent(element, type, fn) {
    element.removeEventListener ? element.removeEventListener(type, fn, false) : element.detachEvent("on"+ type, fn)
}

屬性表

基礎(chǔ)屬性

屬性	描述
altKey	返回當事件被觸發(fā)時，”ALT” 是否被按下。
button	返回當事件被觸發(fā)時，哪個鼠標按鈕被點擊。
clientX	返回當事件被觸發(fā)時，鼠標指針的水平坐標。
clientY	返回當事件被觸發(fā)時，鼠標指針的垂直坐標。
ctrlKey	返回當事件被觸發(fā)時，”CTRL” 鍵是否被按下。
metaKey	返回當事件被觸發(fā)時，”meta” 鍵是否被按下。
relatedTarget	返回與事件的目標節(jié)點相關(guān)的節(jié)點。
screenX	返回當某個事件被觸發(fā)時，鼠標指針的水平坐標。
screenY	返回當某個事件被觸發(fā)時，鼠標指針的垂直坐標。
shiftKey	返回當事件被觸發(fā)時，”SHIFT” 鍵是否被按下。

IE 屬性

屬性	描述
cancelBubble	如果事件句柄想阻止事件傳播到包容對象，必須把該屬性設(shè)為 true。
fromElement	對于 mouseover 和 mouseout 事件，fromElement 引用移出鼠標的元素。
keyCode	對于 keypress 事件，該屬性聲明了被敲擊的鍵生成的 Unicode 字符碼。對于 keydown 和 keyup
offsetX,offsetY	發(fā)生事件的地點在事件源元素的坐標系統(tǒng)中的 x 坐標和 y 坐標。
returnValue	如果設(shè)置了該屬性，它的值比事件句柄的返回值優(yōu)先級高。把這個屬性設(shè)置為 false 可以阻止瀏覽器默認行為
srcElement	對于生成事件的 Window 對象、Document 對象或 Element 對象的引用。
toElement	對于 mouseover 和 mouseout 事件，該屬性引用移入鼠標的元素。
x,y	事件發(fā)生的位置的 x 坐標和 y 坐標，它們相對于用CSS動態(tài)定位的最內(nèi)層包容元素。

標準 event 屬性（2級 DOM 事件標準定義的屬性）

屬性或方法	描述
bubbles	返回布爾值，指示事件是否是冒泡事件類型。
cancelable	返回布爾值，指示事件是否可擁可取消的默認動作。
currentTarget	返回其事件監(jiān)聽器觸發(fā)該事件的元素。
eventPhase	返回事件傳播的當前階段。
target	返回觸發(fā)此事件的元素（事件的目標節(jié)點）。
timeStamp	返回事件生成的日期和時間。
type	返回當前 Event 對象表示的事件的名稱。
initEvent()	初始化新創(chuàng)建的 Event 對象的屬性。
preventDefault()	通知瀏覽器不要執(zhí)行與事件關(guān)聯(lián)的默認動作。
stopPropagation()	不再派發(fā)事件（常用于阻止事件冒泡）。