Js冒泡事件和捕獲事件

2022-09-01 05:42:11 字數 1589 閱讀 7969

js中冒泡事件和捕獲事件:

冒泡事件:冒泡事件是從裡向外,即是從被繫結元素開始一直向外到達頁面的所有祖先元素都會被觸發,這 一過程被稱為事件冒泡。這個事件從原始元素開始一直冒泡到dom樹的最上層

捕獲事件:捕獲事件是從頁面的最上層到被繫結元素都會觸發。

ie只支援事件冒泡,不支援事件捕獲

冒泡事件和捕獲事件的方向是相反的。

形式如下圖所示:

一般為瀏覽器中的元素繫結事件有2種方式:

一、直接在頁面元素中進行繫結,此方式採用的是氣泡排序,如:

二、通過js的方式為元素繫結事件,如:

var eventobj = document.getelementbyid("eventexample");

//ie瀏覽器中使用的是elem.attachevent("onclick",function(){});

eventobj.attachevent("onclick",function

(){});

//在其他瀏覽器中使用elem.addeventlistener("click",function(){},boolean是否使用捕獲方式)

eventobj.addeventlistener("click",function(){},false);

addeventlistener(事件型別,觸發的函式,是否捕獲):如果最後乙個引數為true,則表示採用捕獲事件;如果最後乙個引數是false,則表示採用冒泡事件。

最後一層

在執行上述**的過程中,如果點選「最後一層」,首先會彈出「最後一層」,然後彈出「通過繫結點選了最後一層」,然後彈出「中間層」,最後是「最上層」,

由這個執行順序可以看出,冒泡事件是由內之外執行的,且在執行過程中,直接繫結在元素上的事件比通過js繫結的時間執行的優先順序高。

說到冒泡事件,就會涉及到組織冒泡:

1.event.stoppropagation();

最後一層

2.event.preventdefault(); 阻止元素的預設事件的執行

3.return false;

/**************************附加知識*********************************/

1、event事件:

function showmsg(event)
2、取消事件預設行為的方法:

function preventdefaulthandler(event)else

}

3、阻止冒泡事件

function

stoppropagationhandler(event)

else

}

4.獲取事件源 

function

eventsrc(event)

mytable.onclick = function

()

}

js 事件冒泡和事件捕獲

1 冒泡型事件 事件按照從最特定的事件目標到最不特定的事件目標 document物件 的順序觸發。ie 5.5 div body document ie 6.0 div body html document mozilla 1.0 div body html document window 2 捕獲...

JS事件冒泡 事件捕獲和事件委託

如上圖所示 事件冒泡 結構上從內到外 如上圖所示 事件捕獲 結構上從外到內 使用addeventlistener 方法指定事件是否在捕獲或冒泡階段執行 element.addeventlistener event,function,usecapture usecapture 可選。布林值,指定事件是...

Js事件捕獲和冒泡

昨天有個面試官問我的問題,他直接問我兩個div巢狀,都有click事件,單擊的時候先彈出子div還是父div。完全不知所以然。過後經過查詢資料後,很是慚愧。原來他問的就是關於js捕獲和冒泡的。我查詢了一些資料 事件捕獲 父 子 當你使用事件捕獲時,父級元素先觸發,子級元素後觸發,即div先觸發,p後...