DOM事件

時間 2019-11-05

標籤 dom 事件欄目 HTML 简体版

原文原文鏈接

DOM事件級別：有 DOM0級，DOM2級和DOM3級三種；

首先來看不須要操控DOM的事件
javascript

<button type="button" onclick="logFn()"></button>
<script>
    function logFn() {
        console.log('Hello World');
    }
</script>複製代碼

這段代碼你們確定都見過，不須要操做DOM元素，事件處理函數直接寫在html屬性中。固然實際開發中應該沒有人這樣寫了，理由也很簡單，html和js強耦合，不管是編寫仍是維護都沒有任何好處，因而就有了DOM事件處理。
html

DOM0級事件

<button id="btn" type="button"></button>
<script>
    var btn = document.getElementById('btn');
    btn.onclick = function() {
        console.log('Hello World');
    }
</script>複製代碼

DOM0事件定義須要兩步，先找到DOM節點，而後把處理函數賦值給該節點對象的事件屬性。若是想解除事件，那麼只要把null賦值給事件屬性便可。DOM0級事件沒法給一個事件添加多個處理函數。
java

DOM2級事件

<button id="btn" type="button"></button>
<script>
    var btn = document.getElementById('btn');
    function logFn() {
        console.log('Hello World');
    }
    btn.addEventListener('click', logFn, false);
</script>複製代碼

DOM2級事件使用addEventListener，裏面有三個參數，第一個參數是事件名，就是事件屬性去掉on，第二個參數是事件處理函數，第三個參數是一個布爾值（true表示在捕獲階段觸發、false表示在冒泡階段觸發）。使用DOM2事件能夠隨意添加多個處理函數，移除DOM2事件要用removeEventListener，傳入的三個參數與添加事件徹底相同。特別的舊版本IE瀏覽器（IE8及一下），須要使用attachEvent和detachEvent來添加和移除事件。
瀏覽器

DOM3級事件

DOM3級事件就是在DOM2基礎上增長了更多的事件類型，咱們能夠從（鼠標事件、鍵盤事件，HTML事件，表單事件）bash

事件模型：事件捕獲，事件冒泡函數

有如下HTML結構
ui

<html>
	<body>
		<div>
			<span>
				我是目標區域
			</span>
		</div>
	</body>
</html>複製代碼

給span標籤綁定事件，就會有一個從事件源和目標之間的事件流，此例中，事件流的方向爲window -> document -> html -> body -> div -> span -> 目標 -> span -> div -> body -> html -> document -> window ,整個事件流分爲兩個部分，以事件目標爲界限，從window到span標籤這個過程爲事件捕獲，從span標籤回到window的過程叫事件冒泡。如圖所示事件觸發流程：spa

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>事件捕獲和事件冒泡</title>
  </head>
  <body>
        <div>
		span>
		    我是目標區域
		</span>
	</div>
    <script type="text/javascript">
      window.addEventListener('click',function(){
        console.log('window被點擊');
      },true);
      document.documentElement.addEventListener('click',function(){
        console.log('document被點擊');
      },true);
      document.querySelector('html').addEventListener('click',function(){
        console.log('html被點擊');
      },true);
      document.querySelector('body').addEventListener('click',function(){
        console.log('body被點擊');
      },true);
      document.querySelector('div').addEventListener('click',function(){
        console.log('document被點擊');
      },true);
      document.querySelector('span').addEventListener('click',function(){
        console.log('span被點擊');
      },true);
    </script>
  </body>
</html>複製代碼

上面的觸發span點擊事件後，打印結果以下：code

上面的代碼是捕獲階段觸發，順序能夠打亂，打印結果是一致的。cdn

自定義事件

除了系統內置的事件外，咱們還能夠自定義事件

var ev = new Event('defineEvent');
document.addEventListener('defineEvent',function(){
	//添加本身想要的邏輯
	console.log('打印XXX')
},false);
document.dispatchEvent(ev) 
複製代碼

經過建立Event對象來建立事件，經過dispatchEvent函數派發事件。自定義事件能夠綁定到任意DOM元素上，此處選擇document只是爲了演示方便。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。