成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

DOM 事件深入淺出（一）

macg0406 / 2513人閱讀

摘要：本文就將帶大家深入淺出地了解事件的那些屬性和方法。針對不同級別的，我們的事件處理方式也是不一樣的。當(dāng)然其優(yōu)點(diǎn)是不需要操作來完成事件的綁定。文章地址事件深入淺出二。

在項(xiàng)目開發(fā)時(shí)，我們時(shí)常需要考慮用戶在使用產(chǎn)品時(shí)產(chǎn)生的各種各樣的交互事件，比如鼠標(biāo)點(diǎn)擊事件、敲擊鍵盤事件等。這樣的事件行為都是前端DOM事件的組成部分，不同的DOM事件會有不同的觸發(fā)條件和觸發(fā)效果。本文就將帶大家深入淺出地了解DOM事件的那些屬性和方法。

首先在介紹DOM事件之前我們先來認(rèn)識下DOM的不同級別。針對不同級別的DOM，我們的DOM事件處理方式也是不一樣的。

DOM級別與DOM事件

DOM級別一共可以分為4個(gè)級別：DOM0級，DOM1級，DOM2級和 DOM3級，而DOM事件分為3個(gè)級別：DOM0級事件處理，DOM2級事件處理和DOM3級事件處理。如下圖所示：

有人可能會問，為什么沒有DOM1級事件處理呢？因?yàn)?級DOM標(biāo)準(zhǔn)中并沒有定義事件相關(guān)的內(nèi)容，所以沒有所謂的1級DOM事件模型。

關(guān)于DOM級別這里不做詳細(xì)的介紹，下面主要介紹下不同級別DOM中的不同事件。

1.DOM0級事件

在了解DOM0級事件之前，我們有必要先了解下HTML事件處理程序，也是最早的這一種的事件處理方式，代碼如下：

以上代碼我們通過直接在HTML代碼里定義了一個(gè)onclick的屬性觸發(fā)showFn方法，這樣的事件處理程序最大的缺點(diǎn)就是HTML于JS強(qiáng)耦合，我們一旦需要修改函數(shù)名就得修改兩個(gè)地方。當(dāng)然其優(yōu)點(diǎn)是不需要操作DOM來完成事件的綁定。

那么什么是DOM0級處理事件呢？DOM0級事件就是將一個(gè)函數(shù)賦值給一個(gè)事件處理屬性，比如：

以上代碼我們給button定義了一個(gè)id，通過JS獲取到了這個(gè)id的按鈕，并將一個(gè)函數(shù)賦值給了一個(gè)事件處理屬性onclick，這樣的方法便是DOM0級處理事件的體現(xiàn)。我們可以通過給事件處理屬性賦值null來解綁事件。

DOM0級事件處理程序的缺點(diǎn)在于一個(gè)處理程序無法同時(shí)綁定多個(gè)處理函數(shù)，比如我還想在按鈕點(diǎn)擊事件上加上另外一個(gè)函數(shù)。

2.DOM2級事件

DOM2級事件在DOM0級事件的基礎(chǔ)上彌補(bǔ)了一個(gè)處理程序無法同時(shí)綁定多個(gè)處理函數(shù)的缺點(diǎn)，允許給一個(gè)處理程序添加多個(gè)處理函數(shù)。代碼如下：

DOM2級事件定義了addEventListener和removeEventListener兩個(gè)方法，分別用來綁定和解綁事件，方法中包含3個(gè)參數(shù)，分別是綁定的事件處理屬性名稱（不包含on）、處理函數(shù)和是否在捕獲時(shí)執(zhí)行事件處理函數(shù)。如果我們還需要添加一個(gè)鼠標(biāo)移入的方法，只需要：

btn.addEventListener("mouseover", showFn, false);

這樣點(diǎn)擊按鈕和鼠標(biāo)移入時(shí)都將觸發(fā)showFn方法。

需要注意的是IE8級以下版本不支持addEventListener和removeEventListener，需要用attachEvent和detachEvent來實(shí)現(xiàn)：

