DOM 事件深入淺出(二)

DOM事件

DOM事件深入淺出(一)中斩熊,我主要給大家講解了不同DOM級別下的事件處理程序往枣,同時介紹了事件冒泡和捕獲的觸發(fā)原理和方法。本文將繼續(xù)介紹DOM事件中的知識點粉渠,主要側(cè)重于DOM事件中Event對象的屬性和方法分冈。

那么什么是DOM事件中Event對象呢?事件對象(event object)指的是與特定事件相關(guān)且包含該事件詳細(xì)信息的對象霸株。我們可以通過傳遞給事件處理程序的參數(shù)獲取事件觸發(fā)后所產(chǎn)生的一系列方法和屬性雕沉。

Event對象

Event對象其實是一個事件處理程序的參數(shù),當(dāng)調(diào)用事件時去件,我們只需要將其傳入事件函數(shù)就可以獲取坡椒。代碼如下:

function getEvent(event) {
    event = event || window.event;
}

上面的事件函數(shù)傳入了一個名叫Event的參數(shù)作為事件對象,同時做了瀏覽器兼容處理尤溜。在IE8及以前本版之中倔叼,通過設(shè)置屬性注冊事件處理程序時,調(diào)用的時候并未傳遞事件對象宫莱,需要通過全局對象window.event來獲取丈攒。所以上述代碼中我們利用 || 來做判斷,如果event對象存在則使用event,不存在則使用window.event巡验。

Event對象包含了幾個方法和多個屬性际插,通過這些方法和屬性我們可以獲取事件的詳細(xì)信息并進(jìn)行相關(guān)處理。

Event對象方法

Event對象主要有以下兩個方法显设,用于處理事件的傳播(冒泡框弛、捕獲)和事件的取消。

1.stopPropagation

stopPropagation方法主要用于阻止事件的進(jìn)一步傳播敷硅,比如阻止事件繼續(xù)向上層冒泡功咒。

function getEvent(event) {
    event.stopPropagation();
}

child.addEventListener('click', getEvent, false);

如果你需要兼容IE8及以下版本瀏覽器愉阎,則需要利用cancelBubble來代替stopPropagation绞蹦,因為低版本IE不支持stopPropagation方法。

function getEvent(event) {
    event = event || window.event;
        
    if (event.stopPropagation) {
        event.stopPropagation();
    } else {
        event.cancelBubble = true;
    }
}

cancelBubble是IE事件對象的一個屬性榜旦,設(shè)置這個屬性為true能阻止事件進(jìn)一步傳播幽七。

2.preventDefault

preventDefault方法用于取消事件的默認(rèn)操作,比如a鏈接的跳轉(zhuǎn)行為和表單自動提交行為就可以用preventDefault方法來取消溅呢。代碼如下:

<a id="go" >禁止跳轉(zhuǎn)</a>
var go = document.getElementById('go');

function goFn(event) {
    event.preventDefault();

    console.log('我沒有跳轉(zhuǎn)澡屡!');
}

go.addEventListener('click', goFn, false);

通過preventDefault,我們成功阻止了a鏈接的跳轉(zhuǎn)行為咐旧。不過驶鹉,在IE9之前的瀏覽器中需要設(shè)置returnValue屬性為false來實現(xiàn)。如下:

function goFn(event) {
    event = event || window.event;
    
    if (event.preventDefault) {
        event.preventDefault();
    } else {
        event.returnValue = false;
    }
    
    console.log('我沒有跳轉(zhuǎn)铣墨!');
}

除了以上Event對象的兩個主要方法室埋,當(dāng)前DOM事件規(guī)范草案在Event對象上還定義了另一個方法,命名為stopImmediatePropagation伊约。

3.stopImmediatePropagation

和stopPropagation相比姚淆,stopImmediatePropagation同樣可以阻止事件的傳播,不同點在于其還可以把這個元素綁定的同類型事件也阻止了屡律。如:

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

function goFn(event) {
    event.preventDefault();
    event.stopImmediatePropagation(); // 阻止事件冒泡并阻止同類型事件
    
    console.log('我沒有跳轉(zhuǎn)腌逢!');
}

function goFn2(event) {
    console.log('我是同類型事件!');
}

go.addEventListener('click', goFn, false);
go.addEventListener('click', goFn2, false);

