事件監聽

事件監聽

一、爲何須要事件監聽

問題：咱們可不能夠爲同一對象的同一事件綁定多個事件處理程序呢？

答：不能夠，由於後面的綁定會覆蓋前面的綁定。若是在實際項目開發中，想爲同一對象的同一事件綁定多個事件處理程序，可使用事件監聽。

二、事件監聽的定義方式

因爲Javascript是基於客戶端瀏覽器的腳本語言，因此必須運行於不一樣的瀏覽器端，因爲不一樣的瀏覽器具備不一樣的標準，因此其也可能會具備兼容性問題，可是在實際項目應用中，咱們會把瀏覽器分爲兩大類：

① 基於IE內核的瀏覽器（IE8如下版本IE的瀏覽器、各類瀏覽器的兼容模式）

② 基於W3C內核的瀏覽器（火狐、谷歌、IE8以上版本的IE瀏覽器）

因此Javascript的事件監聽在不一樣內核瀏覽器下也有不一樣的建立方式：

1）IE內核建立方式：

dom對象.attachEvent(type,callback);

參數說明：

type：事件類型，帶'on'前綴，如onclick/onmouseover/onmouseout

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

2）W3C內核建立方式：

dom對象.addEventListener(type,callback,capture);

參數說明：

type：事件類型，不帶'on'前綴，如click/mouseover/mouseout

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

capture（瞭解）：使用的瀏覽器模型，冒泡模型與捕獲模型，還要特別注意：在IE內核瀏覽器中其只支持冒泡模型。

IE內核瀏覽器與W3C內核瀏覽器總結：

① 二者的綁定形式不一樣

IE：attachEvent

W3C：addEventListener

② 二者的參數不一樣

addEventListener具備第三個參數，表明瀏覽器模型

③ type的參數不一樣

IE：必須添加一個'on'前綴

W3C：沒有'on'前綴

④ 執行順序不一樣

IE：先綁定後觸發

W3C：先綁定先觸發

三、解決事件監聽的兼容性問題

① 建立一個public.js文件做爲Javascript核心庫

② 定義一個$函數，用於獲取指定id的dom對象

③ 建立一個公用函數，用於解決事件監聽的兼容性問題

解決事件監聽的兼容性問題核心：判斷瀏覽器的類型，如何判斷瀏覽器類型？

咱們在事件綁定時使用的attachEvent與addEventListener都是以屬性的形式進行綁定的，因此咱們能夠判斷當前對象是否具備attachEvent或addEventListener屬性。

④ 測試addEvent函數是否生效

四、移除事件監聽

有些狀況下，咱們可能須要動態移除事件監聽，這個時候可使用如下方法：

1）基於IE內核的瀏覽器

添加：attachEvent(type,callback);

移除：detachEvent(type,callback);

參數說明：

type：要移除的事件類型(帶'on'前綴)

callback：要移除的事件處理程序（必須是一個有名函數）

2）基於W3C內核的瀏覽器

添加：addEventListener(type,callback);

移除：removeEventListener(type,callback);

參數說明：

type：要移除的事件類型（不帶'on'前綴）

callback：要移除的事件處理程序（必須是一個有名函數）

 

特別說明：記住若是一個事件想移除，其在添加事件監聽時，其事件處理程序必須是一個有名函數，不然是沒法移除的。

五、解決移除事件監聽的兼容性問題

① 建立一個public.js公用文件做爲Javascript代碼庫

② 在public.js文件中定義一個公用函數，用於解決移除事件監聽的兼容性問題

③ 測試removeEvent方法是否可用