JS的事件冒泡和事件捕获

什么是事件

事件是文档和浏览器窗口中发生的特定的交互瞬间。比如：鼠标点击、改变窗口大小、按下键盘按键

 

什么是事件流

事件流描述的是从页面中接受事件的顺序，分为：

● 冒泡

从具体元素到不具体元素（里-->外）

● 捕获

从不具体元素到具体元素（外-->里）

默认为冒泡

 

 

DOM事件流

<script>

var bodyer = document.querySelector(".bodyer");

bodyer.addEventListener("click",function (evt) {

    console.log("bodyer捕获");

    console.log(evt.target.innerHTML);

    },true); //事件捕获

bodyer.addEventListener("click",function (evt) {

    console.log("bodyer冒泡"); },false); //事件冒泡

</script>

 

addEventListener("事件名称"，事件处理函数，true/false)--->添加事件（true-->捕获，false-->冒泡）

removeEventListener()--->删除事件

只有命名函数才能被删除，匿名函数无法删除

 

总结

● addEventListener可以实现对同一个元素添加多个事件，事件的执行顺序就是按照我们写的程序顺序执行

● onClick只能实现执行单个事件

● 可以借助于事件流帮助我们实现在事件的不同阶段执行不同的效果