DOM事件探祕之事件流與事件處理程序

時間 2019-11-12

標籤 dom 事件探祕處理程序欄目 HTML 简体版

原文原文鏈接

一、事件流：描述的是從頁面中接受事件的順序

①、事件冒泡流：即時間最開始由最具體的元素（文檔中嵌套層次最深的那個節點）接收，而後逐級向上傳播至最不具體的那個節點（文檔）.
      栗子：若<body><div><input type="button"/></div></body>次結構，點擊按鈕時，默認點了按鈕的容器默認點了body,默認點了html，默認點了document.

②、事件捕獲：不太具體的節點應該更早接收到事件，而最具體的節點最後接收到事件。是網景瀏覽器的處理方式，順序上恰好與IE等瀏覽器支持的事件冒泡順序相反。

二、javascript事件處理程序有三種：

①、html事件處理程序，即，直接在HTML中添加onclick等事件，與js耦合比較多。

②、DOM0級事件處理程序（用得比較多）：先把元素取出來，而後爲其屬性添加一個事件的方法叫DOM0級處理程序。
它是一種較傳統的方式：把一個函數賦值給一個事件處理程序的屬性。
優勢：簡單，跨瀏覽器的優點
var btn2=document.getElementById("btn2");---先獲取出元素，定義對象 //取得btn2按鈕對象
btn2.onclick=function(){alert('這是經過DOM0級添加的事件！')}----讓事件以對象的屬性的形式出現。 //給btn2添加onclick屬性    btn2.onclick=null爲刪除事件

③、DOM2和DOM0級共同優勢：能夠給一個元素上添加多個事件處理程序，會按照順序執行。
DOM2級事件處理程序，ie不支持，ie有專用的事件處理程序。
DOM2級事件處理程序：定義了兩個方法---用於處理指定和刪除事件處理程序的操做。
【addEventListener()---給某元素添加一個事件監聽程序】和【removeEventListener()---刪除一個事件。必須傳入添加事件時相同的參數】
三個參數設置;事件名稱，處理方法(函數)，布爾值--false：表示在冒泡階段調用事件處理程序(能夠最大限度的兼容瀏覽器)，通常設爲false；true表示在捕獲階段調用事件處理程序
（經過前者添加的事件，只能經過後者刪除。如obj.click= null無效）要處理的事件名不用加「on」！函數不用加「（）」

④、1.IE事件處理程序：IE也提供了相似DOM2級事件處理程序
attachEvent()添加事件
detachEvent()刪除事件
接收相同的兩個參數，事件處理程序的名稱（要寫"on"）和事件處理程序的函數。去掉了布爾值，不使用第三個參數的緣由:IE8以及更早的瀏覽器版本只支持事件冒泡！

⑤、跨瀏覽器事件處理程序
   function showMes(){
       alert("hello world!");
   }
   var btn=document.getElementById("btn");
   var eventUtil={
       //添加句柄
       addHandler:function(element,type,handler){
           //先進行DOM2級事件處理程序
           if(element.addEventListener){
               element.addEventListener(type,handler,false);
           }else if(element.attachEvent){
               //再進行IE事件處理程序
               element.attachEvent("on"+type,handler);
           }else{
               //最好進行DOM0級事件處理程序 element["onclick"]===element.onclick
               element["on"+type]=handler;
           }
       }
   }
   eventUtil.addHandler(btn,"click",showMes);

三、事件對象
①什麼是事件對象？在觸發DOM上的事件時都會產生一個對象
事件對象EVENT
DOM中的事件對象屬性
（1）、type屬性用於獲取事件類型
（2）、target屬性用於獲取事件目標
（3）、stopPropagation()方法用於阻止事件冒泡
（4）、preventDefault() 方法阻止事件的默認行爲
若是一個div裏面有一個button，button和div都綁定了click事件，若是是事件冒泡，那麼點擊button的時候，首先觸發button的處理函數，而後觸發div的處理函數。（由內而外）
若是有時候不想冒泡，也就是不但願div的事件被觸發，那麼須要阻止事件冒泡。stopPropagation()方法
若是須要阻止a標籤的默認屬性跳轉，可使用阻止事件的默認行爲preventDefault()方法

javascript

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。