DOM事件基礎（一）

1.DOM0級事件

 

在瞭解DOM0級事件以前，咱們有必要先了解下HTML事件處理程序，也是最先的這一種的事件處理方式，代碼以下：

 

<button type="button" onclick="showFn()"></button>

<script>

    function showFn() {

        alert('Hello World');

    }

</script>

優勢：不須要操做dom來完成事件的處理

缺點;與HTML JS強耦合一旦修改須要改html和js兩個部分

 

那麼什麼是DOM0級處理事件呢？DOM0級事件就是將一個函數賦值給一個事件處理屬性，好比：

<button id="btn" type="button"></button>

<script>

var btn = document.getElementById("btn");

btn.onclick = function(){

alert("hello world")

}

 

//btn.onclick = null 解綁事件

以上代碼咱們給button定義了一個id，經過JS獲取到了這個id的按鈕，並將一個函數賦值給了一個事件處理屬性onclick，                           這樣的方法即是DOM0級處理事件的體現。

咱們能夠經過給事件處理屬性賦值null來解綁事件。

 

DOM0級事件處理程序的缺點在於一個處理程序沒法同時綁定多個處理函數，好比我還想在按鈕點擊事件上加上另一個                          函數。

</script>

 

 2.DOM2級事件

 

DOM2級事件在DOM0級事件的基礎上彌補了一個處理程序沒法同時綁定多個處理函數的缺點，容許給一個處理程序添加多個處                理函數。代碼以下：

<input type="button"  id="btn"/>

<script>

var btn = document.getElementById("btn");

 

function showfn(){

alert("hello world")

}

 

btn.addEventListener("click",showFn,false);

// btn.removeEventListener('click', showFn, false); 解綁事件

 

DOM2級事件定義了addEventListener和removeEventListener兩個方法，

分別用來綁定和解綁事件，方法中包含3個參數，分別是綁定的事件處理屬性名稱（不包含on）、

處理函數和是否在捕獲時執行事件處理函數。若是咱們還須要添加一個鼠標移入的方法，只須要：

 

btn.addEventListener("mouseover",showFn,false);

 

這樣點擊按鈕和鼠標移入時都將觸發showFn方法。

 

須要注意的是IE8級如下版本不支持addEventListener和removeEventListener，須要用attachEvent和detachEvent來實                            現：

 

btn.attachEvent('onclick', showFn); // 綁定事件 

btn.detachEvent('onclick', showFn); // 解綁事件

這裏咱們不須要傳入第三個參數，由於IE8級如下版本只支持冒泡型事件。

 

3.DOM3級事件

 

DOM3級事件在DOM2級事件的基礎上添加了更多的事件類型，所有類型以下：

 

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

焦點事件，當元素得到或失去焦點時觸發，如：blur、focus

鼠標事件，當用戶經過鼠標在頁面執行操做時觸發如：dbclick、mouseup

滾輪事件，當使用鼠標滾輪或相似設備時觸發，如：mousewheel

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

鍵盤事件，當用戶經過鍵盤在頁面上執行操做時觸發，如：keydown、keypress

合成事件，當爲IME（輸入法編輯器）輸入字符時觸發，如：compositionstart

變更事件，當底層DOM結構發生變化時觸發，如：DOMsubtreeModified

同時DOM3級事件也容許使用者自定義一些事件。

 

DOM事件流

 

上文中講到了addEventListener的第三個參數爲指定事件是否在捕獲或冒泡階段執行，設置爲true表示事件在捕獲階段執                            行，設置爲true表示事件在捕獲階段執行，而設置爲false表示事件在冒泡階段執行。

那麼什麼是事件冒泡和事件捕獲呢?

 

1.事件冒泡

 

所謂事件冒泡就是事件像泡泡同樣從最開始生成的地方一層一層往上冒，好比上圖中a標籤爲事件目標，點擊a標籤後同時                         也會觸發p、li上的點擊事件，一層一層向上直至最外層的html或document。

下面是代碼示例：

<div id="box">

<a id="child">事件冒泡</a>

</div>

<script>

var box = document.getElementById("box");

child = document.getElementById("child");

 

child.addEventListener("click",function(){

alert("我是目標事件")

},false);

 

child.addEventListener("click",function(){

alert("事件冒泡至div");

},false);

 

上面的代碼運行之後點擊a標籤,首先會彈出"我是目標事件",而後會彈出"冒泡至div"

這就說明事件自下向上冒泡

 

那麼咱們該如何阻止事件冒泡呢?

這裏涉及到了Event對象中的stopPropagation方法:

 

child.addEventListener("click",function(e){

alert("我是目標事件");

e.stopPropagation();

},false);

加上stopPropagation方法後,咱們再次點擊a標籤就不會觸發div上的click事件了.

 

2.事件捕獲

 

和事件冒泡相反，事件捕獲是自上而下執行，咱們只須要將addEventListener的第三個參數改成true就行。

 

<div id="box">

     <a id="child">事件冒泡</a>

</div>

 

<script>

 var box = document.getElementById('box'),

 child = document.getElementById('child');

 

 child.addEventListener('click', function() {

     alert('我是目標事件');

 }, true);

 

 box.addEventListener('click', function() {

    alert('事件冒泡至DIV');

 }, true);

 

 此時咱們點擊a標籤，首先彈出的是'事件冒泡至DIV'，其次彈出的是'我是目標事件'，正好與事件冒泡相反