全面剖析DOM事件模型

全面剖析DOM事件模型

什麼是事件:事件是元素天生自帶的默認行爲 * 1 不論咱們是否給其綁定了方法,當咱們操做的時候,也會把對應的時間觸發 什麼是事件綁定: 目的是當事件行爲觸發的時候,能夠作一些事情

經常使用的事件行爲

[鼠標事件行爲]

click  點擊事件 (移動端click被識別爲單機)
	dblclick  雙擊事件
	mousedown  鼠標摁下
	mouseup  鼠標擡起
	mousemove  鼠標移動
	mouseover  鼠標滑過
	mouseout   鼠標劃出
	mouseenter   鼠標進入
	mouseleave   鼠標離開
	mousewhell     鼠標滾輪滾動
複製代碼

[鍵盤事件]

keydown  按下某個鍵
keyup  擡起某個鍵
keypress   除shift/Fn/CapsLock 鍵之外,其餘鍵按住(連續觸發)
複製代碼

[移動端的手指事件]

單手指事件模型  Touch
touchstart  手指摁下
touchmove   手指移動
touchend  手指鬆開
touchcancel    操做取消(通常應用於非正常狀態下的操做結束)
複製代碼

多手指事件模型Gesture

gesturestar
gesturechange  /  gestureupdate 
gestrueend
gestruecancel
複製代碼

表單元素經常使用事件

focus  獲取焦點
blur  失去焦點
change  內容改變
複製代碼

音視頻經常使用事件

canplay    能夠播放(資源沒有加載完,播放可能會卡頓)
canplaythrough   能夠播放(資源已經加載完,播放中不會卡頓)
play  開始播放
playing  播放中
pause  暫停
複製代碼

其餘經常使用事件

load   加載完
unload  資源卸載
beforeunload    當前頁面關閉以前
error 資源加載失敗
scroll  滾動時間
readystatechange   AJAX 請求狀態改變事件
contextmenu  : 鼠標右鍵觸發
複製代碼

DOM 0事件綁定VS DOM2事件綁定

[DOM 0 ]
	元素 . on事件行爲=function(){}
	[DOM 2]
	元素.addEventListener(事件行爲, function(){},  true/false)

ES6~ES8中: 元素.attachEvent('on事件行爲',function(){})
複製代碼

/* DOM0事件綁定的原理*/

DOM 0

原理: 給當前元素賦值,當事件觸發瀏覽器會幫咱們把賦的值,值執行,也致使只能給當前元素某一個事件行爲綁定一個方法

