jsDOM獲取元素方法、事件委託、事件捕獲和事件冒泡

阿新 • • 發佈：2019-01-21

本篇博文解決的問題：

1、給父元素註冊點選事件，特定子元素響應該點選事件；——2.2 事件委託

2、給父元素註冊點選事件，點選父元素，所有子元素響應/不響應該點選事件；——2.3 事件冒泡

3、給子元素和父元素註冊點選事件，點選子元素，自己有點選事件的父元素響應/不響應自己的點選事件。——2.3 事件冒泡

4、給多個子元素和父元素註冊點選事件，點選子元素，只響應子元素的點選事件。——2.2 事件委託 2.3 事件冒泡

一示例

要求：根據以下程式碼，在<script>標籤中新增程式碼，刪除一條資料。

下面程式碼中可以看出新增的程式碼必須使用js的原生方式，DOM獲取元素的方法有getElementById、getElementsByName、getElementsByTagName和getElementByClassName。

若根據id來獲取元素並新增點選事件，由於只有父元素具有id，因此點選事件新增在父元素上，子元素“刪除”進行響應，則需要用到事件委託：通過父元素給子元素註冊點選事件。

提供的程式碼為：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <!--code here-->
  <title>demo</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }

    .head, li div {
      display: inline-block;
      width: 70px;
      text-align: center;
    }

    li .id, li .sex, .id, .sex {
      width: 15px;
    }

    li .name, .name {
      width: 40px;
    }

    li .tel, .tel {
      width: 90px;
    }

    li .del, .del {
      width: 15px;
    }

    ul {
      list-style: none;
    }

    .user-delete {
      cursor: pointer;
    }

  </style>
</head>

<body>
  <div id="J_container">
    <div class="record-head">
      <div class="head id">序號</div><div class="head name">姓名</div><div class="head sex">性別</div><div class="head tel">電話號碼</div><div class="head province">省份</div><div class="head">操作</div>
    </div>
    <ul id="J_List">
      <li><div class="id">1</div><div class="name">張三</div><div class="sex">男</div><div class="tel">13788888888</div><div class="province">北京</div><div class="user-delete">刪除</div></li>
      <li><div class="id">2</div><div class="name">李四</div><div class="sex">女</div><div class="tel">13788887777</div><div class="province">上海</div><div class="user-delete">刪除</div></li>
      <li><div class="id">3</div><div class="name">王五</div><div class="sex">男</div><div class="tel">13788889999</div><div class="province">天津</div><div class="user-delete">刪除</div></li>
    </ul>
  </div>

<script>
// your code here
</script>
</body>
</html>

效果為：

script中的程式碼為：

//方法1，直接獲取class，為刪除的div新增點選事件
var a = document.getElementsByClassName("user-delete");
for(var i = 0, len = a.length; i < len; i++) {
	a[i].addEventListener("click", function(e) {
		this.parentNode.remove();
	})
}

//方法2：點選事件新增在ul上，使用事件委託
var deletef = function() {
	this.del = function(li) {
		li.remove();
	}
}

var delli = new deletef();
var parent = document.getElementById("J_List");
parent.addEventListener("click", function(e) {
	if (e.target.className === "user-delete") {
		delli.del(e.target.parentNode);
	}
},false);

二相關方法解釋

在上面script中涉及到的方法有：

1、DOM獲取元素的方法

返回一個匹配特定ID的元素，不存在則返回null。

一般情況下認為這是一個唯一值，因此如果頁面上有多個相同id的元素，DOM只會解析第一個元素，頁面只會顯示第一個元素，則也只能獲取第一個元素。

根據給定的“name”返回一個在HTML document的節點列表集合。

name是元素的name屬性的值。包含添加了name自定義屬性的元素。

在IE和Opera中，該方法還會返回id為指定值的元素，所以最好不要為元素的name和id賦同樣的值。

返回一個包括所有給定標籤名稱的元素的HTML集合，這個檔案結構都會被搜尋，包括根結點。

返回的HTML集合是動態的，即它可以自動更新自己來保持和DOM樹的同步而不用再次呼叫。

使用方法：

var elements = document.getElementsByTagName(name);

name是一個代表元素的名稱的字串。

