標籤：
1事件傳播——冒泡與捕獲<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>bubble event</title> <style type="text/css"> body{margin:0;} #one{ width:500px; height:300px; background:rgb(255,0,0); } #two{ width:400px; height:260px; background:rgb(255,50,50); } #three{ width:300px; height:240px; background:rgb(255,100,100); } #four{ width:200px; height:200px; background:rgb(255,150,150); } </style></head><body> <div id=‘one‘> <div id=‘two‘> <div id=‘three‘> <div id=‘four‘> </div> </div> </div> </div> <script> var one = document.getElementById(‘one‘); var two = document.getElementById(‘two‘); var three = document.getElementById(‘three‘); var four = document.getElementById(‘four‘); var useCapture = true; //false為冒泡擷取【目標元素先觸發】 true為捕獲擷取【父級元素先觸發】 one.addEventListener(‘click‘, function() { console.log(‘one‘); }, useCapture); two.addEventListener(‘click‘, function() { console.log(‘two‘); }, useCapture); three.addEventListener(‘click‘, function() { console.log(‘three‘); }, useCapture); four.addEventListener(‘click‘, function() { console.log(‘four‘); }, useCapture); /* false 冒泡 點擊four div 輸出結果：four three two one true 捕獲 點擊four div 輸出結果： one two three four */ </script></body></html>分析：
addEventListener第三個參數useCapture ，true時為捕獲，false時為冒泡
冒泡從目標對象開始，向父級元素至window傳遞；捕獲從window底層逐級至目標對象傳遞！
JS事件冒泡與捕獲
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
