摘要:在事件深入淺出一中,我主要給大家講解了不同級(jí)別下的事件處理程序,同時(shí)介紹了事件冒泡和捕獲的觸發(fā)原理和方法。方法主要用于阻止事件的進(jìn)一步傳播,比如阻止事件繼續(xù)向上層冒泡。備注文本參考自權(quán)威指南一書(shū)及慕課網(wǎng)教程事件揭秘。
在DOM事件深入淺出(一)中,我主要給大家講解了不同DOM級(jí)別下的事件處理程序,同時(shí)介紹了事件冒泡和捕獲的觸發(fā)原理和方法。本文將繼續(xù)介紹DOM事件中的知識(shí)點(diǎn),主要側(cè)重于DOM事件中Event對(duì)象的屬性和方法。
那么什么是DOM事件中Event對(duì)象呢?事件對(duì)象(event object)指的是與特定事件相關(guān)且包含該事件詳細(xì)信息的對(duì)象。我們可以通過(guò)傳遞給事件處理程序的參數(shù)獲取事件觸發(fā)后所產(chǎn)生的一系列方法和屬性。
Event對(duì)象Event對(duì)象其實(shí)是一個(gè)事件處理程序的參數(shù),當(dāng)調(diào)用事件時(shí),我們只需要將其傳入事件函數(shù)就可以獲取。代碼如下:
function getEvent(event) { event = event || window.event; }
上面的事件函數(shù)傳入了一個(gè)名叫Event的參數(shù)作為事件對(duì)象,同時(shí)做了瀏覽器兼容處理。在IE8及以前本版之中,通過(guò)設(shè)置屬性注冊(cè)事件處理程序時(shí),調(diào)用的時(shí)候并未傳遞事件對(duì)象,需要通過(guò)全局對(duì)象window.event來(lái)獲取。所以上述代碼中我們利用 || 來(lái)做判斷,如果event對(duì)象存在則使用event,不存在則使用window.event。
Event對(duì)象包含了幾個(gè)方法和多個(gè)屬性,通過(guò)這些方法和屬性我們可以獲取事件的詳細(xì)信息并進(jìn)行相關(guān)處理。
Event對(duì)象方法Event對(duì)象主要有以下兩個(gè)方法,用于處理事件的傳播(冒泡、捕獲)和事件的取消。
1.stopPropagationstopPropagation方法主要用于阻止事件的進(jìn)一步傳播,比如阻止事件繼續(xù)向上層冒泡。
function getEvent(event) { event.stopPropagation(); } child.addEventListener("click", getEvent, false);
如果你需要兼容IE8及以下版本瀏覽器,則需要利用cancelBubble來(lái)代替stopPropagation,因?yàn)榈桶姹綢E不支持stopPropagation方法。
function getEvent(event) { event = event || window.event; if (event.stopPropagation) { event.stopPropagation(); } else { event.cancelBubble = true; } }
cancelBubble是IE事件對(duì)象的一個(gè)屬性,設(shè)置這個(gè)屬性為true能阻止事件進(jìn)一步傳播。
2.preventDefaultpreventDefault方法用于取消事件的默認(rèn)操作,比如a鏈接的跳轉(zhuǎn)行為和表單自動(dòng)提交行為就可以用preventDefault方法來(lái)取消。代碼如下:
禁止跳轉(zhuǎn)
var go = document.getElementById("go"); function goFn(event) { event.preventDefault(); console.log("我沒(méi)有跳轉(zhuǎn)!"); } go.addEventListener("click", goFn, false);
通過(guò)preventDefault,我們成功阻止了a鏈接的跳轉(zhuǎn)行為。不過(guò),在IE9之前的瀏覽器中需要設(shè)置returnValue屬性為false來(lái)實(shí)現(xiàn)。如下:
function goFn(event) { event = event || window.event; if (event.preventDefault) { event.preventDefault(); } else { event.returnValue = false; } console.log("我沒(méi)有跳轉(zhuǎn)!"); }
除了以上Event對(duì)象的兩個(gè)主要方法,當(dāng)前DOM事件規(guī)范草案在Event對(duì)象上還定義了另一個(gè)方法,命名為stopImmediatePropagation。
3.stopImmediatePropagation和stopPropagation相比,stopImmediatePropagation同樣可以阻止事件的傳播,不同點(diǎn)在于其還可以把這個(gè)元素綁定的同類型事件也阻止了。如:
var go = document.getElementById("go"); function goFn(event) { event.preventDefault(); event.stopImmediatePropagation(); // 阻止事件冒泡并阻止同類型事件 console.log("我沒(méi)有跳轉(zhuǎn)!"); } function goFn2(event) { console.log("我是同類型事件!"); } go.addEventListener("click", goFn, false); go.addEventListener("click", goFn2, false);
我們?cè)赼鏈接上繼續(xù)加了一個(gè)點(diǎn)擊事件,如果我們?cè)趃oFn方法中添加了stopImmediatePropagation方法,那么goFn2方法將不會(huì)被執(zhí)行,同時(shí)也不會(huì)將點(diǎn)擊事件冒泡至上層。
需要注意的是,stopImmediatePropagation目前一部分瀏覽器尚不支持,但是像jQuery這樣的庫(kù)封裝了跨平臺(tái)的stopImmediatePropagation方法。
Event對(duì)象屬性與Event對(duì)象的方法相比,因Event對(duì)象的屬性相對(duì)較多,文本無(wú)法一一講解,所以主要介紹實(shí)際項(xiàng)目中常用的Event對(duì)象屬性。
1.type屬性通過(guò)type我們可以獲取事件發(fā)生的類型,比如點(diǎn)擊事件我們獲取的是"click"字符串。
var go = document.getElementById("go"); function goFn(event) { console.log(event.type); // 輸出"click" } go.addEventListener("click", goFn, false);2.target屬性
target屬性主要用于獲取事件的目標(biāo)對(duì)象,比如我們點(diǎn)擊a標(biāo)簽獲取的是a標(biāo)簽的html對(duì)象。
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ā)事件時(shí),主要的事件屬性包含鼠標(biāo)的位置和按鍵的狀態(tài),比如:clientX和clientY指定了鼠標(biāo)在窗口坐標(biāo)中的位置,button和which指定了按下的鼠標(biāo)鍵是哪個(gè)。
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) // 獲取指定事件上哪個(gè)鍵盤鍵或鼠標(biāo)按鈕被按下 } document.addEventListener("mouseover", moveFn, false); document.addEventListener("click", clickFn, false);4.鍵盤事件屬性
在用鍵盤觸發(fā)事件時(shí),主要的事件屬性包含鍵盤的按鍵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對(duì)象的常用屬性和方法,同時(shí)也介紹了其在IE中的兼容性問(wèn)題及解決方案。然而關(guān)于DOM事件的知識(shí)點(diǎn)遠(yuǎn)不止這些,希望僅此能夠幫助初識(shí)DOM的開(kāi)發(fā)者。
備注:文本參考自《Javascript權(quán)威指南》一書(shū)及慕課網(wǎng)教程《DOM事件揭秘》。
本文為勞卜原創(chuàng)文章,首發(fā)于微信公眾號(hào):前端呼啦圈(Love-FED)
轉(zhuǎn)載請(qǐng)注明來(lái)自——微信公眾號(hào):前端呼啦圈(Love-FED)
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/80666.html
摘要:深入理解事件機(jī)制一事件流事件就是當(dāng)用戶或者瀏覽器自身執(zhí)行的某種動(dòng)作,諸如等都是事件的名稱,那響應(yīng)個(gè)事件的函數(shù)就稱為事件處理程序事件處理函數(shù)事件句柄。 深入理解js Dom事件機(jī)制(一)——事件流 事件就是當(dāng)用戶或者瀏覽器自身執(zhí)行的某種動(dòng)作,諸如 click、mouseover等都是事件的名稱,那響應(yīng)個(gè)事件的函數(shù)就稱為事件處理程序(事件處理函數(shù)、事件句柄)。 事件處理程序的名字都是以on...
摘要:深入理解事件機(jī)制一事件流事件就是當(dāng)用戶或者瀏覽器自身執(zhí)行的某種動(dòng)作,諸如等都是事件的名稱,那響應(yīng)個(gè)事件的函數(shù)就稱為事件處理程序事件處理函數(shù)事件句柄。 深入理解js Dom事件機(jī)制(一)——事件流 事件就是當(dāng)用戶或者瀏覽器自身執(zhí)行的某種動(dòng)作,諸如 click、mouseover等都是事件的名稱,那響應(yīng)個(gè)事件的函數(shù)就稱為事件處理程序(事件處理函數(shù)、事件句柄)。 事件處理程序的名字都是以on...
摘要:本文就將帶大家深入淺出地了解事件的那些屬性和方法。針對(duì)不同級(jí)別的,我們的事件處理方式也是不一樣的。當(dāng)然其優(yōu)點(diǎn)是不需要操作來(lái)完成事件的綁定。文章地址事件深入淺出二。 在項(xiàng)目開(kāi)發(fā)時(shí),我們時(shí)常需要考慮用戶在使用產(chǎn)品時(shí)產(chǎn)生的各種各樣的交互事件,比如鼠標(biāo)點(diǎn)擊事件、敲擊鍵盤事件等。這樣的事件行為都是前端DOM事件的組成部分,不同的DOM事件會(huì)有不同的觸發(fā)條件和觸發(fā)效果。本文就將帶大家深入淺出地了解...
摘要:用于規(guī)范的類型與必需的狀態(tài)。表示由組件更改的數(shù)據(jù),通常是通過(guò)與用戶的交互來(lái)更改的。為了實(shí)現(xiàn)的修改,需要注冊(cè)事件處理程序到相應(yīng)的元素上。當(dāng)事件發(fā)生時(shí),將更新后的值是從中檢索,并通知組件。通常情況下,該函數(shù)初始化狀態(tài)使用,,或其他數(shù)據(jù)存儲(chǔ)。 前言 上一篇文章中,我們講到了JSX的一些用法和注意事項(xiàng),這次我們來(lái)講react中最基礎(chǔ)也是特別重要的內(nèi)容:組件。這篇文章包含組件的以下內(nèi)容:狀態(tài)、屬...
摘要:前言接下來(lái)讓我們進(jìn)入新的章節(jié)漫談。正文一事件系統(tǒng)的事件系統(tǒng)事件系統(tǒng)符合標(biāo)準(zhǔn),不存在任何兼容性問(wèn)題,并且與原生的瀏覽器事件一樣有同樣的接口。所有的事件都自動(dòng)綁定到最外層。組織事件冒泡的行為只適用于合成系統(tǒng)中,且沒(méi)辦法阻止原生事件冒泡。 前言 接下來(lái)讓我們進(jìn)入新的章節(jié):漫談React。本篇文章主要講React事件系統(tǒng)和表單操作。 正文 一:事件系統(tǒng) 1.react的事件系統(tǒng)react事件系...
閱讀 1438·2023-04-25 16:31
閱讀 2040·2021-11-24 10:33
閱讀 2745·2021-09-23 11:33
閱讀 2528·2021-09-23 11:31
閱讀 2900·2021-09-08 09:45
閱讀 2336·2021-09-06 15:02
閱讀 2647·2019-08-30 14:21
閱讀 2313·2019-08-30 12:56