DOM事件中Event對象是什么

這篇文章主要介紹“DOM事件中Event對象是什么”，在日常操作中，相信很多人在DOM事件中Event對象是什么問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”DOM事件中Event對象是什么”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

創(chuàng)新互聯(lián)專注于涇縣網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗。 熱誠為您提供涇縣營銷型網(wǎng)站建設(shè)，涇縣網(wǎng)站制作、涇縣網(wǎng)頁設(shè)計、涇縣網(wǎng)站官網(wǎng)定制、小程序開發(fā)服務(wù)，打造涇縣網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供涇縣網(wǎng)站排名全網(wǎng)營銷落地服務(wù)。

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

Event對象

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

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

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

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

Event對象方法

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

1.stopPropagation

stopPropagation方法主要用于阻止事件的進一步傳播，比如阻止事件繼續(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能阻止事件進一步傳播。

2.perventDefault

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

<a id="go" href="https://www.baidu.com/">禁止跳轉(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對象的兩個主要方法，當前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屬性主要用于獲取事件的目標對象，比如我們點擊a標簽獲取的是a標簽的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. 鼠標事件屬性

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

function moveFn(event) {     console.log(event.screenX) // 獲取鼠標基于屏幕的X軸坐標     console.log(event.screenY) // 獲取鼠標基于屏幕的Y軸坐標     console.log(event.clientX) // 獲取鼠標基于瀏覽器窗口的X軸坐標     console.log(event.clientY) // 獲取鼠標基于瀏覽器窗口的Y軸坐標     console.log(event.pageX) // 獲取鼠標基于文檔的X軸坐標     console.log(event.pageY) // 獲取鼠標基于文檔的Y軸坐標 }  function clickFn(event) {     console.log(event.button) // 獲取鼠標按下的鍵。非IE瀏覽器中0為鼠標左鍵，1為鼠標中鍵，2為鼠標右鍵     console.log(event.which) // 獲取指定事件上哪個鍵盤鍵或鼠標按鈕被按下 }  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);

到此，關(guān)于“DOM事件中Event對象是什么”的學習就結(jié)束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續(xù)學習更多相關(guān)知識，請繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>

本文題目：DOM事件中Event對象是什么
網(wǎng)頁鏈接：http://bm7419.com/article38/pcigsp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站導航、域名注冊、企業(yè)建站、關(guān)鍵詞優(yōu)化、品牌網(wǎng)站制作、網(wǎng)站設(shè)計公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)