什么是事件冒泡和事件捕获
冒泡:事件 从下到上 由内到外
捕获:事件 从上到下 有外到内
用代码翻译就是
<div class="one">
1
<div class="two">
2
<div class="three">
3
</div>
</div>
</div>
document.getElementsByClassName("one")[0].addEventListener("click",(event)=>{
console.log(event)
event.stopPropagation();
console.log("1")
},false)
document.getElementsByClassName("two")[0].addEventListener("click",(event)=>{
event.stopPropagation();
console.log("2")
},false)
document.getElementsByClassName("three")[0].addEventListener("click",(event)=>{
event.stopPropagation();
console.log("3")
},false)
先说一下addEventListener()的用法 ,addEventListener()接受三个参数 第一个参数表示事件的类型,参数类型为String ,第二个参数是一个回调函数,第三个参数是 useCapture 是一个布尔值,指定事件是否在冒泡或者捕获阶段执行,默认为false(事件在冒泡阶段执行)
上面有3个div 每个div 都有一个点击事件 会输出相应的数字
当useCapture为false是指定事件在冒泡阶段执行,点击最内层div 会输出 3 2 1
当useCapture为true是指定事件在捕获阶段执行,点击最内层div 时会输出 1 2 3