btn.attachEvent("onclick", showFn); // 綁定事件 
btn.detachEvent("onclick", showFn); // 解綁事件

這里我們不需要傳入第三個(gè)參數(shù)，因?yàn)镮E8級以下版本只支持冒泡型事件。

3.DOM3級事件

DOM3級事件在DOM2級事件的基礎(chǔ)上添加了更多的事件類型，全部類型如下：

UI事件，當(dāng)用戶與頁面上的元素交互時(shí)觸發(fā)，如：load、scroll

焦點(diǎn)事件，當(dāng)元素獲得或失去焦點(diǎn)時(shí)觸發(fā)，如：blur、focus

鼠標(biāo)事件，當(dāng)用戶通過鼠標(biāo)在頁面執(zhí)行操作時(shí)觸發(fā)如：dbclick、mouseup

滾輪事件，當(dāng)使用鼠標(biāo)滾輪或類似設(shè)備時(shí)觸發(fā)，如：mousewheel

文本事件，當(dāng)在文檔中輸入文本時(shí)觸發(fā)，如：textInput

鍵盤事件，當(dāng)用戶通過鍵盤在頁面上執(zhí)行操作時(shí)觸發(fā)，如：keydown、keypress

合成事件，當(dāng)為IME（輸入法編輯器）輸入字符時(shí)觸發(fā)，如：compositionstart

變動事件，當(dāng)?shù)讓覦OM結(jié)構(gòu)發(fā)生變化時(shí)觸發(fā)，如：DOMsubtreeModified

同時(shí)DOM3級事件也允許使用者自定義一些事件。

DOM事件流

上文中講到了addEventListener的第三個(gè)參數(shù)為指定事件是否在捕獲或冒泡階段執(zhí)行，設(shè)置為true表示事件在捕獲階段執(zhí)行，設(shè)置為true表示事件在捕獲階段執(zhí)行，而設(shè)置為false表示事件在冒泡階段執(zhí)行。那么什么是事件冒泡和事件捕獲呢？可以用下圖來解釋：

1.事件冒泡

所謂事件冒泡就是事件像泡泡一樣從最開始生成的地方一層一層往上冒，比如上圖中a標(biāo)簽為事件目標(biāo)，點(diǎn)擊a標(biāo)簽后同時(shí)也會觸發(fā)p、li上的點(diǎn)擊事件，一層一層向上直至最外層的html或document。下面是代碼示例：

上面的代碼運(yùn)行后我們點(diǎn)擊a標(biāo)簽，首先會彈出"我是目標(biāo)事件"提示，然后又會彈出"事件冒泡至DIV"的提示，這便說明了事件自內(nèi)而外向上冒泡了。

那么我們?nèi)绾?strong>阻止事件冒泡呢？這里就涉及事件的Event對象中的stopPropagation方法，如下：

child.addEventListener("click", function(e) {
    alert("我是目標(biāo)事件");
    e.stopPropagation();
}, false);

加上stopPropagation方法后，我們再次點(diǎn)擊a標(biāo)簽就不會觸發(fā)div上的click事件了。

2.事件捕獲

和事件冒泡相反，事件捕獲是自上而下執(zhí)行，我們只需要將addEventListener的第三個(gè)參數(shù)改為true就行。

此時(shí)我們點(diǎn)擊a標(biāo)簽，首先彈出的是"事件冒泡至DIV"，其次彈出的是"我是目標(biāo)事件"，正好與事件冒泡相反。

總結(jié)

本文主要介紹了不同DOM級別下的事件處理程序，同時(shí)介紹了事件冒泡和捕獲的觸發(fā)原理和方法。熟練地使用不同級別的DOM事件并且解決相應(yīng)的瀏覽器兼容性問題對我們的前端項(xiàng)目開發(fā)會很有幫助。在下篇文章中，我將給大家介紹DOM事件中Event對象的屬性和方法。文章地址：DOM 事件深入淺出（二）。

