1.事件监听

样式代码

 <style>
    div {
        width: 200px;
        height: 200px;
        background-color: pink;
    }
</style>

body代码

    <div></div>

2.0获取元素

    var box = document.querySelector('div')

addEventListener

语法:

     元素.addEventListener('事件类型', 事件处理函数, 第三个形参)

注意: 这里的事件类型, 全部都一样不需要加 on

执行顺序会按照我们的注册的顺序执行(也就是代码书写的顺序)

    box.addEventListener('click', function () {
        console.log('绑定的第一个事件')
    })

    box.addEventListener('click', function () {
        console.log('绑定的第三个事件')
    })

    box.addEventListener('click', function () {
        console.log('绑定的第二个事件')
    })

2.事件传播

样式代码

 <style>
    .box {
        width: 500px;
        height: 500px;
        background-color: pink;
    }
    .sBox {
        width: 100px;
        height: 100px;
        background-color: green;
    }
</style>

body代码

 <div class="box">
    <div class="sBox"></div>
</div>

假设我们在浏览器内用一个宽高 500px盒子, 内部有一个水平垂直都居中的子级盒子宽高为100px

当我点击在 子盒子上的时候, 其实也是点击在了这个 父盒子的身上

这种情况就叫做 事件传播

=> 当元素触发一个事件的时候, 这个元素的父级节点也会触发相同的事件, 父元素的父元素也会触发相同的事件

=> 点击了子盒子, 会触发子盒子的点击事件

=> 也是点在了父盒子上, 也会触发父盒子的点击事件

=> 也是点在了 body 上, 也会触发 body 的点击事件

=> 也是点在了 html 上, 也会触发 html 的点击事件

=> 也是点在了 document 上, 也会触发 document 的点击事件

=> 也是点在了 window 上, 也会触发 window 的点击事件

=> 页面上任何一个元素触发事件, 都会一层一层的最终导致 window 的相同事件触发

注意点:

1. 只会传播同类事件, 如果是点击事件, 那么只会触发父级或者父级的父级他们注册的点击事件, 其他类型的事件不会得到触发
2. 只会从点击的元素开始, 按照 html 的结构, 逐层向上触发同类型的事件
3. 内部元素不管有没有该事件, 只要上层元素有该事件, 那么上层元素的事件就会触发

2.0获取元素

    var sBox = document.querySelector('.sBox')
    var box = document.querySelector('.box')
    var oBody = document.body
    
    

事件传播

    sBox.onclick = function () {
        console.log('我是 内层 DIV, 我的点击事件被触发了')
    }

    box.onclick = function () {
        console.log('我是 外层 DIV, 我的点击事件被触发了')
    }

    oBody.onclick = function () {
        console.log('我是 body, 我的点击事件被触发了')
    }