天天看點

c事件和委托的差別_什麼是事件,什麼是事件流?标準模式與IE的差別?說說事件委托...一. 什麼是事件模型二. W3C和IE綁定事件

c事件和委托的差別_什麼是事件,什麼是事件流?标準模式與IE的差別?說說事件委托...一. 什麼是事件模型二. W3C和IE綁定事件

一. 什麼是事件模型

1. 事件

事件是使用者對浏覽器的一個動作或者浏覽器自身執行的某種動作,文檔或浏覽器視窗發生特定互動的瞬間。

2. 事件流

事件流:從頁面中接收事件的順序。

IE和Netscape提出了兩種相反的事件流:事件冒泡流、事件捕獲流。

事件冒泡流:由具體的節點逐級往上傳播。

c事件和委托的差別_什麼是事件,什麼是事件流?标準模式與IE的差別?說說事件委托...一. 什麼是事件模型二. W3C和IE綁定事件

如果單擊了div,那麼click事件的傳播為:div -> body -> html -> Document -> windows。

事件捕獲流:由最上層的節點逐級往下傳到具體節點。

如果單擊了div,那麼click事件的傳播為:windows -> Document -> html -> body -> div

windows對象和Document對象的差別:

windows對象:指的是浏覽器的視窗

Document對象:指的是顯示于視窗的一個文檔

Document 對象是 Window 對象的一部分,可通過 window.document 屬性對其進行通路

3. DOM2級事件規定的事件流

W3C為了兼顧之前的标準,将事件發生定義成三個階段:事件捕獲階段、處于目标階段、事件冒泡階段

事件捕獲階段:windows -> Document -> html -> body;

事件捕獲階段,事件到

就停止了;

處于目标階段:事件具體目标

;

事件冒泡階段:body -> html -> Document -> windows;

DOM2級事件明确要求捕獲階段不會涉及到事件目标,但是很多高版本的浏覽器都會在捕獲階段觸發事件對象上的事件。

二. W3C和IE綁定事件

一般綁定事件可以用

obj.onclick = function(){};
           

但如果要給同一個元素綁定多個事件,上面那種方法就行不通了

c事件和委托的差別_什麼是事件,什麼是事件流?标準模式與IE的差別?說說事件委托...一. 什麼是事件模型二. W3C和IE綁定事件

隻會alert("3"),其他的被覆寫了,可以采用下面的綁定事件的方式:

1. W3C

W3C綁定事件

obj.addEventListener(event,function,usecapture)
           

W3C解綁事件

obj.removeEventListener(event,function,usecapture)
           

usecapture可選值有false:事件在冒泡階段執行(預設)true:事件在捕獲階段執行下面是一個冒泡階段和捕獲階段執行事件的例子:

c事件和委托的差別_什麼是事件,什麼是事件流?标準模式與IE的差別?說說事件委托...一. 什麼是事件模型二. W3C和IE綁定事件

如果用addEventListener給同一個對象綁定了多個事件,執行順序如下:

1.按照綁定的順序執行

obj.addEventListener("click