在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.stopPropagation
stopPropagation方法主要用于阻止事件的進(jìn)一步傳播,比如阻止事件繼續(xù)向上層冒泡。
function getEvent(event) { event.stopPropagation(); } child.addEventListener('c