亚洲区国产区激情区无码区,国产成人mv视频在线观看,国产A毛片AAAAAA,亚洲精品国产首次亮相在线

JavaScript菜鳥(niǎo)教程

JavaScript 對(duì)象

JavaScript 函數(shù)

JS HTML DOM

JS 瀏覽器BOM

AJAX 菜鳥(niǎo)教程

JavaScript 參考手冊(cè)

JavaScript 事件傳播

事件傳播是一種描述在Web瀏覽器中觸發(fā)的事件“堆?！钡姆椒?。

事件冒泡和捕獲是事件傳播的兩種機(jī)制，它們描述了在一個(gè)元素上激活相同事件類(lèi)型的兩個(gè)處理程序時(shí)發(fā)生的情況。

假設(shè)您在<div >元素內(nèi)有一個(gè)<p>元素，并且用戶單擊了<p>元素，應(yīng)該首先處理哪個(gè)元素的“ click”事件？

<div id="div1">Capturing
  <p id="p1">Click me</p>
</div>

<script>
document.querySelector("#div1").addEventListener("click", myFunc, true);
document.querySelector("#p1").addEventListener("click", myFunc, true);
</script>
測(cè)試看看?/?

通過(guò)capture(捕獲)，事件首先被最外面的元素捕獲并傳播到內(nèi)部元素。

通過(guò)冒泡，事件首先由最內(nèi)層元素捕獲和處理，然后傳播到外層元素。

使用該addEventListener()方法，您可以使用“ useCapture ”參數(shù)指定傳播類(lèi)型，下面語(yǔ)法項(xiàng)對(duì)useCapture進(jìn)行了詳細(xì)說(shuō)明。

語(yǔ)法：

element.addEventListener(event, listener, useCapture)

“useCapture”缺省值為false，它將默認(rèn)使用冒泡傳播；而將值設(shè)置為true時(shí)，事件將使用捕獲傳播。

冒泡和捕獲說(shuō)明

引入事件傳播的概念是為了處理DOM層次結(jié)構(gòu)中具有父子關(guān)系的多個(gè)元素具有針對(duì)同一事件的事件處理程序（例如，鼠標(biāo)單擊）的情況?，F(xiàn)在的問(wèn)題是，當(dāng)用戶單擊內(nèi)部元素時(shí)，將首先處理哪個(gè)元素的click事件，即外部元素或內(nèi)部元素的click事件。

當(dāng)在具有父元素的元素上觸發(fā)事件時(shí)（例如本示例中的<p>），瀏覽器將運(yùn)行兩個(gè)不同的階段-捕獲階段和冒泡階段。

在捕獲階段：

  • 瀏覽器將檢查元素的最外層父級(jí)（<html>）是否在捕獲階段注冊(cè)了onclick事件處理程序，如果是，則運(yùn)行該事件處理程序。

  • 然后，它移動(dòng)到<html>中的下一個(gè)元素并執(zhí)行相同的操作，然后執(zhí)行下一個(gè)，依此類(lèi)推，直到到達(dá)實(shí)際單擊的元素。

在冒泡階段，正好相反：

  • 瀏覽器檢查在冒泡階段實(shí)際單擊的元素是否在其上注冊(cè)了onclick事件處理程序，如果是，則運(yùn)行該事件處理程序。

  • 然后，它移動(dòng)到下一個(gè)直接父級(jí)元素，然后再執(zhí)行下一個(gè)，依次類(lèi)推，直到到達(dá)<html>元素為止。

JavaScript事件傳播

在主流瀏覽器中，默認(rèn)情況下，所有事件處理程序都在冒泡階段注冊(cè)。

捕獲階段

在捕獲階段，事件從Window向下傳播通過(guò)DOM樹(shù)到達(dá)目標(biāo)節(jié)點(diǎn)。

document.querySelector("div").addEventListener("click", myFunc, true);
document.querySelector("p").addEventListener("click", myFunc, true);
document.querySelector("a").addEventListener("click", myFunc, true);
測(cè)試看看?/?

