一次關於js事件出發機制反常的解決記錄

原由：正常狀況下我點擊s2時是先彈出我是children，再彈出我是father，可是卻出現了先彈出我是father，後彈出我是children的狀況，這種狀況是在和安卓app交互的h5頁面中出現的，本地測試沒有問題，可是在安卓打包的內嵌h5頁面就出現了問題。簡單化的代碼先展現出來。

html代碼以下

<div id="father" class="ss1">s1 <div id="children" class="ss2">s2 </div>
</div>

事件綁定以下

$('#father').on('click',function (e) { 　　　alert('我是father') 　}) $('#children').on('click',function (e) { 　　　alert('我是children') 　　　e.stopPropagation(); 　})

 

藉此問題，複習了一下js事件，先看一下幾個定義

先來看事件註冊

// IE之外的其餘瀏覽器 // target ：文檔節點、document、window 或 XMLHttpRequest。  // type ：字符串，事件名稱，不含「on」，好比「click」、「mouseover」、「keydown」等。  // listener ：實現了 EventListener 接口或者是 JavaScript 中的函數。  // useCapture ：是否使用捕捉，通常用 false,事件觸發時，會將一個 Event 對象傳遞給事件處理程序。
 target.addEventListener(type,listener,useCapture);//添加
target.removeEventListener(type,listener,useCapture);//刪除

// IE瀏覽器 // target ：文檔節點、document、window 或 XMLHttpRequest。  // type ：字符串，事件名稱，含「on」，好比「onclick」、「onmouseover」、「onkeydown」等。  // listener ：實現了 EventListener 接口或者是 JavaScript 中的函數。
 target.attachEvent(type, listener);//添加
target.detachEvent(type, listener);// 移除

兼容寫法

兼容後的方法 var func = function(){}; //例：addEvent(window,"load",func) 
function addEvent(elem, type, fn) { if (elem.attachEvent) { elem.attachEvent('on' + type, fn); return; } if (elem.addEventListener) { elem.addEventListener(type, fn, false); } } //例：removeEvent(window,"load",func) 
function removeEvent(elem, type, fn) { if (elem.detachEvent) { elem.detachEvent('on' + type, fn); return; } if (elem.removeEventListener) { elem.removeEventListener(type, fn, false); } }

獲取事件對象和事件源(觸發事件的元素) 

function eventHandler(e){ //獲取事件對象 
    e = e || window.event;//IE和Chrome下是window.event FF下是e 
     //獲取事件源 
     var target = e.target || e.srcElement;//IE和Chrome下是srcElement FF下是target 
 }

事件委託

myTable.onclick = function () { e = e || window.event; var targetNode = e.target || e.srcElement; // 測試若是點擊的是TR就觸發 
    if (targetNode.nodeName.toLowerCase() === 'tr') { alert('You clicked a table row!'); } }

事件函數的解除綁定

和事件的綁定實際上是相對應的，若是須要接觸事件的綁定，運行對應的函數就能夠了。若是是原生JS綁定則對應運行removeEventListener()和detachEvent()。

若是是jQuery的bind()和delegate()綁定，也是存在對應的解綁函數用以清除註冊事件，好比unbind()和undelegate()。

看一個代碼示例：

var EventUtil = { //註冊 
    addHandler: function(element, type, handler){ if (element.addEventListener){ element.addEventListener(type, handler, false); } else if (element.attachEvent){ element.attachEvent("on" + type, handler); } else { element["on" + type] = handler; } }, //移除註冊 
    removeHandler: function(element, type, handler){ if (element.removeEventListener){ element.removeEventListener(type, handler, false); } else if (element.detachEvent){ element.detachEvent("on" + type, handler); } else { element["on" + type] = null; } } };

再來看看事件流

幾個概念

捕獲階段：事件對象經過目標的祖先從傳播窗口到目標的父。這個階段也被稱爲捕獲階段。

目標階段：本次活動對象到達事件對象的事件的目標。這個階段也被稱爲目標階段。若是事件類型指示事件不起泡，則在完成此階段後，事件對象將中止。

 

冒泡階段：事件對象經過目標的祖先中傳播以相反的順序，開始與目標的父和與所述結束窗口。這個階段也被稱爲冒泡階段。

