DOM事件

1.基本概念：DOM事件的級(jí)別

DOM事件類   
DOM1標(biāo)準(zhǔn)指定的時(shí)候沒(méi)有涉及任何和事件相關(guān)的東西；

事件級(jí)別
    DOM0    element.onclick=function(){};
    //-->true,false指定冒泡還是捕獲
    //IE attachEvent
    DOM2    element.addEventListener('click',function(){},false);
    //事件類型增加了很多；
    DOM3    element.addEventListener('keyup',function(){},false);

2.DOM事件模型（冒泡捕獲）

    捕獲（從上往下）
    冒泡（從目標(biāo)元素往上）

3.DOM事件流（頁(yè)面中接受事件的順序；）

瀏覽器在為當(dāng)前頁(yè)面與用戶做交互的過(guò)程中，比如點(diǎn)擊了鼠標(biāo)左鍵，
這個(gè)左鍵是怎么傳到你的頁(yè)面上，又怎么響應(yīng)的。

    1、捕獲階段
    2、目標(biāo)階段     事件通過(guò)捕獲到達(dá)目標(biāo)元素
    3、冒泡階段     從目標(biāo)元素上傳到window對(duì)象       

4.描述DOM事件捕獲的具體流程

    第一個(gè)接受事件的對(duì)象是window;
    取得body標(biāo)簽：document.body;
    表示html節(jié)點(diǎn)：document.documentElement;
    
捕獲流程： window-->document-->html標(biāo)簽-->body-->父級(jí)元素--子級(jí)元素...-->目標(biāo)元素

冒泡流程：從目標(biāo)元素一層一層最后到window完成了一次冒泡的流程 ； 

5.Event對(duì)象的常見(jiàn)應(yīng)用

• event.preventDefault(); 阻止默認(rèn)行為

  a標(biāo)簽綁定了click事件，在響應(yīng)函數(shù)中設(shè)置了preventDefault，就阻止了鏈接默認(rèn)跳轉(zhuǎn)的行為。

• event.stopPropagation(); 阻止冒泡

父級(jí)元素、子集元素都綁定有事件，單擊子元素做一件事，單擊父元素在做一件事；如果不阻止冒泡，單擊子元素的范圍的時(shí)候，根據(jù)冒泡的原理，父級(jí)元素也會(huì)被響應(yīng)；

• event.stoplmmediatePropagation(); 事件響應(yīng)優(yōu)先級(jí)

  一個(gè)按鈕綁定了兩個(gè)click事件1和2，想通過(guò)優(yōu)先級(jí)的方式，第一個(gè)響應(yīng)函數(shù)是a，
  第二個(gè)響應(yīng)函數(shù)是b，依次注冊(cè)了a、b兩個(gè)事件，想讓執(zhí)行a之后完不在執(zhí)行b了；
  a響應(yīng)函數(shù)中加上上面那個(gè)代碼，就會(huì)成功的阻止b執(zhí)行；
  

• event.currentTarget（currentTarget當(dāng)前綁定事件的對(duì)象；指定的是父級(jí)元素)

  把子元素的事件代理都轉(zhuǎn)移到父元素上，只綁定一次事件就可以了。做響應(yīng)的時(shí)候就要區(qū)分是哪個(gè)元素被觸發(fā)。

• event.target（target是當(dāng)前被點(diǎn)擊的元素）

• 自定義事件（重要！?。。?-或者模擬事件

    eg:有一個(gè)按鈕，增加一個(gè)事件，在別的地方觸發(fā)這個(gè)事件，而不是用回調(diào)的方式處理；
    
    1.var eve = new Event('custome');   
    //通過(guò)new Event聲明一個(gè)自定義事件，把eve這個(gè)事件當(dāng)作普通事件對(duì)象，只不過(guò)這個(gè)事件是 
  你定義的
   
    2.ev.addEventListener('custome',function(){
        console.log('custome');
    }); //ev是一個(gè)dom節(jié)點(diǎn)，通過(guò)dom2這種事件注冊(cè)的方式綁定這個(gè)事件名稱；
    
    3.//最后觸發(fā)就是用這個(gè)dom節(jié)點(diǎn)，dispatchEvent這個(gè)api觸發(fā)eve這個(gè)對(duì)象。
    ev.dispatchEvent(eve);
  

  總結(jié)：

  • Event 的不足只能指定事件名，如果想給這個(gè)事件加些數(shù)據(jù)，Event是做不到的；用CustomEvent；

  • CustomeEvent 自定義事件的一個(gè)方法；除了可以指定事件名，后邊還可以跟一個(gè)object來(lái)做指定參數(shù)。這個(gè)參數(shù)是自定義的，所以用法是一樣的。

  *******CustomeEvent怎么用的，怎么傳遞數(shù)據(jù)？***********