box.onclick = function () {
console.log( '哈哈哈~~');
}
box.onclick = function () {
console. log( '呵呵呵~~');
輸出的呵呵呵
複製代碼

ontransitionend : 動畫結束產生的行爲

box.onclick = function () {
console.1og( '哈哈哈~~');
//=>移除事件綁定: DOMO 直接賦值爲nul1便可
box .onclick = null;
}
複製代碼

DOM2

/* DOM2事件綁定的原理: */

原理: 基於原型鏈查找機制,找到EventTarget,Prototype上的方法而且執行,此方法執行,會把當前某元素某個事件行爲綁定的全部方法,存放到瀏覽器默認的事件池中(綁定幾個方法,會向事件池存儲幾個),當事件行爲觸發,會把事件池中存儲的對應方法,依次按照順序執行"給當前元素某一個事件行爲綁定多個不一樣方法"

box .addEventtistener( 'click', function () {
console.log( '哈哈哈~~');
}, false);
box .addEventListener('click', function () {
console. log( '呵呵呵~~');
}, false);
兩個都輸出
複製代碼

DOM2 事件綁定的時候,咱們通常採用實名函數, 目的:這樣能夠基於實名函數去移除事件綁定

//=>D0M2事件綁定的時候，咱們通常都採用實名函數
//=>目的:這樣能夠基於實名函數去移除事件綁定
function fn() {
console. log( '哈哈哈~~');
//=>移除事件綁定  從事件池中移除,因此須要指定好事件類型,方法等信息,要和綁定的時候同樣才能夠移出)
box . removeEventlistener('click', fn, false);
}
box .addEventListener('click', fn, false);
複製代碼

function fn1(){ console.log(1); }
function fn2(){ console.log(2); }
function fn3(){ console.log(3); }
box .addEventListener('click', fn2，false);
box . addEventListener('click', fn3, false);
box . addEventListener('click', fn1, false);
//=>基於addEventListener向事件池增長方法，存在去重的機制「同一個元素，同一個事件類型，在事件池中只能存儲一遍這個方法，不能重複存儲」
box .addEventListener('click', fn1, false);
box . addEventListener('click', fn1, false);
複製代碼

DOMContent Loaded.

DOM0和DOM2的區別

1 語法上的
box . onclick=function(){}
box. addEventListener('click',function(){})
2.底層運行機制上的區別
DOMB就是給元素的某個屬性綁定方法(有效綁定的方法只有一個)
DOM2是基於事件池機制完成，每增長一-個綁定的方法，都會往事件池中存放一個...當事件觸發會依次執行事件池中的事情=>發佈訂閱其實就是模擬的事件池機制 (能夠給同一個元素的某個事件綁定多個不一樣的方法)
3.DOM2中能夠給- -些特殊的事件類型綁定方法，這些事件類型DOM0不支持綁定，例如: DOMContentLoaded、
複製代碼

DOM2的事件池機制

1.基於addEventlistener/attachEvent (IE6~8)向事件池中追加方法:新版本瀏覽器會根據元素和事件類型對新增的方法作重複校驗，可是IE6~8不能夠; 2.當事件行爲觸發，會把事件池中的方法按照增長的順序依次執行，可是IE6~8中執行的順序是不固定的

window. onload VS $ ( document) .ready( )

1/ 1.$(document).ready() 採用的是DOM2事件綁定，監聽的是>DOMContentLoaded這個事件，因此只要DOM結構加載完成就會被觸發執行，並且同一個頁面中可使用屢次(綁定不一樣的方法，由於基於DOM2事件池綁定機制完成的) // 2.window. onload必須等待全部資源都加載完成纔會被觸發執行，採用DOM0事件綁定，同一個頁面只能綁定一次(一個方法)，想綁定多個也須要改成window. addEventlistener('load', function () {})DOM2綁定方式

事件對象和事件傳播機制

事件對象:給元素的事假行爲綁定方法，當事件行爲觸發方法會被執行，不只被執行，並且還會把當前操做的相關信息傳遞給這個函數=>「事件對象」 若是是鼠標操做的,獲取的是MouseEvent類的實例 +> 鼠標事件對象 鼠標事件對象-> MouseEvent. prototype -> UIEvent. prototype ->Event . prototype -> object. prototype 若是是鍵盤操做，獲取的是KeyboardEvent類的實例=> 鍵盤事件對象除了以上還有:普通事件對象(Event)、手指事件對象(TouchEvent)

鼠標對象事件

box.onclick = function (ev) { 鼠標事件對象 includes() 方法用來判斷一個數組是否包含一個指定的值，若是是返回 true，不然false

clientX/clientY:當前鼠標觸發點距離當前窗口左上角的X/Y軸座標 pagex/pageY:觸發點距離當前頁面(整個文檔)左上角的X/Y軸座標 type: 觸發的事件的類型 target : 事件源(操做的是哪一個元素,那個元素就是事件源),在不兼容的瀏覽器中可使用srcElement獲取,也表明的是事件源 ev.preventDefault (): 用來阻止默認行爲的放法,不兼容的瀏覽器中使用 ev.returnValue=false也能夠阻止默認行爲 ev.preventDefault():用來阻止默認行爲的方法，不兼容的瀏覽器中用ev. ev.returnValue=false也能夠阻止默認行爲 ev.stopPropagation():阻止冒泡傳播,不兼容的瀏覽器中用ev. cancelBubble=true也能夠阻止默認行爲 console.log(ev); }

clientX/clientY和pagex/clientY:的區別

阻止a標籤的三種方法

preventDefault : 通知瀏覽器不要執行與這個事件關聯的動做

鍵盤事件對象

code & key : 存儲的都是按鍵,code更細緻 keyCode & which : 存儲的是鍵盤按鍵對應的碼值

方向鍵 : 37 38 39 40 => 左上右下
空格 :32 回車enter : 13 回退Back :8 delete 46 shift 16 ctrl 17

事件的傳播機制

捕獲階段

目標階段

冒泡傳播

ev : 記錄當前操做的信息 // 事件對象

//=>阻止冒泡傳播
ev.stopPropagation( );
複製代碼

mouseenter vs mouseover