DOM事件
DOM事件的級別
DOM級別一共可以分為四個級別：DOM0級蔬墩、DOM1級译打、DOM2級和DOM3級。而DOM事件分為3個級別：DOM0級事件處理拇颅，DOM2級事件處理和DOM3級事件處理
- DOM0 : element.onclick = function(e) {}
- DOM1 ：該標(biāo)準(zhǔn)中未涉及到事件綁定的相關(guān)東西
- DOM2 : element.addEventListener('click', function(e){}, false)奏司， 一個DOM元素可以添加多個事件
- DOM3 : element.addEventListener('keyup', function(e){}, false)，在DOM2標(biāo)準(zhǔn)基礎(chǔ)上面增加了新的事件類型：鼠標(biāo)事件蔬蕊，鍵盤事件结澄，焦點(diǎn)事件
DOM事件模型
- 事件捕獲：從外向內(nèi), window -> document -> body -> button
- 事件冒泡：從內(nèi)向外哥谷，button -> body -> document -> window
DOM事件流
瀏覽器為當(dāng)前的頁面與用戶進(jìn)行交互的過程中岸夯，點(diǎn)擊鼠標(biāo)后事件如何傳入和響應(yīng)的呢？
捕獲階段：從外部容器開始向內(nèi)
目標(biāo)階段：事件通過捕獲到達(dá)目標(biāo)階段
冒泡階段：從目標(biāo)元素再上傳到window對象
事件委托
什么事件可以代理们妥？什么事件不可以代理呢猜扮？
- 通常支持事件冒泡（Event Bubbling）的事件類型為鼠標(biāo)事件和鍵盤事件，例如：mouseover, mouseout, click, keydown, keypress监婶。
- 接口事件(指的是那些不一定與用戶操作有關(guān)的事件)則通常不支持事件冒泡（Event Bubbling）旅赢，例如：load, change, submit, focus, blur齿桃。
事件對象event的屬性方法的差別
| 事件 | IE | DOM |
|---|---|---|
| 停止冒泡 | cancelBubble = true | stopPropagation() |
| 阻止元素默認(rèn)事件 | returnValue = false | preventDefault() |
| 事件目標(biāo) | srcEelement | target |
自定義事件
- 如何給一個按鈕綁定一個自己定義的事件呢？
// 1. 使用Event對象來自定義事件
// 開始創(chuàng)建一個自己定義的事件對象
var eve = new Event('customEvent');
// 使用dom2事件處理的方式來給這個元素綁定一個事件
var dom = document.documentElement;
dom.addEventListener('customEvent', function(e) {
console.log('customEvent called!');
});
// 下面的這句話可以在適合的場景中來觸發(fā)一個自己定義的事件對象
setTimeout(function(){
// 在1s之后觸發(fā)這個事件
dom.dispatchEvent(eve);
}, 1000)
// 2. 使用CustomEvent來實(shí)現(xiàn)自定義事件
var dom = document.documentElement;
// 使用CustomEvent的方式可以在事件觸發(fā)的時候傳遞一個參數(shù)煮盼，然后通過e.detail 的方式來獲取這個參數(shù)信息
var myClick = new CustomEvent('myClick', {detail : {name : 'zhangsan', age : 24}});
dom.addEventListener('myClick', function(e){
console.log(e.detail, e.target)
})
dom.dispatchEvent(myClick);
