js事件監聽和事件模型

js事件監聽

事件監聽的定義

在Javascript中，瀏覽器通常分爲兩大類：

① 基於IE內核的瀏覽器（版本號小於9的IE瀏覽器）

② 基於W3C內核的瀏覽器（版本號大於9的IE瀏覽器、Firefox、Google等瀏覽器）

基本語法：基於IE內核瀏覽器

dom對象.attachEvent(type，callback，capture) ：爲元素綁定事件監聽程序

參數說明：

type：綁定的事件類型，如onclick、onmouseover、onmouseout

callback：事件的處理程序，一般是一個匿名函數

capture：使用的瀏覽器模型，冒泡模型與捕獲模型，默認IE8如下的瀏覽器只支持冒泡模型！

基本語法：基於W3C內核的事件監聽

dom對象.addEventListener(type，callback) ：爲W3C內核瀏覽器綁定事件監聽

參數說明：

type：綁定事件類型，不帶’on’前綴，如click，mouseover，mouseout

callback：事件的處理程序，一般是一個匿名函數

總結事件監聽的區別

IE內核的監聽方式與W3C內核的監聽方式：

①方式不一樣

IE內核的瀏覽器使用attachEvent進行綁定

W3C內核的瀏覽器使用addEventListener進行綁定

②參數不一樣

IE內核瀏覽器，其綁定方式一共有三個參數type，callback，capture（使用的瀏覽器模型）

W3C內核瀏覽器，其綁定方式一共有二個參數，type和callback

③type參數不一樣

IE內核的瀏覽器，type是須要添加’on’前綴的，如onclick

W3C內核瀏覽器，type是不須要添加’on’前綴的，如click

④觸發順序不一樣

IE內核的瀏覽器，其事件監聽是先綁定後觸發，後綁定的先觸發

W3C內核的瀏覽器，其事件監聽是先綁定先觸發，後綁定的後觸發

js事件模型

事件

用戶與wed交互的瞬間就是事件

事件流

微軟提出
DOM 規定事件包括三個階段，事件捕獲，處於目標階段、事件冒泡。

事件冒泡

就是由具體的元素逐級上傳到較爲不具體的節點,就像魚從水底吐泡泡直到水面

事件捕獲

網景提出 與冒泡相反 由不具體的元素到較爲具體的元素,就像網同樣從水面沉到水底