JS DOM 鼠标事件默认事件 鼠标右键 事件覆盖 添加事件监听 （一）

我们在使用原生JS 操作DOM 会遇到各种各样的问题 如何去解决他们 就需要一些经验了
当我们在html 中 定义一个DIV 命名为 #demo 时
给它写出两个一摸一样的点击事件时候 会发生覆盖事件 如图

           let demo = document.getElementById('demo')
          
            demo.onclick = function (){
   
                console.log(111)
            }
            demo.onclick = function (){
   
                console.log(222)
            }
            

打印结果为2222222
这是因为JS 在解析同一个onclick 事件时 会将后面的事件覆盖掉前一个事件 所以会打印 “2222”
那么怎么解决这个事情呢 这就用到我们的addEventListener()

           let demo = document.getElementById('demo')
           demo.addEventListener('click',function(e){
   
                console.log(111)

            },false)
            demo.addEventListener('click',function(e){
   
                console.log(222)
                
            },false)

如此 两者都会打印
既然说到 addEventListener() 事件 此函数 有三个参数 “监听的函数名” funciton(){} 布尔值 （true 为捕获 从外到内 反之为冒泡 从内到外）
当在demo 内部 再声明个 宽高 小于其本身的 DIV 外部 给 BODY 添加事件监听器 点击里面的Btn 又会怎样呢

            let demo = document.getElementById('demo')
            let btn = document.getElementById('btn')
            b