js dom元素事件處理簡單介紹

本章節比較綜合的介紹一下javascript中中dom事件的相關知識，需要的朋友可以做一下參考。

一.事件流:

（1）.事件冒泡:事件最開始由最具體的元素接收，然後逐漸冒泡上升到最外層父元素。

（2）.事件捕獲:最外層的節點更早接收到事件,而最具體的節點最後接收到事件。

二.事件處理程式:

（1）.HTML事件處理程式:

缺點:HTML和JS程式碼緊密的耦合在一起。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<input type="button" value="按鈕" onclick="showMessage()">

（2）.DOM0級事件處理程式:

較傳統的方式:把一個函式賦值給一個事件的處理程式屬性,用的比較多。

優點:簡單/跨瀏覽器。

[HTML] 純文字檢視 複製程式碼
<input type="button" value="按鈕" id="btn2">
<script>
  var btn2 = document.getElementById('btn2'); //取得btn2按鈕物件;
  btn2.onclick = function () { //給btn2新增onclick屬性;
    alert('這是通過DOM0級新增的事件!');
  }
  btn2.onclick=null;//刪除onclick屬性;
</script>

（3）.DOM2級事件處理程式:

DOM2級事件定義了兩個方法:用於處理指定和刪除事件處理程式的操作。

addEventListener()和removeEventListner()。

接收三個引數:要處理的事件名/事件處理函式和布林值。

在IE8以下不起作用。

[HTML] 純文字檢視 複製程式碼
<input type="button" value="按鈕" id="btn3">
<script>
  var btn3 = document.getElementById('btn3');
  btn3.addEventListener('click',showMessage,false);//新增事件程式;
  btn3.addEventListener('click',function(){//新增多個事件程式;
    alert(this.value);
  },false);
  btn3.removeEventListener('click',showMessage,false);//刪除事件程式;
</script>

（4）.IE8和IE8以下事件處理程式及跨瀏覽器:

接收兩個引數:事件處理函式名稱和事件處理函式:

[JavaScript] 純文字檢視 複製程式碼
var btn3 = document.getElementById('btn3');
btn3.attachEvent('onclick',showMessage);//新增事件;
btn3.detachEvent('onclick',showMessage);//刪除事件;

瀏覽器相容:

[JavaScript] 純文字檢視 複製程式碼
//將新增和刪除事件處理程式封裝到物件中並賦值給變數'eventUtil';
var eventUtil = {
  //新增控制程式碼
  addHandler:function(element,type,handler){
    //判斷DOM2級事件處理程式;
    if(element.addEventListener){  
      element.addEventListener(type,handler,false);
    //判斷IE瀏覽器;
    }else if(element.attachEvent){
      element.attachEvent("on"+type,handler);
    //使用DOM0級事件處理程式;
    }else{
      element['on'+type] = handler;
    }
  };
  //刪除控制程式碼
  removeHandler:function(element,type,handler){
    //判斷DOM2級事件處理程式;
    if(element.removeEventListener){  
      element.removeEventListener(type,handler,false);
    //判斷IE瀏覽器;
    }else if(element.detachEvent){
      element.detachEvent("on"+type,handler);
    //使用DOM0級事件處理程式;
    }else{
      element['on'+type] = null;
    };
  };
};
//跨瀏覽器新增事件處理程式;
eventUtil.addHandler(btn3,'click',showMessage);

三.事件物件:

（1）.DOM中的事件物件:

在觸發DOM上的事件時都會產生一個物件==event。

1.type == 獲取事件型別。

2.target == 獲取事件目標。

3.stopPropagation() == 停止事件冒泡。

4.preventDefault() == 阻止事件的預設行為。

[JavaScript] 純文字檢視 複製程式碼
function showMes(event){
  alert(event.type);//onclick;點選事件;
  alert(event.target.nodeName); //INPUT;input按鈕被觸發;
  event.stopPropagation();//停止事件冒泡;
}
<a href="event.html" onclick="stopGoto();">跳轉</a>
function stopGoto(event){
  event.preventDefault();//阻止預設行為;
}

（2）.低版本IE中的事件物件:

1.type == 同上。

2.srcElement屬性 == 獲取事件目標。

3.cancleBubble屬性 == 阻止冒泡;設定true表示阻止冒泡,false為不組織冒泡。

4.returnValue屬性 == 用於阻止事件的預設行為。

[JavaScript] 純文字檢視 複製程式碼
function showMes(event){
  //非IE用event,IE8以下用window.event;
  event = event || window.event;  
  //事件目標相容;
  var ele = event.target || event.srcElement;
  //相容阻止事件冒泡;
  if(event.stopPropagation){
    event.stopPropagation();
  }else{
    event.cancleBubble();
  };
  //相容取消事件預設行為;
  if(event.preventDefault){
    event.preventDefault();
  }else{
    event.returnValue = false;
  }
}