對於js中事件冒泡的理解分析

一. 事件

事件的三個階段：事件捕獲 -> 事件目標 -> 事件冒泡

事件捕獲：事件發生時首先發生在document上，然後依次傳遞給body，最後到達目的節點（即事件目標)，事件流模型：div →body→ html→ document。

事件冒泡：事件到達事件目標之後不會結束，會逐層向上冒泡，直至document物件，跟事件捕獲相反。

onclick事件冒泡，重寫onlick會覆蓋之前屬性，沒有相容性問題

阻止預設事件：

事件的繫結與事件的解綁

事件的繫結：

**如下：

function addevent(element,etype,handle,bol)else if(element.attachevent)else

}

**如下：

function removeevent(element,etype,handle,bol)else if(element.attachevent)else

}

**如下：

var eventutil = else if(element.addevent)else

},removeevent:function(element,type,handle)else if(element.removeevent)else
}}

1）bind()

2）live()

3）delegate()

事件冒泡、事件捕獲阻止

w3c事件模型中發生的任何事件，先從其祖先元素window開始一路向下捕獲， 直到達到目標元素，其後再次從目標元素開始冒泡。可以決定事件處理器是註冊在捕獲或者是冒泡階段。

注意：如果addeventlistener的最後乙個引數是true, 那麼處理函式將在捕獲階段被觸發; 否則(false), 會在冒泡階段被觸發，預設false。

事件冒泡：當乙個元素接收到事件的時候 會把他接收到的事件傳給自己的父級，一直到window。從事件源，自下而上的過程中，阻止向上冒泡，即阻止觸發上級元素的事件觸發，上級元素做事件觸發時，在此事件源上無效。在事件傳播的過程中，當事件在乙個元素上出發之後，事件會逐級傳播給先輩元素，直到document為止，有的瀏覽器可能到window為止。

事件冒泡的例項

**如下：

div1
div2

說明：兩個父子關係的div1和div2，分別給div1和div2繫結了點選事件。當點選div1的時候，控制台列印輸出 我是div1。當點選div2的時候，控制台列印輸出 我是div2 和 我是div1，在這個時候就說明了當我們子點選div2的時候，div1的事件也被觸發了，父級事件被觸發，這種現象相當於就是冒泡事件。

封裝取消事件冒泡的函式：

**如下：

function stopbubble(env)else

}

**如下：

按鈕

說明：定義乙個按鈕，在按鈕下面有乙個div的元素d1，預設為隱藏。點選按鈕的時候，元素d1顯示。在點選按鈕的時候，呼叫了阻止事件冒泡的發生函式stopbubble()。點選docume網頁其它地方的時候，元素d1隱藏。

跨瀏覽器的事件物件

**如下：

var eventutil=,

gettarget:function(event),
preventdefault:function()else
},stoppropagation:function()else
},addevent:function(element,type,handler)else if(element.attachevent)
element.attachevent("on"+type,element["e"+type]);
}else
},removeevent:function(element,type,handler)else if(element.detachevent)else
}};

js中的事件冒泡

事件冒泡和阻止事件冒泡 事件冒泡的原理 從實際操作的元素 事件 向上級父元素一級一級執行下去，直到達到document window,冒泡過程結束。例如 假設我有乙個 div 盒子，裡面巢狀了1個子元素 p，我要給子元素 p 繫結了onclick事件，如果父元素也繫結了這個相同的事件，當觸發子元素 ...

JS的事件冒泡事件和事件捕獲分析

首先來說一下兩者的定義 1 冒泡型事件 事件按照從最特定的事件目標到最不特定的事件目標 document物件 的順序觸發。ie 5.5 div body document ie 6.0 div body html document mozilla 1.0 div body html document...

JS的冒泡事件

在乙個物件上觸發某類事件 比如單擊onclick事件 如果此物件定義了此事件的處理程式，那麼此事件就會呼叫這個處理程式，如果沒有定義此事件處理程式或者事件返回true，那麼這個事件會向這個物件的父級物件傳播，從裡到外，直至它被處理 父級物件所有同類事件都將被啟用 或者它到達了物件層次的最頂層，即do...