詳解addEventListener的三個參數之useCapture

更新時間：2015年03月16日 10:34:43 投稿：hebedich

本文主要給大家介紹的是addEventListener的三個參數之中的useCapture參數的使用及示例分享，有需要的小伙伴參考下

addEventListener 有三個參數：第一個參數表示事件名稱（不含 on，如 "click"）；第二個參數表示要接收事件處理的函數；第三個參數為 useCapture，本文就講解它。

 
<div id="outDiv">

  <div id="middleDiv">

    <div id="inDiv">請在此點擊鼠標。</div>

  </div>

</div>

<div id="info"></div>

復制代碼代碼如下:

var outDiv = document.getElementById("outDiv");

var middleDiv = document.getElementById("middleDiv");

var inDiv = document.getElementById("inDiv");

var info = document.getElementById("info");

outDiv.addEventListener("click", function () { info.innerHTML += "outDiv" + "<br>"; }, false);

middleDiv.addEventListener("click", function () { info.innerHTML += "middleDiv" + "<br>"; }, false);

inDiv.addEventListener("click", function () { info.innerHTML += "inDiv" + "<br>"; }, false);

上述是我們測試的代碼，根據 info 的顯示來確定觸發(fā)的順序，有三個 addEventListener，而 useCapture 可選值為 true 和 false，所以 2*2*2，可以得出 8 段不同的程序。

•全為 false 時，觸發(fā)順序為：inDiv、middleDiv、outDiv；
•全為 true 時，觸發(fā)順序為：outDiv、middleDiv、inDiv；
•outDiv 為 true，其他為 false 時，觸發(fā)順序為：outDiv、inDiv、middleDiv；
•middleDiv 為 true，其他為 false 時，觸發(fā)順序為：middleDiv、inDiv、outDiv；
•……

最終得出如下結論：

•true 的觸發(fā)順序總是在 false 之前；
•如果多個均為 true，則外層的觸發(fā)先于內層；
•如果多個均為 false，則內層的觸發(fā)先于外層。

以上就是本文的全部內容了，希望大家能夠喜歡。

您可能感興趣的文章:

簡單了解JavaScript中常見的反模式
這篇文章主要介紹了簡單了解JavaScript中常見的反模式，反模式是指對反復出現的設計問題的常見的無力而低效的設計模式，俗話說就是重蹈覆轍。這篇文章描述了 JavaScript 中常見的一些反模式，以及避免它們的辦法。,需要的朋友可以參考下
2019-06-06
利用原生JS實現懶加載lazyLoad的三種方法總結
加載頁面的時候,圖片一直都是流量大頭,針對圖片的性能方法也挺多的比如base64、雪碧圖等;懶加載也是其中一種,這篇文章主要給大家介紹了關于利用原生JS實現懶加載lazyLoad的三種方法,需要的朋友可以參考下
2021-07-07
$JSON數據中存在單個轉義字符“\”的處理方法$
JSON數據中存在單個轉義字符“\”的處理方法
這篇文章主要介紹了JSON數據中存在單個轉義字符“\”的處理方法,在這里反斜杠（又稱右斜杠"\"），還表示轉義字符，字符串中不能成單出現。具體內容詳情大家跟隨腳本之家小編一起看看吧
2018-07-07
JavaScript offset實現鼠標坐標獲取和窗口內模塊拖動
在頁面開發(fā)時我們少不了各種鼠標交互動作，那么JavaScript中如何實現鼠標坐標獲取和窗口內模塊拖動，本文就詳細的介紹一下，感興趣的可以了解一下
2021-05-05
一文教你如何像導入JS模塊一樣導入CSS
HTML中通過使用css可以讓網頁的美觀效果更進一步,下面這篇文章主要給大家介紹了如何像導入JS模塊一樣導入CSS的相關資料,文中給出了詳細的實例代碼,需要的朋友可以參考下
2021-09-09
js無后端實現點擊加載查看更多（提示SEO友好度）
為了提示SEO友好度,并且避免調用后端接口給服務器造成負擔,可以使用js無后端實現點擊加載查看更多,比如HTML中源碼存在60條記錄,預先顯示20條記錄,點擊“查看更多”一次追加10條,最后一次后按鈕文本改為“已查看全部”,在JavaScript中,你可以使用以下步驟來實現
2024-10-10
基于JavaScript打造一款桌面級便簽系統(tǒng)
本文將用html，css和JavaScript實現一個簡單的便簽系統(tǒng)。除非手動清空便簽，否則便簽會一直保留，非常方便。感興趣的小伙伴可以跟隨小編一起動手試一試
2022-02-02
JavaScript實現二級菜單的制作
這篇文章主要為大家詳細介紹了JavaScript實現二級菜單的制作，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-10-10
JS關于刷新頁面的相關總結
在本篇內容中我們給大家整理了關于JS刷新頁面的所有相關知識點以及整理了相關的技術文章，大家可以收藏本頁面繼續(xù)深入學習。
2018-05-05
詳解BootStrap表單驗證中重置BootStrap-select驗證提示不清除的坑
這篇文章主要介紹了詳解BootStrap表單驗證中重置BootStrap-select驗證提示不清除的坑，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2019-09-09