DOM事件類
1.基本概念（DOM事件的級別）
2.DOM事件模型（捕獲、冒泡）
3.DOM事件流
4.DOM事件捕獲的具體流程
5.Event對象的常見應用
6.自定義事件
基本概念---DOM事件的級別
- DOM0
el.onclick = function(){//code...}; - DOM2
el.addEventListener('click',function(){//code...},false); - DOM3
el.addEventListener('keyup',function(){//code...},false);
DOM事件模型（捕獲审残、冒泡）
捕獲------>目標階段-------->冒泡
DOM事件流
事件通過捕獲到達目標階段然后上傳到window對象
DOM事件捕獲的具體流程
window接收---->document---->html----->html-----body-----目標元素
var btn = document.getElementById('btn');
window.addEventListener('click',function(){ console.log('window'); },true)//捕獲階段
document.addEventListener('click',function(){ console.log('document'); },true)
document.dcoumentElement.addEventListener('click',function(){ console.log('html'); },true)
document.body.addEventListener('click',function(){ console.log('body'); },true)
btn.addEventListener('click',function(){ console.log('btn'); },true)
Event對象的常見應用
- event對象是事件響應中最重要的對象
- event.preventDefault() 阻止默認事件
- event.stopPropagation() 阻止冒泡
- event.stopImmediatePropagation() 綁定兩函數AB都會執(zhí)行灭红，如果用這個，A執(zhí)行完會組織B往踢。事件響應優(yōu)先級
- event.currentTarget 當前綁定的事件對象
- event.target 事件委托，事件代理，把自己子元素綁定到它們的父元素上判斷被點擊哪個元素气堕，target表示當前被點擊的元素
- srcElement IE中的target
自定義事件
var ev = document.getElementById('test');//獲取元素
var eve = new Event('custome');//創(chuàng)建自定義事件,只能指定事件名
ev.addEventListener('custome',function(){//code...})//為元素添加自定義事件
ev.dispatchEvent(eve);//觸發(fā)自定義事件
new customEvent()可指定事件名和object參數
