事件的传播假设我们在浏览器内用一个宽高500px的父盒子，内部有一个水平垂直都居中的宽高100px的滋贺子，并且这两个盒

假设我们在浏览器内用一个宽高500px的父盒子，内部有一个水平垂直都居中的宽高100px的滋贺子，并且这两个盒子都设置上了点击事件
那么如果我们点击在了子盒子身上，其实也是点击在了父盒子身上

<div class="box_1">
    <div class="box_2"></div2>
</div>
<script>
    const box_1 = document.querySelector(".box_1")
    const box_2 = document.querySelector(".box_2")
    box_1.onclick = function () {
        console.log("11111")
    }
    box_2.onclick = function () {
        console.log("22222")
    }
</script>

这就是事件传播
当元素触发一个事件的时候，其父元素也会触发相同的事件，父元素的父元素也会触发相同的事件

事件传播的方式

目标：你点击在哪个元素身上了，那么这个事件的目标就是什么

冒泡
就是从目标的事件处理函数开始，依次向外，直到 window 的事件处理函数触发
在开发中，默认的事件传播方式为冒泡
事件传播的时候，只有触发了对应的事件，那么传播一定会传播上去，哪怕中间的一些元素没有绑定对应事件

目标
目标的父元素
目标的父元素的父元素...
body
document
window

var box1 = document.querySelector('.box_1')
var box2 = document.querySelector('.box_2')
// 这种绑定方式只能完成冒泡
box1.onclick = function () {
    console.log('111111111111');
}
box2.onclick = function () {
    console.log('222222222222');
}
document.body.onclick = function () {
    console.log('body.........');
}

// 事件监听 --- 默认冒泡
box1.addEventListener('click', function () {
    console.log('box1');
})          
box2.addEventListener('click', function () {
    console.log('box2');
})
document.body.addEventListener('click', function () {
    console.log('body');
})

捕获
就是从 window 的事件处理函数开始，依次向内，直到事件目标的事件处理函数执行

window
document
body
目标的父元素的父元素...
目标的父元素
目标
冒泡与捕获的区别：就是在事件的传播中，多个同类型事件处理函数的执行顺序不同

// 捕获
// DOM元素.addEventListener('事件类型', 事件处理函数, 布尔值决定当前传播方式(默认为false))
box1.addEventListener('click', function () {
    console.log('box1');                  
}, true)
box2.addEventListener('click', function () {
    console.log('box2');
}, true)
document.body.addEventListener('click', function () {
    console.log('body');
}, true)

事件委托

就是把我要做的事情委托给别人来做
因为我们的冒泡机制，点击子元素的时候，也会同步触发父元素的相同事件
所以我们可以把子元素的事件委托给父元素来做

点击子元素的时候，不管子元素有没有点击事件，只要父元素有点击事件，那么就可以触发父元素的点击事件

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

<script>
const oUl = document.querySelector("ul")
oUl.addEventListener("click", function(e) {
    console.log("我是 ul 的点击事件，我被触发了")
})
</script>

target

target 这个属性是事件对象中的属性，表示你点击的目标
当你触发了点击事件的时候，你点击在哪个元素上，target 就是哪个元素
这个 target 不兼容，在 IE 下要使用 srcElement

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

<script>
const oUl = document.querySelector("ul")
oUl.addEventListener("click", function(e) {
    e = e || window.event   
    const target = e.target || e.srcElement    
    console.log(target)
    // 点击 ul 的时候，target 就是 ul
    // 点击 li 的时候，target 就是 li
})
</script>

事件委托

这个时候当我们点击 li 的时候，也可以触发 ul 的点击事件
并且在事件内部，我们可以拿到点击的到底是 ul 还是 li
这个时候物品们可以把 li 的事件委托给 ul 来做

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

<script>
const oUl = document.querySelector("ul")
oUl.addEventListener("click", function(e) {
    e = e || window.event   
    const target = e.target || e.srcElement    
    if(target.nodeName.toUpperCase === "LI") {
        console.log("我是 li，我被点击了")
    }
})
</script>

什么时候使用事件委托

比如，页面上本身没有 li，通过代码添加了一些 li，这些 li是没有点击事件的，每次动态的操作完 li 以后都要重新给 li 绑定一次点击事件
这个时候只要委托给 ul 即可
注意元素的事件只能委托给结构父级或者在结构父级的同样的事情上

默认行为

不用我们注册，但自己存在的事情
比如：a标签的默认跳转, form表单submit的自动刷新

阻止默认行为

比如点击 a标签的时候不跳转页面
两种方式： e.preventDefault()：非 IE 使用
e.returnValue = false：IE 使用

<a href="http://www.baidu.com">点击</a>   
const oA = document.querySelectoe("a")   
a.addEventListener("click", function(e){
    e = e || window.event   
    console.log(this.href)
    e.preventDefault ? e.preventDefault() : e.returnValue = false
})