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