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

2022-06-07 04:36:10 字數 2713 閱讀 8005

如上圖所示

事件冒泡:結構上從內到外

如上圖所示

事件捕獲:結構上從外到內

使用addeventlistener()方法指定事件是否在捕獲或冒泡階段執行

element.addeventlistener(event, function, usecapture)

usecapture

可選。布林值,指定事件是否在捕獲或冒泡階段執行。

可能值:

1

"box

">2"

button

" id="

add" value="

新增" />3"

button

" id="

remove

" value="

刪除" />4"

button

" id="

move

" value="

移動" />5"

button

" id="

select

" value="

選擇" />

列印一下event物件的target屬性

可知e.target為當前觸發事件的dom元素

谷歌瀏覽器預設是事件冒泡

所以點選div下的button按鈕,會冒泡到div上,觸發div的click事件

對標籤名進行判斷

並判斷其id值

執行各自的操作

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

事件冒泡會從當前觸發的事件目標一級一級往上傳遞,依次觸發,直到document為止。事件捕獲會從document開始觸發,一級一級往下傳遞,依次觸發,直到真正事件目標為止。事件委託依靠的就是事件冒泡和事件捕獲的機制。box1 box2 box3 上面是三個具有父子關係的box,分別繫結了列印事件,現...

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冒泡事件和捕獲事件

js中冒泡事件和捕獲事件 冒泡事件 冒泡事件是從裡向外,即是從被繫結元素開始一直向外到達頁面的所有祖先元素都會被觸發,這 一過程被稱為事件冒泡。這個事件從原始元素開始一直冒泡到dom樹的最上層 捕獲事件 捕獲事件是從頁面的最上層到被繫結元素都會觸發。ie只支援事件冒泡,不支援事件捕獲 冒泡事件和捕獲...