javascriptDOM事件是什么

這篇文章主要講解了“javascript DOM事件是什么”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“javascript DOM事件是什么”吧！

創(chuàng)新互聯(lián)網(wǎng)絡公司擁有10余年的成都網(wǎng)站開發(fā)建設經(jīng)驗，千余家客戶的共同信賴。提供成都網(wǎng)站設計、網(wǎng)站建設、網(wǎng)站開發(fā)、網(wǎng)站定制、外鏈、建網(wǎng)站、網(wǎng)站搭建、響應式網(wǎng)站建設、網(wǎng)頁設計師打造企業(yè)風格，提供周到的售前咨詢和貼心的售后服務

DOM級別與DOM事件

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

javascript DOM事件是什么

有人可能會問，為什么沒有DOM1級事件處理呢?因為1級DOM標準中并沒有定義事件相關的內容，所以沒有所謂的1級DOM事件模型。

關于DOM級別這里不做詳細的介紹，下面主要介紹下不同級別DOM中的不同事件。

1.DOM0級事件

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

<button type="button" onclick="showFn()"></button>  <script>  function showFn() {  alert('Hello World');  }  </script>

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

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

<button id="btn" type="button"></button>  <script>  var btn = document.getElementById('btn');  btn.onclick = function() {  alert('Hello World');  }  // btn.onclick = null; 解綁事件  </script>

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

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

2.DOM2級事件

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

<button id="btn" type="button"></button>  <script>  var btn = document.getElementById('btn');  function showFn() {  alert('Hello World');  }  btn.addEventListener('click', showFn, false);  // btn.removeEventListener('click', showFn, false); 解綁事件  </script>

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

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

這樣點擊按鈕和鼠標移入時都將觸發(fā)showFn方法。

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

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

這里我們不需要傳入第三個參數(shù)，因為IE8級以下版本只支持冒泡型事件。

3.DOM3級事件

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

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

  2. 焦點事件，當元素獲得或失去焦點時觸發(fā)，如：blur、focus

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

  4. 滾輪事件，當使用鼠標滾輪或類似設備時觸發(fā)，如：mousewheel

  5. 文本事件，當在文檔中輸入文本時觸發(fā)，如：textInput

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

  7. 合成事件，當為IME(輸入法編輯器)輸入字符時觸發(fā)，如：compositionstart

  8. 變動事件，當?shù)讓覦OM結構發(fā)生變化時觸發(fā)，如：DOMsubtreeModified

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

DOM事件流

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

javascript DOM事件是什么

1.事件冒泡

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

<div id="box">  <a id="child">事件冒泡</a>  </div>  <script>  var box = document.getElementById('box'),  child = document.getElementById('child');  child.addEventListener('click', function() {  alert('我是目標事件');  }, false);  box.addEventListener('click', function() {  alert('事件冒泡至DIV');  }, false);  </script>

上面的代碼運行后我們點擊a標簽，首先會彈出'我是目標事件'提示，然后又會彈出'事件冒泡至DIV'的提示，這便說明了事件自內而外向上冒泡了。

那么我們如何阻止事件冒泡呢?這里就涉及事件的Event對象中的stopPropagation方法，如下：

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

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

2.事件捕獲

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

<div id="box">  <a id="child">事件冒泡</a>  </div>  <script>  var box = document.getElementById('box'),  child = document.getElementById('child');  child.addEventListener('click', function() {  alert('我是目標事件');  }, true);  box.addEventListener('click', function() {  alert('事件冒泡至DIV');  }, true);  </script>

此時我們點擊a標簽，首先彈出的是'事件冒泡至DIV'，其次彈出的是'我是目標事件'，正好與事件冒泡相反。

感謝各位的閱讀，以上就是“javascript DOM事件是什么”的內容了，經(jīng)過本文的學習后，相信大家對javascript DOM事件是什么這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關知識點的文章，歡迎關注！

網(wǎng)站名稱：javascriptDOM事件是什么
標題鏈接：http://muchs.cn/article2/ijocic.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供營銷型網(wǎng)站建設、自適應網(wǎng)站、域名注冊、品牌網(wǎng)站設計、全網(wǎng)營銷推廣、電子商務

廣告

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

網(wǎng)站建設網(wǎng)站維護公司