事件流程以及dom2級事件繫結

2022-04-20 14:11:20 字數 990 閱讀 6958

事件流程分為三個階段:捕獲階段、目標階段、冒泡階段。

捕獲階段:事件從最頂層元素開始執行,一層層往下,直到精確元素。

目標階段:事件在精確元素上執行。

冒泡階段:事件從精確元素開始執行,一層層往上,直到頂層元素(注:高階瀏覽器的頂層元素是window,ie8以下的瀏覽器頂層元素是document)

dom2級事件繫結方式

高階瀏覽器繫結方式:

元素.addeventlistener(type, handler, boolean);             //繫結

type 事件型別字串  不帶on

handler 事件處理函式

boolean 布林值  如果值為true 該繫結是繫結到捕獲階段 否則繫結到冒泡階段

元素.removeeventlistener(type, handler, boolean);      //移除繫結

type 事件型別字串  不帶on

handler 事件處理函式

boolean 布林值  如果值為true 是移除捕獲階段 否則移除冒泡階段

ie8以下瀏覽器繫結方式(不支援addeventlistener )

元素.attachevent(type, handler)           //繫結

type 事件型別字串  帶on

handler 事件處理函式

元素.detachevent(type, handler)        //移除繫結

type 事件型別字串  帶on

handler 事件處理函式

(注:ie8以下瀏覽器繫結方式沒有第三個引數,表示不能繫結到捕獲階段)

dom2級事件可以重複繫結,在高階瀏覽器中的執行順序是從上至下。在ie8以下瀏覽器中是倒敘執行,但是當attachevent和dom0級一起執行時,會先執行0級,然後再倒敘執行。

事件繫結 DOM0級事件繫結和DOM2級事件繫結

box.onclick function 元素.事件行為 函式 box.onclick function 相當於給乙個元素的屬性賦值,只能賦乙個值,後面如果再賦值就會覆蓋前面的值,所以說dom0級事件只可以繫結一次,如果繫結多次,後面的會把前面的給覆蓋了,因為是乙個賦值的過程,乙個屬性只能賦乙個值 ...

關於DOM2級事件的事件捕獲和事件冒泡

dom2級事件中addeventlistener的執行機制,多個addeventlistener同時新增時的執行先後規律 w3c的dom事件觸發分為三個階段 事件捕獲階段,即由最頂層元素 一般是從window元素開始,有的瀏覽器是從document開始,至於其中的差別我稍後會更新 開始,逐次進入do...

DOM2級事件處理程式詳解以及相容性寫法

doctype html en utf 8 document1 title a.b style head a b div div var a document.getelementsbytagname div 0 var b document.getelementsbytagname div 1 這...