返回一個包含了所有指定類名的子元素的類陣列物件。當在document物件上呼叫時，會搜尋真個DOM文件，包括根結點。

在任意元素上呼叫此方法將返回以當前元素為根結點，所有指定類名的子元素。

2、DOM事件委託

事件委託，即把一個元素的響應事件的函式委託給另一個元素。

一般情況下，把一個或一組元素的事件委託給它的父元素或者更外層元素上，因此真正繫結事件的是外層元素，當事件響應到需要繫結的元素上時，會通過事件冒泡機制觸發到它的外層元素的繫結事件上，然後在外層元素上進行執行。

重新來看上面的程式碼：

var parent = document.getElementById("J_List");
parent.addEventListener("click", function(e) {
	if (e.target.className === "user-delete") {
		//真正要執行的程式碼
	}
},false);

實際上要進行click事件響應的是li的子元素“刪除”這個div，但是在程式碼中可以看到事件繫結給了ul元素，e為點選的元素，即所繫結的外層元素，target元素是在外層元素之下具體被點選的元素，通過判斷target的屬性來進行匹配，此處是通過class來判斷找到“刪除”這個div。

注意，程式碼中少了相容性處理：

var parent = document.getElementById("J_List");
parent.addEventListener("click", function(e) {
	//相容性處理
	var event = e || window.event;
	var target = event.target || event.srcElement;
	if (target.className === "user-delete") {
		//真正要執行的程式碼
	}
},false);

更具體和詳細的解釋等可以看JavaScript事件委託詳解。

3、DOM事件捕獲和事件冒泡

上面提到了事件冒泡，它具體是什麼呢？

事件冒泡：當滑鼠點選或者觸發DOM事件時，瀏覽器會從內向外進行事件傳播，直到根節點。即點選了父元素，如果子元素通過事件冒泡方式註冊了對應的事件，會先觸發子元素繫結的事件。

事件捕獲：當滑鼠點選或者觸發DOM事件時，瀏覽器會從根節點開始由外到內進行事件傳播。即點選了子元素，如果父元素通過事件捕獲方式註冊了對應的事件，會先觸發父元素繫結的事件。

可以看到這兩個的事件的響應方式正好相反，它們的行為都是事件傳播。

DOM事件流存在三個階段：事件捕獲階段、處於目標階段、事件冒泡階段。

DOM標準事件流的觸發先後順序為：先捕獲再冒泡。

事件冒泡

先來看一個例子：

首先，給上面的程式碼中的每個li新增一個id

<li id = "1">code</li>
<li id = "2">code</li>
<li id = "3">code</li>

然後給body、ul和id為1的li新增點選事件：

var parent = document.getElementById("J_List");
var child = document.getElementById("1");

document.body.addEventListener("click", function(e){
	alert("body");
}, false);
parent.addEventListener("click", function(e){
	alert("parent");
}, false);
child.addEventListener("click", function(e){
	alert("child");
}, false);

點選第一個li，可以看到執行結果為：

點選子元素後，事件觸發順序是從內到外的：child-parent-body。雖然只點擊了子元素，但它的所有有點選事件的父元素全都響應了，這就是事件冒泡。

可以這樣理解：雖然只點擊了子元素li1，但li1在parent裡面，parent又在body裡面，把它們都當成有壓感的東西，壓了最上面的，那下面的也應該有感覺，有了感覺就要有相應的反應，這個反應就是響應自己的點選事件。

如果我不想要父元素和body有反應怎麼辦呢？這就需要阻止事件傳播。修改child的程式碼：

child.addEventListener("click", function(e){
	alert("child");
	//停止事件傳播
	e.stopPropagation();
}, false);

執行結果：

在上面的操作中，點選了兩次，第一次點選li1，第二次點選li3，可以看到彈出的結果就不同：

點選li1：li1有點選事件，且阻止了事件的傳播，因此只會彈出child；

點選li3：li3沒有點選事件，進行事件傳播，傳播到ul，檢測到有點選事件，彈出parent，再進行傳播，傳播到body，檢測到有點選事件，彈出body。

由於冒泡是從內到外，因此阻止冒泡只能阻止該元素的事件向外傳遞，所以點選li1會阻止事件傳遞。

