事件捕获和事件冒泡的区别

事件捕获和事件冒泡的区别

冒泡型（从里向外）

捕获型（从外向里

说明：
DOM0级事件都是冒泡型（无法概念
DOM2级事件默认冒泡型false、捕获型true (注：IE低版本浏览器都是冒泡型)

验证：
DOM1级就是冒泡型事件，无法改变

<script>
// 1. 获取标签
var div1Obj = document.querySelector('.div1')
var div2Obj = document.querySelector('.div2')
var div3Obj = document.querySelector('.div3')
// 2. 设置事件
div1Obj.onclick = function() {
    console.log('this is div1 yeye')
}
div2Obj.onclick = function() {
    console.log('this is div2 father')
}
div3Obj.onclick = function() {
    console.log('this is div3 son')
}
</script>

DOM2级事件IE9以下统一冒泡型事件，无法改变
DOM2级事件IE9及以上，默认冒泡事件；可通过更改第三个参数动态设置事件事件流：默认false表示冒泡型，true表示捕捉型

<script>
// 1. 获取标签
var div1Obj = document.querySelector('.div1')
var div2Obj = document.querySelector('.div2')
var div3Obj = document.querySelector('.div3')
// 2. 设置事件
div1Obj.addEventListener('click', function(){
    console.log('this is div1 yeye')
}, true)

div2Obj.addEventListener('click', function(){
    console.log('this is div2 father')
}, true)

div3Obj.addEventListener('click', function(){
    console.log('this is div3 son')
}, true)
</script>