詳解addEventListener的三個參數(shù)之useCapture
addEventListener 有三個參數(shù)：第一個參數(shù)表示事件名稱（不含 on，如 "click"）；第二個參數(shù)表示要接收事件處理的函數(shù)；第三個參數(shù)為 useCapture，本文就講解它。
<div id="outDiv">
<div id="middleDiv">
<div id="inDiv">請在此點擊鼠標(biāo)。</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);
上述是我們測試的代碼，根據(jù) 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；
•……
最終得出如下結(jié)論：
•true 的觸發(fā)順序總是在 false 之前；
•如果多個均為 true，則外層的觸發(fā)先于內(nèi)層；
•如果多個均為 false，則內(nèi)層的觸發(fā)先于外層。
以上就是本文的全部內(nèi)容了，希望大家能夠喜歡。
- Javascript 的addEventListener()及attachEvent()區(qū)別分析
- addEventListener 的用法示例介紹
- window.addEventListener來解決讓一個js事件執(zhí)行多個函數(shù)
- document.addEventListener使用介紹
- JS在IE和FF下attachEvent,addEventListener學(xué)習(xí)筆記
- 事件綁定之小測試 onclick && addEventListener
- javascript attachEvent和addEventListener使用方法
- addEventListener()第三個參數(shù)useCapture (Boolean)詳細(xì)解析
- 講兩件事:1.this指針的用法小探. 2.ie的attachEvent和firefox的addEventListener在事件處理上的區(qū)別
- addEventListener()與removeEventListener()解析
相關(guān)文章
這篇文章主要介紹了簡單了解JavaScript中常見的反模式，反模式 是指對反復(fù)出現(xiàn)的設(shè)計問題的常見的無力而低效的設(shè)計模式，俗話說就是重蹈覆轍。 這篇文章描述了 JavaScript 中常見的一些反模式，以及避免它們的辦法。,需要的朋友可以參考下2019-06-06
利用原生JS實現(xiàn)懶加載lazyLoad的三種方法總結(jié)
加載頁面的時候,圖片一直都是流量大頭,針對圖片的性能方法也挺多的比如base64、雪碧圖等;懶加載也是其中一種,這篇文章主要給大家介紹了關(guān)于利用原生JS實現(xiàn)懶加載lazyLoad的三種方法,需要的朋友可以參考下2021-07-07
JSON數(shù)據(jù)中存在單個轉(zhuǎn)義字符“\”的處理方法
這篇文章主要介紹了JSON數(shù)據(jù)中存在單個轉(zhuǎn)義字符“\”的處理方法,在這里反斜杠（又稱右斜杠"\"），還表示轉(zhuǎn)義字符，字符串中不能成單出現(xiàn)。具體內(nèi)容詳情大家跟隨腳本之家小編一起看看吧2018-07-07
JavaScript offset實現(xiàn)鼠標(biāo)坐標(biāo)獲取和窗口內(nèi)模塊拖動
在頁面開發(fā)時我們少不了各種鼠標(biāo)交互動作，那么JavaScript中如何實現(xiàn)鼠標(biāo)坐標(biāo)獲取和窗口內(nèi)模塊拖動，本文就詳細(xì)的介紹一下，感興趣的可以了解一下2021-05-05
一文教你如何像導(dǎo)入JS模塊一樣導(dǎo)入CSS
HTML中通過使用css可以讓網(wǎng)頁的美觀效果更進一步,下面這篇文章主要給大家介紹了如何像導(dǎo)入JS模塊一樣導(dǎo)入CSS的相關(guān)資料,文中給出了詳細(xì)的實例代碼,需要的朋友可以參考下2021-09-09
js無后端實現(xiàn)點擊加載查看更多（提示SEO友好度）
為了提示SEO友好度,并且避免調(diào)用后端接口給服務(wù)器造成負(fù)擔(dān),可以使用js無后端實現(xiàn)點擊加載查看更多,比如HTML中源碼存在60條記錄,預(yù)先顯示20條記錄,點擊“查看更多”一次追加10條,最后一次后按鈕文本改為“已查看全部”,在JavaScript中,你可以使用以下步驟來實現(xiàn)2024-10-10
本文將用html，css和JavaScript實現(xiàn)一個簡單的便簽系統(tǒng)。除非手動清空便簽，否則便簽會一直保留，非常方便。感興趣的小伙伴可以跟隨小編一起動手試一試2022-02-02
這篇文章主要為大家詳細(xì)介紹了JavaScript實現(xiàn)二級菜單的制作，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
JS關(guān)于刷新頁面的相關(guān)總結(jié)
在本篇內(nèi)容中我們給大家整理了關(guān)于JS刷新頁面的所有相關(guān)知識點以及整理了相關(guān)的技術(shù)文章，大家可以收藏本頁面繼續(xù)深入學(xué)習(xí)。2018-05-05
詳解BootStrap表單驗證中重置BootStrap-select驗證提示不清除的坑
這篇文章主要介紹了詳解BootStrap表單驗證中重置BootStrap-select驗證提示不清除的坑，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09