我們在a鏈接上繼續(xù)加了一個點擊事件超埋,如果我們在goFn方法中添加了stopImmediatePropagation方法搏讶,那么goFn2方法將不會被執(zhí)行,同時也不會將點擊事件冒泡至上層霍殴。

需要注意的是媒惕,stopImmediatePropagation目前一部分瀏覽器尚不支持,但是像jQuery這樣的庫封裝了跨平臺的stopImmediatePropagation方法繁成。

Event對象屬性

與Event對象的方法相比吓笙,因Event對象的屬性相對較多,文本無法一一講解巾腕,所以主要介紹實際項目中常用的Event對象屬性面睛。

1.type屬性

通過type我們可以獲取事件發(fā)生的類型絮蒿,比如點擊事件我們獲取的是'click'字符串。

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

function goFn(event) {
    console.log(event.type); // 輸出'click'
}

go.addEventListener('click', goFn, false);

2.target屬性

target屬性主要用于獲取事件的目標(biāo)對象叁鉴,比如我們點擊a標(biāo)簽獲取的是a標(biāo)簽的html對象土涝。

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

function goFn(event) {
    var target = event.target;
    
    console.log(target === go) // 返回true
}

go.addEventListener('click', goFn, false);

在IE8及之前版本,我們需要使用srcElement而非target幌墓。兼容方案如下:

function goFn(event) {
    var event = event || window.event,    
        target = event.target || event.srcElement;
    
    console.log(target === go) // 返回true
}

3. 鼠標(biāo)事件屬性

在用鼠標(biāo)觸發(fā)事件時但壮,主要的事件屬性包含鼠標(biāo)的位置和按鍵的狀態(tài),比如:clientX和clientY指定了鼠標(biāo)在窗口坐標(biāo)中的位置常侣,button和which指定了按下的鼠標(biāo)鍵是哪個蜡饵。

function moveFn(event) {
    console.log(event.screenX) // 獲取鼠標(biāo)基于屏幕的X軸坐標(biāo)
    console.log(event.screenY) // 獲取鼠標(biāo)基于屏幕的Y軸坐標(biāo)
    console.log(event.clientX) // 獲取鼠標(biāo)基于瀏覽器窗口的X軸坐標(biāo)
    console.log(event.clientY) // 獲取鼠標(biāo)基于瀏覽器窗口的Y軸坐標(biāo)
    console.log(event.pageX) // 獲取鼠標(biāo)基于文檔的X軸坐標(biāo)
    console.log(event.pageY) // 獲取鼠標(biāo)基于文檔的Y軸坐標(biāo)
}

function clickFn(event) {
    console.log(event.button) // 獲取鼠標(biāo)按下的鍵。非IE瀏覽器中0為鼠標(biāo)左鍵胳施,1為鼠標(biāo)中鍵溯祸,2為鼠標(biāo)右鍵
    console.log(event.which) // 獲取指定事件上哪個鍵盤鍵或鼠標(biāo)按鈕被按下
}

document.addEventListener('mouseover', moveFn, false);
document.addEventListener('click', clickFn, false);

4.鍵盤事件屬性

在用鍵盤觸發(fā)事件時,主要的事件屬性包含鍵盤的按鍵keyCode和是否按下特殊鍵舞肆,比如:keyCode指定了按下鍵的鍵碼值焦辅,ctrlKey指定是否按下了ctrl鍵。

function keyFn(event) {
    console.log(event.keyCode); // 獲取按下鍵的鍵碼值
    console.log(event.ctrlKey); // 獲取是否按下了ctrl鍵
    console.log(event.shiftKey); // 獲取是否按下了shift鍵
    console.log(event.altKey); // 獲取是否按下了alt鍵
    console.log(event.metaKey); // 獲取是否按下了meta鍵
}

document.addEventListener('keyup', keyFn, false);

類似的事件屬性還有表單事件屬性和window事件屬性等椿胯,這里不再做詳細(xì)介紹筷登。有興趣的同學(xué)可以查閱相關(guān)資料。

總結(jié)

本文主要講解了DOM事件中Event對象的常用屬性和方法哩盲,同時也介紹了其在IE中的兼容性問題及解決方案前方。然而關(guān)于DOM事件的知識點遠(yuǎn)不止這些,希望僅此能夠幫助初識DOM的開發(fā)者种冬。

