JS的事件传播

• 事件传播
  • 假设我们在浏览器内用一个宽高500px的盒子,内部有一个水平垂直都居中的子级盒子宽高为100px
  • 当我点击在 子盒子上的时候，其实也是点击在了这个父盒子的身上
  • 这种情况就叫做 事件传播
  • => 当元素触发一个事件的时候,这个元素的父级节点也会触发相同的事件,父元素的父元素也会触发相同的事件
  • =>点击了子盒子，会触发子盒子的点击触发
  • =>也是点在了父盒子上，也会触发父盒子的点击事件
  • =>也是点在了body上，也会触发body的点击事件
  • =>也是点在了html上，也会触发html的点击事件
  • =>也是点在了document上，也会触发document的点击事件
  • =>也是点在了window上，也会触发window的点击事件
  • =>页面上任何一个元素触发事件，都会一层一层的最终导致window的相同事件触发
• 注意点：
  • 1.只会传播同类事件,如果是点击事件,那么只会触发父级或者父级的父级他们注册的点击事件，其他类型的事件不会得到触发
  • 2.只会从点击的元素开始，按照html的结构，逐层向上触发同类型的事件
  • 3.内部元素不管有没有该事件，只要上层元素有该事件，那么上层元素的事件就会触发

`

.box {
    width: 500px;
    height: 500px;
    background-color: pink;
}

.sBox {
    width: 100px;
    height: 100px;
    background-color: skyblue;
}`

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

    // 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,我的点击事件被触发了')
    }