js-Dom-事件冒泡捕获

1、事件冒泡和事件捕获

事件冒泡：当给父子元素的同一事件绑定方法的时候，触发子元素身上的事件，执行完毕之后，也会触发父级元素相同的事件，这种机制叫事件冒泡，通俗一点，就像小鱼吐泡泡，越吐越大，层级越大；
事件捕获：
　　给父子元素绑定同一事件时，当触发子元素身上的事件时，先触发父元素，然后在传递给子元素，这种传播机制叫事件捕获；
　　例子：
　　当点击demo1时随之父级的相同onclick也会触发

 demo1.onclick = function (e) {
            e.stopPropagation();//阻止事件冒泡
          console.log(111)
      }
       demo.onclick = function () {
        console.log(222)
        }
        //addEventListener()方法，即为事件监听；可以使用removeEventListener()方法来移除事件的监听。可以给同一家加上不同事件，默认值为 false, 即冒泡传递，当值为 true 时, 事件使用捕获传递。
        demo.addEventListener("click", function () {
            console.log(333)
        })
        demo.addEventListener("click", function (e) {
            console.log(777)
            e.stopPropagation()
        }, false)

//小案例

  #demo {
            width: 200px;
            height: 200px;
            background-color: orangered;
        }
        .sn{
            width: 100px;
            height: 100px;
            background-color: blue;
        }
        .menu{
            width: 100px;
            height: 300px;
            background: brown;
            position: absolute;
        }

<div id="demo">
        <button>11</button>
        <div class="son" style=" width: 100px;
        height: 100px;"></div>
    </div>

替换鼠标默认右击菜单

let demo = document.querySelector("#demo")
let demo1 = document.querySelector("button")
demo.oncontextmenu = function(e){//demo鼠标右击事件
e.preventDefault();//阻止鼠标右击默认事件
let menu = document.querySelector(".menu")//找到所有menu事件
if (menu) menu.remove()//假如menu被创建了，那就删除

menu = document.createElement("div")//创建div节点
menu.classList.add("menu")//加上样式
demo.appendChild(menu)//添加到demo中
menu.style.left = e.pageX+"px"//定义menu的位置
menu.style.top = e.pageY+"px"
}
window.onclick = function(e){
    let menu = document.querySelector(".menu")
    if (menu && !menu.contains(e.target)) {//当除了demo之外右击时，存在menu或者出menu子内容外出现menu就删除menu
        menu.remove()
    }
}