瀏覽器事件機制

2022-08-29 09:27:08 字數 1732 閱讀 7566

事件被觸發三階段

1. document往事件觸發處傳播,會觸發遇到註冊的捕獲事件;

2. 傳播到事件觸發處,觸發註冊事件;

3. 從事件觸發處往document傳播,遇到註冊的冒泡事件,會觸發。

事件觸發機制一般會按上面的順序觸發,但也有特例,如果給乙個目標節點同時註冊冒泡事件和捕獲事件,事件觸發會按註冊的順序執行。

addeventlistener第三個引數false/true分別代表冒泡/捕獲,預設值為false;
var ocontent = document.getelementsbyclassname('content')[0];

var oitem = document.getelementsbyclassname('item')[0];

}, false);

}, true);

ocontent.addeventlistener('click', () => , false);

ocontent.addeventlistener('click', () => , true);

oitem.addeventlistener('click', () => , false);

oitem.addeventlistener('click', () => , true);

如果點選目標節點item,控制台列印

如果我們改變item事件註冊順序

oitem.addeventlistener('click', () => , true);

oitem.addeventlistener('click', () => , false);

再點選item,此時列印

阻止事件冒泡捕獲

1. 如果在content捕獲事件上加上stoppropation,會阻止事件繼續向下傳播。

ocontent.addeventlistener('click', (e) => , true);
控制台列印

2. 但如果在目標事件上加stoppropation函式,自身的捕獲事件和冒泡事件都會觸發

在item捕獲事件上加stoppropation函式

oitem.addeventlistener('click', (e) => , true);

oitem.addeventlistener('click', (e) => , false);

控制台列印

oitem.addeventlistener('click', (e) => , true);

oitem.addeventlistener('click', (e) => , false);

控制台列印

事件**

如果乙個節點中的子節點是動態生成的或者需要註冊同樣的事件過多,那麼子節點需要註冊的事件應該註冊在父節點上、

瀏覽器事件

常用瀏覽器事件與dom事件,包括滑鼠事件 鍵盤事件 框架 物件事件 表單事件 剪貼簿事件 列印事件 拖動事件 多 事件 動畫事件 過渡事件。onbeforeinstallprompt 當使用者即將被提示安裝web應用程式時,該處理程式將在裝置上排程,其相關聯的事件可以儲存以供稍後用於在更適合的時間提...

瀏覽器事件

常用瀏覽器事件與dom事件,包括滑鼠事件 鍵盤事件 框架 物件事件 表單事件 剪貼簿事件 列印事件 拖動事件 多 事件 動畫事件 過渡事件。onbeforeinstallprompt 當使用者即將被提示安裝web應用程式時,該處理程式將在裝置上排程,其相關聯的事件可以儲存以供稍後用於在更適合的時間提...

IE瀏覽器的事件冒泡機制

一 介紹 1 當瀏覽者在頁面上執行了某個動作,頁面上實際上有多個元素可以響應該事件,假如單機頁面的某個按鈕,該按鈕又處於元素之內,則實際上使用者既單機了該按鈕,也單擊了元素。2 ie中的事件傳遞方向是從事件發生的物件開始,然後依次向該物件所在的父節點傳遞。這種傳遞方式是從下向上傳遞的,因此這種事件的...