27 JS中绑定的弊端以及事件监听,事件传播

1. 绑定的弊端

• 我们现在注册事件就是通过onXXX; 只能给元素注册一个事件,如果写了第二个,那么第一个就会被覆盖掉
• 解决:
• +如果想要两个事件全都存在,我们可以使用 事件监听的方式给元素绑定事件
• +使用 addEventListener 去给元素通过事件监听的方式

2. 事件监听

• 语法: 元素.addEventListener('事件类型',事件处理函数,第三个形参)
• 注意:这里的事件类型全部都一样,不需要加 on
• 执行顺序会按照我们的注册顺序执行(也就是代码的书写顺序)

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

<div></div>

    //0.获取元素
    var box = document.querySelector('div')
    
    box.addEventListener('click',function(){
      console.log('绑定的第一个事件:')
    })

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

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

3.事件传播

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

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

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

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

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

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

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

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

• 注意点：

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