默認行爲：事件一般由實現做爲用戶操做的結果分派，以響應任務的完成，或者在異步活動（例如網絡請求）期間發信號通知進度。有些事件能夠用來控制下一個實現可能採起的行爲（或者撤銷實現已經採起的行動）。這個類別中的事件被認爲是可取消的，他們取消的行爲被稱爲他們的默認行爲。

取消事件：可取消的事件對象能夠與一個或多個「默認動做」相關聯。要取消事件，請調用該preventDefault()方法。

一個圖片

再上個小demo

<ul>
    <li>點我試試</li>
</ul>
<div id="s1" class="ss1">s1 <div id="s2" class="ss2">s2</div>
</div>

var ul = document.getElementsByTagName('ul')[0]; var li = document.getElementsByTagName('li')[0];
element.addEventListener(event, function, useCapture) document.addEventListener('click',function(e){console.log('document clicked')},true);//第三個參數爲true使用捕獲，false爲冒泡,false爲默認
ul.addEventListener('click',function(e){console.log('ul clicked')},true); li.addEventListener('click',function(e){console.log('li clicked')},true); //IE低版本兼容寫法
li.attachEvent('onclick',function(event){ debugger console.log('li clicked'); event.cancelBubble=true; }); s1.addEventListener('click',function () { console.log('s1 捕獲方式') },true) s1.addEventListener('click',function () { console.log('s1 冒泡方式') },false) s2.addEventListener('click',function (e) { console.log('s2 捕獲方式') // e.stopPropagation();
},true) s2.addEventListener('click',function () { console.log('s2 冒泡方式') },false)

點擊li時，打印 依次爲

ul clicked li clicked　　

點擊s1時，打印依次爲

s1 捕獲方式    s1 冒泡方式

點擊s2時，打印依次爲

s1 捕獲方式 s2 捕獲方式 s2 冒泡方式 s1 冒泡方式

處理事件冒泡和默認事件

一、e.preventDefault()

var a = document.getElementById("testA"); a.onclick =function(e){ if(e.preventDefault){ e.preventDefault();//     }else{ window.event.returnValue = false;//IE
　　　　//注意：這個地方是沒法用return false代替的 
　　　　//return false只能取消元素
 } }

二、return false  javascript的return false只會阻止默認行爲，而是用jQuery的話則既阻止默認行爲又防止對象冒泡。

//原生js，只會阻止默認行爲，不會中止冒泡
var a = document.getElementById("testA"); a.onclick = function(){ return false;//固然 也阻止了事件自己
}; //既然return false 和 e.preventDefault()都是同樣的效果，那它們有區別嗎？固然有。 //僅僅是在HTML事件屬性 和 DOM0級事件處理方法中 才能經過返回 return false 的形式組織事件宿主的默認行爲。

1 //jQuery，既阻止默認行爲又中止冒泡
2 $("#testA").on('click',function(){ 3     return false;//固然 也阻止了事件自己
4 });

總結使用方法

當須要中止冒泡行爲時

function stopBubble(e) { //若是提供了事件對象，則這是一個非IE瀏覽器 
    if ( e && e.stopPropagation ){ e.stopPropagation(); //所以它支持W3C的stopPropagation()方法 
    }else{ window.event.cancelBubble = true; //不然，咱們須要使用IE的方式來取消事件冒泡 
 } }

當須要阻止默認事件時

function stopDefault( e ) { if ( e && e.preventDefault ){ e.preventDefault(); //阻止默認瀏覽器動做(W3C) 
    }else { window.event.returnValue = false; //IE中阻止函數器默認動做的方式 
 } return false; }

最後的解決方法：

讓咱們回顧一下最初的問題，可能部分瀏覽器把事件的useCapture默認爲true，致使點擊子元素時父元素的事件先響應了，因而個人辦法是在父元素的事件裏進行判斷

好比容器爲#a，動態插入的元素爲#b，在#a上監聽click事件，判斷event.target.id是否是等於b便可，若是.bclass這種，以此類推。

 

咱們常常能遇到阻止冒泡，可是阻止捕獲通常不會遇到，由於瀏覽器通常默認就給咱們阻止了，只能說什麼狀況都有啊，萬事仍是得考慮周全。