事件的默認傳播機制：
捕獲階段：從外向里依次查找元素
目標(biāo)階段：從當(dāng)前事件源本身的操作
冒泡階段：從內(nèi)到外依次觸發(fā)相關(guān)的行為（我們最常用的就是冒泡階段）
具體見下圖：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> #outer{ margin:20px auto; padding:20px; width:300px; height:300px; background:#008000; } #inner{ padding:20px; width:200px; height:200px; background:blue; } #center{ padding:20px; width:100px; height:100px; background:yellow; } </style></head><body> <div id='outer'> <div id='inner'> <div id='center'></div> </div> </div> <script> var outer = document.getElementById('outer'),inner = document.getElementById('inner'),center = document.getElementById('center'); //使用DOM0級事件綁定給元素的某一個行為綁定的方法，都是在行為觸發(fā)后的冒泡階段把方法執(zhí)行的 document.body.onclick = function(){ console.log('body') } outer.onclick = function(){ console.log('outer') } inner.onclick = function(){ console.log('inner') } center.onclick = function(){ console.log('center') } //addEventListener 第一個參數(shù)是行為的類型 第二個參數(shù)是給當(dāng)前的行為定義的方法 第三個參數(shù)是控制在哪個階段發(fā)生：true 在捕獲階段發(fā)生 false在冒泡階段發(fā)生 document.body.addEventListener('click',function(){ console.log('body') },false) outer.addEventListener('click',function(){ console.log('outer') },true) inner.addEventListener('click',function(){ console.log('inner') },false) //輸出 outer inner body </script></body></html>以上這篇js 事件的傳播機制(實例講解)就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持武林網(wǎng)。
新聞熱點
疑難解答
