DOM 事件的深入淺出(二)

2022-10-06 20:36:20 字數 3053 閱讀 6327

在dom事件的深入淺出(一)中,我主要給大家講解了不同dom級別下的事件處理程式,同時介紹了事件冒泡和捕獲的觸發原理和方法。本文將繼續介紹dom事件中的知識點,主要側重於dom事件中event物件的屬性和方法。

那麼什麼是dom事件中event物件呢?事件物件(event object)指的是與特定事件相關且包含該事件詳細資訊的物件。我們可以通過傳遞給事件處理程式的引數獲取事件觸發後所產生的一系列方法和屬性。

event物件

event物件其實是乙個事件處理程式的引數,當呼叫事件時,我們只需要將其傳入事件函式就可以獲取。**如下:

function getevent(event)

上面的事件函式傳入了乙個名叫event的引數作為事件物件,同時做了瀏覽器相容處理。在ie8及以前本版之中,通過設定屬性註冊事件處理程式時,呼叫的時候並未傳遞事件物件,需要通過全域性物件window.event來獲取。所以上述**中我們利用 || 來做判斷,如果event物件存在則使用event,不存在則使用window.event。

event物件包含了幾個方法和多個屬性,通過這些方法和屬性我們可以獲取事件的詳細資訊並進行相關處理。

event物件方法

event物件主要有以下兩個方法,用於處理事件的傳播(冒泡、捕獲)和事件的取消。

1.stoppropagation

stoppropagation方法主要用於阻止事件的進一步傳播,比如阻止事件繼續向上層冒泡。

function getevent(event)

child.addeventlistener('click', getevent, false);

如果你需要相容ie8及以下版本瀏覽器,則需要利用cancelbubble來代替stoppropagation,因為低版本ie不支援stoppropagation方法。

function getevent(event) else

}cancelbubble是ie事件物件的乙個屬性程式設計客棧,設定這個屬性為true能阻止事件進一步傳播。

2.preventdefault

preventdefault方法用於取消事件的預設操作,比如a鏈結的跳轉行為和表單自動提交行為就可以用preventdefault方法來取消。**如下:

禁止跳轉

var go = document.getelementbyid('go');

function gofn(event)

go.addeventlistener('click', gofn, false);

通過preventdefault,我們成功阻止了a鏈結的跳轉行為。不過,在ie9之前的瀏覽器中需要設定returnvalue屬性為false來實現。如下:

function gofn(event) else

console.log('我沒有跳轉!');

}除了以上event物件的兩個主要方法,當前dom事件規範草案在event物件上還定義了另乙個方法,命名為stopimmediatepropagation。

3.stopimmediatepropagation

和stoppropagation相比,stopimmediatepropagation同樣可以阻止事件的傳播,不同點在於其還可以把這個元素繫結的同型別事件也阻止了。如:

var go = document.getelementbyid('go');

function gofn(event)

functio gofn2(event)

go.addeventlistener('click', gofn, false);

go.addeventlistener('click', gofn2, false);

我們在a鏈結上繼續加了乙個點選事件,如果我們在gofn方法中新增了stopimmediatepropagation方法,那麼gofn2方法將不會被執行,同時也不會將點選事件coskhvf冒泡至上層。

需要注意的是,stopimmediatepropagation目前一部分瀏覽器尚不支援,但是像jquery這樣的庫封裝了跨平台的stopimmediatepropagation方法。

event物件屬性

與event物件的方法相比,因event物件的屬性相對較多,文字無法一一講解,所以主要介紹實際專案中常用的event物件屬性。

1.type屬性

通過type我們可以獲取事件發生的型別,比如點選事件我們獲取的是'click'字串。

var go = document.getelementbyid('go');

function gofn(event)

go.addeventlistener('click', gofn, false);

2.target屬性

target屬性主要用於獲取事件的目標物件,比如我們點選a標籤獲取的是a標籤的html物件。

var go = document.getelementbyid('go');

function gofn(event)

go.addeventlistener('click', gofn, false);

在ie8及之前版本,我們需要使用srcelement而非target。相容方案如下:

function gofn(event)

3. 滑鼠事件屬性

在用滑鼠觸發事件時,主要的事件屬性包含滑鼠的位置和按鍵的狀態,比如:clientx和clienty指定了滑鼠在視窗座標中的位置,button和which指定了按下的滑鼠鍵是哪個。

function movefn(event)

function clickfn(event)

document.addeventlistener('mouseover', movefn, false);

document.addeventlistener('click', clickfn, false);

4.鍵盤事件屬性

在用鍵盤觸發事件時,主要的事件屬性包含鍵盤的按鍵keycode和是否按下特殊鍵,比如:keycode指定了按下鍵的鍵碼值,ctrlkey指定是否按下了ctrl鍵。

function keyfn(event)

document.addeventlistener('keyup', keyfn, false);

深入淺出redis事件框架

eventloop typedef struct aeeventloop aeeventloop 註冊的檔案事件 typedef struct aefileevent aefileevent 發生的檔案事件 typedef struct aefiredevent aefiredevent 時間事件 ...

深入淺出Spring(二)

ioc概念 控制反轉 inversion of control 是乙個重要的物件導向程式設計的法則來削減電腦程式的耦合問題。它還有乙個名字叫做依賴注入 dependency injection ioc 不是什麼技術,它是一種設計模式。例項演示 為了更好的說明 ioc,我為大家舉乙個簡單的例子,如有這...

深入淺出MySQL筆記(二)

本筆記為學習該書所記,便於複習。包含第三 四章筆記。資料型別與運算子 toc 整數型別 zerofill unsigned auto increment 浮點數型別 定點數型別 decimal m,d show warningsl 位型別bit m hex data datatime timesta...