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隻能實作執行單個事件

● 可以借助于事件流幫助我們實作在事件的不同階段執行不同的效果