400-650-7353
您所在的位置:首頁 > IT干貨資料 > web前端 > 【W(wǎng)eb前端基礎知識】DOM級事件綁定

【W(wǎng)eb前端基礎知識】DOM級事件綁定

  • 發(fā)布: 優(yōu)就業(yè)it培訓
  • 來源:
  • 2021-10-29 15:40:27
  • 閱讀()
  • 分享
  • 手機端入口

今天從事件流,DOM0級事件綁定,DOM2級事件綁定,低版本IE事件綁定等方面來學習事件。

事件流

當你單擊了某個元素,單擊事件不僅僅發(fā)生在這個元素上,你也單擊了它的父元素、父元素的父元素、……它的祖先元素,甚至單擊了整個頁面。

“事件流”描述的是頁面上各個元素接收事件的順序。

我們?yōu)榱嗣枋鍪录膫鞑ロ樞,特意人為?guī)定了兩個階段:捕獲階段capture pahse、冒泡階段bubbling phase。點擊頁面上的一個元素,事件在哪個階段觸發(fā),這取決于添加事件監(jiān)聽的方法。

DOM0級事件綁定

DOM分為級別,DOM0級、1級、2級、3級,是不同的標準,標準一直在升級。

我們之前學習的 obj.onclick = function () {} 這種注冊監(jiān)聽的寫法,就是DOM0級的事件綁定方法。就是把onclick當做屬性添加給了oDiv元素。

通過實驗,我們發(fā)現(xiàn),這種事件添加方法,只能監(jiān)聽冒泡過程。事件的捕獲階段,沒有監(jiān)聽成功。

這里需要注意,在IE9、Chrome里面,事件會冒泡到window對象,而IE6、7、8僅僅冒泡到document對象。

另外,用這種方法綁定的監(jiān)聽,this指的是觸發(fā)這個事件的元素,沒有任何的瀏覽器兼容問題。

DOM0級還有一種寫法,直接將監(jiān)聽寫在標簽里面,工作中不許用:

寫在HTML標簽里面代碼耦合性很強,三層沒有完全分離,工作中不用的。這種寫法,也是監(jiān)聽冒泡階段。

用DOM0級添加事件監(jiān)聽,同一個元素不能有兩個同樣事件監(jiān)聽,比如:

  1. box.onclick = function () { 
  2.    alert(1); 
  3.  } 
  4.    box.onclick = function () { 
  5.    alert(2); 
  6.  } 

以JS代碼后出現(xiàn)的為準,它會覆蓋先寫的函數(shù)。所以點擊box彈出2。

DOM2級事件綁定

DOM1級規(guī)范中,沒有對事件進行改動,所以不再贅述。

DOM2級做了新的規(guī)范,不用on來綁定監(jiān)聽了,而是使用一個方法 addEventListener()。它接受三個參數(shù):什么事件、函數(shù)、是否監(jiān)聽捕獲階段。

第1個參數(shù):事件名不用寫on,比如:click、mouseover 、mouseout

第2個參數(shù):函數(shù)可以是匿名函數(shù),也可以是有名函數(shù)

第3個參數(shù):布爾值,true表示監(jiān)聽捕獲、false表示監(jiān)聽冒泡階段

比如:

  1. box.addEventListener("click", funciton () { 
  2.     alert(1); 
  3. }, true); 

第三個參數(shù)是true,表示監(jiān)聽box的捕獲階段的單擊事件。

addEventListener可以重復添加相同事件名的事件:我們給box1的綁定了兩個事件冒泡階段的監(jiān)聽,不會覆蓋,兩個監(jiān)聽的函數(shù)都會執(zhí)行,按照代碼執(zhí)行順序。

  1. box.addEventListener("click", funciton () { 
  2.     alert(1); 
  3. }, true); 
  4. box.addEventListener("click", funciton () { 
  5.     alert(2); 
  6. }, true); 

先彈出1,然后彈出2。

低版本IE的事件綁定

現(xiàn)在仍有少量的用戶在使用IE8,所以我們把低版本的IE事件綁定說明一下。

IE6、7、8不支持addEventListener()方法,支持 attachEvent() 方法。

  1. box.attachEvent("onclick"function () { 
  2.   alert("click"); 
  3. }); 

attachEvent方法沒有第三個參數(shù),也就是說,不能選擇監(jiān)聽捕獲、冒泡,只能監(jiān)聽冒泡階段。

第一個參數(shù),必須寫on,和addEventListener()不一樣;

第二個參數(shù),就是事件處理函數(shù)

沒有第三個參數(shù),只能監(jiān)聽冒泡。所以和DOM0事件寫法一樣(比如onclick)。

低版本IE的事件監(jiān)聽attachEvent:事件處理函數(shù)里面的this,不是觸發(fā)事件的這個元素,而是window對象!

并且,同一個事件名的多個監(jiān)聽,會反著執(zhí)行:

  1. box.attachEvent("onclick"function () { 
  2.   alert(1); 
  3. }); 
  4. box.attachEvent("onclick"function () { 
  5.   alert(2); 
  6. }); 
  7. box.attachEvent("onclick"function () { 
  8.   alert(3); 
  9. }); 

結(jié)果會彈出3、2、1。

文章“【W(wǎng)eb前端基礎知識】DOM級事件綁定”已幫助

更多內(nèi)容

>>本文地址:http://nfbqydst.cn/zhuanye/2021/70628.html

THE END  

聲明:本站稿件版權(quán)均屬中公教育優(yōu)就業(yè)所有,未經(jīng)許可不得擅自轉(zhuǎn)載。

1 您的年齡

2 您的學歷

3 您更想做哪個方向的工作?

獲取測試結(jié)果
  • 大前端大前端
  • 大數(shù)據(jù)大數(shù)據(jù)
  • 互聯(lián)網(wǎng)營銷互聯(lián)網(wǎng)營銷
  • JavaJava
  • Linux云計算Linux
  • Python+人工智能Python
  • 嵌入式物聯(lián)網(wǎng)嵌入式
  • 全域電商運營全域電商運營
  • 軟件測試軟件測試
  • 室內(nèi)設計室內(nèi)設計
  • 平面設計平面設計
  • 電商設計電商設計
  • 網(wǎng)頁設計網(wǎng)頁設計
  • 全鏈路UI/UE設計UI設計
  • VR/AR游戲開發(fā)VR/AR
  • 網(wǎng)絡安全網(wǎng)絡安全
  • 新媒體與短視頻運營新媒體
  • 直播帶貨直播帶貨
  • 智能機器人軟件開發(fā)智能機器人
 

快速通道fast track

近期開班時間TIME