事件的三个阶段 · JavaScript

### addEventListener第三个参数作用当addEventListener第三个参数为false的时候,就是为事件冒泡. 为false就是执行 box3,box2,box1; 为true就是 box1,box2,box3 . 这样就不事件冒泡了,而是事件捕获. ``` <style> #box1 { width: 300px; height: 300px; background-color: pink; } #box2 { width: 200px; height: 200px; background-color: black; } #box3 { width: 100px; height: 100px; background-color: skyblue; } </style> </head> <body> <div id="box1"> <div id="box2"> <div id="box3"> </div> </div> </div> <script> var box1 = document.getElementById('box1'); var box2 = document.getElementById('box2'); var box3 = document.getElementById('box3'); var arr = [box1, box2, box3]; for (let i = 0; i < arr.length; i++) { arr[i].addEventListener('click', function () { console.log(this.id); },false); //为true就是事件捕获 } </script> ``` 事件的三个阶段第一阶段:捕获阶段. 第二阶段:执行当前点击的元素. 第三阶段:事件冒泡阶段. ## 通过onclick注册的事件只有事件冒泡,没有事件捕获.