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()
}
}