初識DOM事件

時間 2019-12-05

標籤 dom 事件欄目 HTML 简体版

原文原文鏈接

事件流

DOM(文檔對象模型)結構是一個樹形結構,當一個HTML元素產生一個事件時,該事件會在元素節點與根節點之間的路徑傳播,路徑所通過的節點都會收到該事件,這個傳播過程可稱爲DOM事件流瀏覽器
兩種事件流bash
```
<body onclick="bodyClick">
    <div onclick="divClick()">
        <button onclick="buttonClick()">
            <p onclick="pClick()">點擊冒泡/捕獲</p>
        </button>
    </div>
</body>
複製代碼
```
- 事件冒泡流 : 事件開始時由最具體的元素接收,而後逐級向上傳播到較爲不具體的節點
  - 傳播過程: p ==> button ==> div ==> body
- 事件捕獲流 : 描述是不太具體的DOM節點應該更早接收到事件,而最具體的節點應該最後接收到事件
  - 傳播過程: body ==> div ==> button ==> p
    
    (偷波圖)
阻止事件冒泡函數
- 事件觸發的過程當中,可能會出現事件冒泡的效果,爲了阻止事件冒泡
  - e == window.event
  - 1.window.event.cancelBubble = true;(IE特有,谷歌火狐不支持)
  - 2.e.stopPropagation();
- 注:可經過e.eventPhase屬性知道當前事件是什麼階段
  - 屬性值: 1-->捕獲階段 2-->目標階段 3-->冒泡階段
  - 通常默認都是冒泡階段不多使用捕獲階段
- 拓展: e.preventDefault()阻止事件默認行爲
  - 在a標籤中使用return false等效於同時調用e.preventDefault()和e.stopPropagation()

事件

事件有三個階段:
- 1.事件捕獲階段 : 事件從DOM節點自上而下向目標節點傳播的階段
- 2.事件目標階段 : 真正的目標節點正在處理事件的階段
- 3.事件冒泡階段 : 事件從目標節點自上而下向DOM節點傳播的階段

DOM0級事件處理程序

把事件處理函數賦值給一個元素的事件類型(onclick)
- 綁定事件: object.onclick = function(){};
- 解綁事件: object.onclick = null;
注 : DOM0級事件可同時添加多個不一樣的事件類型,不可同時添加多個相同的事件類型(後者會覆蓋前者)

爲同個元素註冊多個不一樣的事件

element.onclick = f1;  
element.onmouseover = f1;
element.onmouseout = f1;
funtion f1(e){
    switch(e.type){
        case "click":  ;break;
        case "mouseover":  ;break;
        case "mouseout":  ;break;
    }
}
複製代碼

DOM2級事件處理程序

用方法爲元素綁定(解綁)事件
- 綁定事件
  - object.addEventListener("事件類型",fn,boolen);
    - 參數1:事件類型(沒有on)--參數2:事件處理函數(命名函數,匿名函數)
      參數3:可選,控制事件執行階段(false爲事件冒泡階段,true爲事件捕獲階段)
    - 谷歌火狐支持,IE8不支持
  - object.attachEvent("事件類型",fn);
    - 參數1:事件類型(有on)--參數2:事件處理函數(命名函數,匿名函數)
    - 谷歌火狐不支持,IE8支持
  - 注:兩種兼容的瀏覽器不一樣,addEventListener中的this是當前綁定事件的對象且事件類型是沒有on的(click),attachEvent中的this是window且事件類型是有on的(onclick).
- 解綁事件
  - object.removeEventListener("無on事件類型",命名函數,boolen)
  - object.detachEvent("有on事件類型",命名函數);
注:
- 用什麼方式綁定事件,就應該用對應的方式解綁事件.解綁事件的時候,要求在綁定事件的時候使用命名函數.
- DOM2級事件可添加多個不一樣事件類型,也可同時添加多個相同事件類型

綁定及解綁事件兼容代碼

//爲任意一個元素綁定事件:元素,事件類型,命名事件處理函數
    function addEventListener(element,type,fn){
        if(element.addEventListener){
            element.addEventListener(type,fn,false);
        }else if(element.attachEvent){
            element.attachEvent("on" + type,fn);
        }else{
            element["on" + type] = fn;    
        }
    }
    
    //爲任意一個元素解綁某個事件:元素,事件類型,命名事件處理函數
    function removeEventListener(element,type,fn){
        if(element.removeEventListener){
            element.removeEventListener(type,fn,flase);
        }else if(element.detachEvent){
            element.detachEvent("on" + type,fn);
        }else{
            element["on" + type] = null;
        }
    }
複製代碼