本文為勞卜原創(chuàng)文章，首發(fā)于微信公眾號：前端呼啦圈（Love-FED）
轉(zhuǎn)載請注明來自——微信公眾號：前端呼啦圈（Love-FED）

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/80620.html

相關(guān)文章

  • DOM 事件深入淺出（二）

    摘要：在事件深入淺出一中，我主要給大家講解了不同級別下的事件處理程序，同時(shí)介紹了事件冒泡和捕獲的觸發(fā)原理和方法。方法主要用于阻止事件的進(jìn)一步傳播，比如阻止事件繼續(xù)向上層冒泡。備注文本參考自權(quán)威指南一書及慕課網(wǎng)教程事件揭秘。 在DOM事件深入淺出（一）中，我主要給大家講解了不同DOM級別下的事件處理程序，同時(shí)介紹了事件冒泡和捕獲的觸發(fā)原理和方法。本文將繼續(xù)介紹DOM事件中的知識點(diǎn)，主要側(cè)重于D...

    ghnor 評論0 收藏0

  • 1、深入淺出React（一）

    摘要：中的事件不存在以上問題掛載的每個(gè)函數(shù)都可以控制在組件中，不會污染全局空間中沒有產(chǎn)生直接使用的，而是使用了事件委托方式處理，無論有多少個(gè)出現(xiàn)，其實(shí)最后都只在樹上添加了一個(gè)事件處理函數(shù)，掛在最頂層的節(jié)點(diǎn)上。 深入淺出React（一） 1、create-react-app工具使用 安裝create-react-app npm install create-react-app -g 創(chuàng)...

    davidac 評論0 收藏0

  • 深入理解js Dom事件機(jī)制（二）——添加事件處理程序

    摘要：深入理解事件機(jī)制一事件流事件就是當(dāng)用戶或者瀏覽器自身執(zhí)行的某種動作，諸如等都是事件的名稱，那響應(yīng)個(gè)事件的函數(shù)就稱為事件處理程序事件處理函數(shù)事件句柄。 深入理解js Dom事件機(jī)制（一）——事件流 事件就是當(dāng)用戶或者瀏覽器自身執(zhí)行的某種動作，諸如 click、mouseover等都是事件的名稱，那響應(yīng)個(gè)事件的函數(shù)就稱為事件處理程序（事件處理函數(shù)、事件句柄）。 事件處理程序的名字都是以on...

    ddongjian0000 評論0 收藏0

  • 深入理解js Dom事件機(jī)制（二）——添加事件處理程序

    摘要：深入理解事件機(jī)制一事件流事件就是當(dāng)用戶或者瀏覽器自身執(zhí)行的某種動作，諸如等都是事件的名稱，那響應(yīng)個(gè)事件的函數(shù)就稱為事件處理程序事件處理函數(shù)事件句柄。 深入理解js Dom事件機(jī)制（一）——事件流 事件就是當(dāng)用戶或者瀏覽器自身執(zhí)行的某種動作，諸如 click、mouseover等都是事件的名稱，那響應(yīng)個(gè)事件的函數(shù)就稱為事件處理程序（事件處理函數(shù)、事件句柄）。 事件處理程序的名字都是以on...

    qianfeng 評論0 收藏0

  • 深入理解js Dom事件機(jī)制（一）——事件流

    摘要：事件捕獲提出的事件流模型稱為事件捕獲。事件代理則是一種簡單有效的技巧，通過它可以把事件處理器添加到一個(gè)父級元素上，從而避免把事件處理器添加到多個(gè)子級元素上。更新無需重新綁定事件處理器，因?yàn)槭录韺Σ煌釉乜刹捎貌煌幚矸椒ā? 首先我們思考一個(gè)很有意思的事情：一張紙上畫了兩個(gè)同心圓，當(dāng)我們把手指放到圓心上時(shí)，手指指向的不是一個(gè)圓，而是紙上的兩個(gè)圓，同理之，當(dāng)我們單擊網(wǎng)頁上的一個(gè)div...

    OBKoro1 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<