js事件機(jī)制----捕獲與冒泡機(jī)制實(shí)例分析
本文實(shí)例講述了js事件機(jī)制----捕獲與冒泡機(jī)制。分享給大家供大家參考，具體如下：
先從事件綁定機(jī)制說起, 事件綁定機(jī)制通過綁定方法addEventListener()實(shí)現(xiàn),
語法格式如下:element.addEventListener(event, function, useCapture)
參數(shù)值參數(shù) 描述 event 必須。字符串，指定事件名。 注意: 不要使用 'on' 前綴。 例如，使用 'click' ,而不是使用 'onclick'。 提示： 所有 HTML DOM 事件，可以查看我們完整的 HTML DOM Event 對象參考手冊。 function 必須。指定要事件觸發(fā)時(shí)執(zhí)行的函數(shù)。 當(dāng)事件對象會作為第一個(gè)參數(shù)傳入函數(shù)。 事件對象的類型取決于特定的事件。例如， 'click' 事件屬于 MouseEvent(鼠標(biāo)事件) 對象。 useCapture 可選。布爾值，指定事件是否在捕獲或冒泡階段執(zhí)行。 可能值: true - 事件句柄在捕獲階段執(zhí)行false- false- 默認(rèn)。事件句柄在冒泡階段執(zhí)行
我們可以看到第三個(gè)參數(shù)是布爾值, true表示在捕獲階段執(zhí)行, 而false指在冒泡階段執(zhí)行
所以什么是 捕獲和冒泡?捕獲(capture)和冒泡(bubble)是事件傳播過程中的兩個(gè)概念, 比如用戶單擊某個(gè)元素, 但由于元素處于父元素內(nèi), 該父元素又處于document對象中, document對象又處于window對象中, 因此該單擊事件實(shí)際發(fā)生在該元素, 父元素, document, window對象上, 而事件傳播過程就是瀏覽器決定依次觸發(fā)哪個(gè)對象的事件處理函數(shù)的過程.
DOM事件模型將事件傳播過程分為兩個(gè)階段: 捕獲階段和冒泡階段
在事件捕獲階段, 事件從最頂級的父元素逐層向內(nèi)傳遞,
在冒泡階段, 事件從事件發(fā)生的直接元素 , 逐層向父元素傳遞
這里舉個(gè)簡單的例子:
點(diǎn)擊孫子元素, 給body中的元素都添加點(diǎn)擊事件并輸出觸發(fā)事件的對象id:
<!DOCTYPE html><html><head></head><body> <div id='父級'> <div id='兒子'> <div style='width:100px; height:100px; background-color:yellow'> </div> </div> </div></body><script type='text/javascript'> var a = document.getElementById(’父級’), b = document.getElementById(’兒子’), c = document.getElementById(’孫子’); a.addEventListener('click',show, true); b.addEventListener('click',show, true); c.addEventListener('click',show, true); console.log('前3為捕獲,后三個(gè)為冒泡'); a.addEventListener('click',show, false); b.addEventListener('click',show, false); c.addEventListener('click',show, false); function show(even){ console.log(this.id); }</script></html>
其中兩條孫子輸出相同被折疊了, 可以看到前三個(gè)是以捕獲順序, 第三個(gè)參數(shù)為true, 順序是從父親到孫子
后三個(gè)為false意思是冒泡順序, 順序是孫子到父級,即從內(nèi)到外
實(shí)際上捕獲和冒泡時(shí)最外層和的元素并不是父級div,
捕獲時(shí)實(shí)際上是:
document-->html-->body-->父級div-->兒子div-->孫子div
冒泡時(shí)相反, 只不過body及以上沒添加事件并輸出, 所以在例子中沒顯現(xiàn)出來
所以用冒泡還是捕獲？對于事件代理來說，在事件捕獲或者事件冒泡階段處理并沒有明顯的優(yōu)劣之分，但是由于事件冒泡的事件流模型被所有主流的瀏覽器兼容，從兼容性角度來說還是建議大家使用事件冒泡模型。
感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼運(yùn)行效果。
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript操作DOM技巧總結(jié)》、《JavaScript頁面元素操作技巧總結(jié)》、《JavaScript事件相關(guān)操作與技巧大全》、《JavaScript查找算法技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》
希望本文所述對大家JavaScript程序設(shè)計(jì)有所幫助。
相關(guān)文章：
1. 使用Python webdriver圖書館搶座自動預(yù)約的正確方法2. Linux刪除系統(tǒng)自帶版本Python過程詳解3. ASP基礎(chǔ)知識VBScript基本元素講解4. Python 合并拼接字符串的方法5. Python 利用Entrez庫篩選下載PubMed文獻(xiàn)摘要的示例6. Python3 json模塊之編碼解碼方法講解7. Python 制作查詢商品歷史價(jià)格的小工具8. ASP.NET MVC使用jQuery ui的progressbar實(shí)現(xiàn)進(jìn)度條9. Python sublime安裝及配置過程詳解10. python 使用事件對象asyncio.Event來同步協(xié)程的操作
網(wǎng)公網(wǎng)安備