事件的传播机制1、事件是浏览器赋予元素默认的行为操作，我们只要触发这些操作，一定会触发相关的事件；如果我们做了事件绑定

1、事件是浏览器赋予元素默认的行为操作，我们只要触发这些操作，一定会触发相关的事件；如果我们做了事件绑定 DOM0/DOM2 ，在事件触发的时候可以做一些事情，如果不做，事件也会被触发，只不过什么也不做而已。

2、阶段 3、例子

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="box" id="box">
        <div class="outer" id="outer">
            <div class="inner" id="inner"></div>
        </div>
    </div>
</body>

</html>
<style>
    .box {
        width: 200px;
        height: 200px;
        background: goldenrod;
    }

    .outer {
        width: 100px;
        height: 100px;
        background: indigo;
    }

    .inner {
        width: 50px;
        height: 50px;
        background: lightcoral;
    }
</style>
<script>


（1）DOM 0级事件 冒泡
// box.onclick = function () {
//     console.log('box')
// }
// outer.onclick = function () {
//     console.log('outer')
// }
// //dom0级事件 两次 只有最后一次生效
// inner.onclick = function () {
//     console.log('inner1')
// }
// inner.onclick = function () {
//     console.log('inner2')
// }

依次输出：inner2、outer、box

（2）DOM 2级事件
//第一个参数：事件名称、第二个是方法、第三个是设置在捕获阶段还是冒泡阶段
// box.addEventListener('click', function () {
//     console.log('box')
// }, true)

// box.addEventListener('click', function () {
//     console.log('outer')
// }, true)

// box.addEventListener('click', function () {
//     console.log('inner')
// }, true)

（3）阻止事件冒泡 DOM 0级
    //阻止冒泡 ev.stopPropagation()  或者处理兼容：ev.cancelBobble = true
// DOM 0级
// box.onclick = function () {
//     console.log('box')

// }
// outer.onclick = function () {
//     console.log('outer')
// }
// //dom0级事件 两次 只有最后一次生效
// inner.onclick = function () {
//     console.log('inner1')
// }
// inner.onclick = function (ev) {
//     console.log('inner2')
//     ev.stopPropagation ? ev.stopPropagation() : ev.cancelBobble = true
// }

（4）//DOM2级 阻止事件冒泡

// box.addEventListener('click', function () {
//     console.log('box')
// }, false)

// outer.addEventListener('click', function () {
//     console.log('outer')
// }, false)

// inner.addEventListener('click', function (ev) {
//     console.log('inner')
//     ev.stopPropagation ? ev.stopPropagation() : ev.cancelBubble = true
// }, false)

4、事件委托/事件代理

document.body.onclick = function (ev) {
    if (ev.target.className == 'box') {
        console.log('box')
        return
    }
    if (ev.target.className == 'outer') {
        console.log('outer')
        return
    }
    if (ev.target.className == 'inner') {
        console.log('inner')
        return
    }
}