僅當(dāng)addEventListener()第三個(gè)參數(shù)設(shè)置為true時(shí)，事件捕獲才與在時(shí)注冊(cè)的事件處理程序一起使用。

冒泡階段

在起泡階段，恰好相反。在此階段，事件會(huì)傳播或冒泡，從目標(biāo)元素到Window都將DOM樹(shù)向上傳播。

document.querySelector("div").addEventListener("click", myFunc);
document.querySelector("p").addEventListener("click", myFunc);
document.querySelector("a").addEventListener("click", myFunc);
測(cè)試看看?/?

所有瀏覽器均支持事件冒泡，并且事件冒泡適用于所有處理程序，無(wú)論它們?nèi)绾巫?cè)（例如，使用onclick或addEventListener()）。

停止事件傳播

如果要防止使用該event.stopPropagation()方法通知任何祖先元素的事件處理程序有關(guān)事件的信息，也可以在中間停止事件傳播。

在以下示例中，如果單擊子元素，則不會(huì)執(zhí)行父元素上的click事件監(jiān)聽(tīng)器：

document.querySelector("div").addEventListener("click", myFunc);
document.querySelector("p").addEventListener("click", myFunc);
document.querySelector("a").addEventListener("click", myFunc);

function myFunc() {
  alert("You clicked: "+ this.tagName);
  event.stopPropagation();
}
測(cè)試看看?/?

訪問(wèn)目標(biāo)元素

目標(biāo)元素是已生成事件的DOM節(jié)點(diǎn)。

例如，如果用戶單擊超鏈接，則目標(biāo)元素是超鏈接。

目標(biāo)元素的訪問(wèn)方式為event.target，在事件傳播階段不會(huì)更改。

document.querySelector("div").addEventListener("click", myFunc);
document.querySelector("p").addEventListener("click", myFunc);
document.querySelector("a").addEventListener("click", myFunc);

function myFunc() {
  alert("target = " + event.target.tagName);
}
測(cè)試看看?/?

防止默認(rèn)動(dòng)作

某些事件具有與之關(guān)聯(lián)的默認(rèn)操作。例如，如果您單擊鏈接瀏覽器，則將您帶到鏈接的目標(biāo)，當(dāng)您單擊表單提交按鈕時(shí)，瀏覽器將提交表單等等。您可以使用event.preventDefault()事件對(duì)象的方法來(lái)防止此類(lèi)默認(rèn)操作。

function myFunc() {
  event.preventDefault();
}
測(cè)試看看?/?

但是，阻止默認(rèn)操作并不能阻止事件傳播；事件繼續(xù)照常傳播到DOM樹(shù)。

事件委托

冒泡還使我們能夠利用事件委托。

事件委托使您可以避免將事件監(jiān)聽(tīng)器添加到特定節(jié)點(diǎn)；而是將事件監(jiān)聽(tīng)器添加到一個(gè)父對(duì)象。

這個(gè)概念基于以下事實(shí)：如果您希望在單擊大量子元素中的任何一個(gè)元素時(shí)運(yùn)行某些代碼，則可以在其父元素上設(shè)置事件監(jiān)聽(tīng)器，并使發(fā)生在它們上面的事件冒泡到其父元素，不必為每個(gè)孩子單獨(dú)設(shè)置事件監(jiān)聽(tīng)器。

在這個(gè)示例中，如果你想在點(diǎn)擊時(shí)彈出一條消息，你可以在父<ul>上設(shè)置click事件監(jiān)聽(tīng)器，它會(huì)彈出列表項(xiàng)

<ul id="parent-list">
<li id="post-1">Item 1</li>
<li id="post-2">Item 2</li>
<li id="post-3">Item 3</li>
<li id="post-4">Item 4</li>
<li id="post-5">Item 5</li>
<li id="post-6">Item 6</li>
</ul>
<script>
document.getElementById("parent-list").addEventListener("click", function(event) {
  if(event.target && event.target.nodeName == "LI") {
 alert("List item " + event.target.id.replace("post-", "") + " was clicked!");
  }
});
</script>
測(cè)試看看?/?