備注:文本參考自《Javascript權(quán)威指南》一書及慕課網(wǎng)教程《DOM事件揭秘》镣丑。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市娱两,隨后出現(xiàn)的幾起案子莺匠,更是在濱河造成了極大的恐慌,老刑警劉巖十兢,帶你破解...
    沈念sama閱讀 222,807評論 6 518
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件趣竣,死亡現(xiàn)場離奇詭異,居然都是意外死亡旱物,警方通過查閱死者的電腦和手機(jī)遥缕,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,284評論 3 399
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來宵呛,“玉大人单匣,你說我怎么就攤上這事。” “怎么了户秤?”我有些...
    開封第一講書人閱讀 169,589評論 0 363
  • 文/不壞的土叔 我叫張陵码秉,是天一觀的道長。 經(jīng)常有香客問我鸡号,道長转砖,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 60,188評論 1 300
  • 正文 為了忘掉前任鲸伴,我火速辦了婚禮府蔗,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘汞窗。我一直安慰自己姓赤,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 69,185評論 6 398
  • 文/花漫 我一把揭開白布杉辙。 她就那樣靜靜地躺著模捂,像睡著了一般。 火紅的嫁衣襯著肌膚如雪蜘矢。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,785評論 1 314
  • 那天综看,我揣著相機(jī)與錄音品腹,去河邊找鬼。 笑死红碑,一個胖子當(dāng)著我的面吹牛舞吭,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播析珊,決...
    沈念sama閱讀 41,220評論 3 423
  • 文/蒼蘭香墨 我猛地睜開眼羡鸥,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了忠寻?” 一聲冷哼從身側(cè)響起惧浴,我...
    開封第一講書人閱讀 40,167評論 0 277
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎奕剃,沒想到半個月后衷旅,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,698評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡纵朋,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,767評論 3 343
  • 正文 我和宋清朗相戀三年柿顶,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片操软。...
    茶點故事閱讀 40,912評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡嘁锯,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情家乘,我是刑警寧澤品山,帶...
    沈念sama閱讀 36,572評論 5 351
  • 正文 年R本政府宣布,位于F島的核電站烤低,受9級特大地震影響肘交,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜扑馁,卻給世界環(huán)境...
    茶點故事閱讀 42,254評論 3 336
  • 文/蒙蒙 一涯呻、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧腻要,春花似錦复罐、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,746評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至趟济,卻和暖如春乱投,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背顷编。 一陣腳步聲響...
    開封第一講書人閱讀 33,859評論 1 274
  • 我被黑心中介騙來泰國打工戚炫, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人媳纬。 一個月前我還...
    沈念sama閱讀 49,359評論 3 379
  • 正文 我出身青樓双肤,卻偏偏與公主長得像,于是被迫代替她去往敵國和親钮惠。 傳聞我的和親對象是個殘疾皇子茅糜,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,922評論 2 361

推薦閱讀更多精彩內(nèi)容

  • JavaScript 程序采用了異步事件驅(qū)動編程模型。在這種程序設(shè)計風(fēng)格下素挽,當(dāng)文檔蔑赘、瀏覽器、元素或與之相關(guān)的對象發(fā)...
    劼哥stone閱讀 1,259評論 3 11
  • 以下文章為轉(zhuǎn)載毁菱,對理解JavaScript中的事件處理機(jī)制很有幫助米死,淺顯易懂,特分享于此贮庞。 什么是事件峦筒? 事件(E...
    jxyjxy閱讀 3,043評論 1 10
  • 事件是一種異步編程的實現(xiàn)方式,本質(zhì)上是程序各個組成部分之間的通信窗慎。DOM支持大量的事件物喷,本節(jié)介紹DOM的事件編程卤材。...
    周花花啊閱讀 593評論 0 3
  • 總結(jié): 鼠標(biāo)事件 1.click與dbclick事件$ele.click()$ele.click(handler(...
    阿r阿r閱讀 1,616評論 2 10
  • 小時候 總是喜歡抬頭仰望天空 藍(lán)藍(lán)的天,白白的云 廣闊的天空峦失,無限的遐想 后來 總認(rèn)定海是藍(lán)色的 縱使心里有萬千煩...
    長小毛的隨行記錄閱讀 307評論 0 0