而點選元素的子元素，由於子元素沒有阻止事件的傳播，因此它都會冒泡到最外層元素，所以點選li3後外層元素都會響應。

所以如果不想點選子元素後父元素的點選事件進行響應，就需要使該父元素的子元素阻止冒泡。則如果給li3增加一個監聽事件，點選li3就不會有任何反應。

var li3 = document.getElementById("3");
li3.addEventListener("click", function(e){
    e.stopPropagation();
}, false);

那麼，如果父元素註冊了點選事件，其中的多個子元素也註冊了點選事件，我希望不論點選哪一個子元素，父元素的點選事件都不響應，應該怎麼做呢？

有兩個方法：

方法1：子元素的點選事件寫在自己的元素上，在每個點選事件裡新增阻止冒泡事件的語句；

方法2：使用事件委託，將所有的點選事件寫在父元素上，使用條件語句進行判斷，在最後寫上阻止冒泡事件的語句。

因此，如果部分子元素需要父元素響應自己的點選事件、部分元素不需要父元素響應自己的點選事件，也對應以下方法：

方法1：子元素的點選事件寫在自己的元素上，根據需要決定是否新增新增阻止冒泡事件的語句；

方法2：使用事件委託，將不需要父元素響應的點選事件寫在父元素上，使用條件語句進行判斷，在最後寫上阻止冒泡事件的語句。

方法3：與方法2相反，不推薦。

事件捕獲

修改上面的程式碼：

//在parent後新增事件傳播，表示是事件傳播
parent.addEventListener("click", function(e){
	alert("parent事件傳播");
}, false);

//新增parent的事件捕獲，注意false變為了true
parent.addEventListener("click", function(e){
	alert("parent事件捕獲");
}, true);

執行結果：

可以看到執行順序為：parent事件捕獲-child-parent事件傳播-body。

父元素通過事件捕獲的方式註冊了click事件，根據DOM標準事件流的觸發順序，這個click事件在事件捕獲階段就會觸發，然後到了目標階段，即事件源，然後再進行事件傳播，而parent也用冒泡方式註冊了click事件，所以又會觸發冒泡事件，最後冒泡到根節點。

根據上面的程式碼可以看到，冒泡和捕獲在程式碼上的區別是監聽事件的第三個引數，第三個引數是可選引數，預設為false，即事件冒泡，當設定為true時為事件捕獲。具體使用方式看EventTarget.addEventListener()。

jsDOM獲取元素方法、事件委託、事件捕獲和事件冒泡

一示例

二相關方法解釋

1、DOM獲取元素的方法

2、DOM事件委託

3、DOM事件捕獲和事件冒泡

事件冒泡

事件捕獲

jsDOM獲取元素方法、事件委託、事件捕獲和事件冒泡

jQuery——進階(動畫、迴圈、正則、事件冒泡、事件委託、DOM)

事件冒泡、捕獲和事件委託

Javascript之獲取元素距離頁面的top、left、right、bottom

DOM的預設事件、事件模型、事件委託、阻止預設事件、冒泡事件的方式等。

JavaScript基礎（十）動畫、事件委託、3DBanner

面試題-冒泡與捕獲、事件委託、ie事件和dom模型事件、滑鼠事件

設計模式（九）-觀察者模式、C#委託、事件

Jquery獲取元素方法

獲取元素方法與陣列

jQuery中的事件冒泡、事件捕獲和事件追加引發的問題

C#的委託、匿名委託、lambda表示式

js中的事件捕獲和事件冒泡，以及由事件冒泡引入的事件委託

c#的委託（代理）和事件

javascript學習筆記（五）：異常捕獲和事件處理

事件冒泡，事件捕獲和事件委托

DOM事件機制(事件捕獲和事件冒泡和事件委托)

javascript之事件捕獲和事件冒泡

JS中的事件捕獲和事件冒泡

js響應事件的階段，捕獲階段，冒泡階段

jsDOM獲取元素方法、事件委託、事件捕獲和事件冒泡

一 示例

二 相關方法解釋

1、DOM獲取元素的方法

2、DOM事件委託

3、DOM事件捕獲和事件冒泡

事件冒泡

事件捕獲

相關推薦

一示例

二相關方法解釋