事件的三個階段 · js技術點

```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>觸發事件的三個階段</title> <style type="text/css"> #div1 { width: 300px; height: 200px; background-color: red; } #div2 { width: 250px; height: 150px; background-color: green; } #div3 { width: 200px; height: 100px; background-color: blue; } div:hover { cursor: pointer; } pre { font-size: 16px; font-weight: 700; } </style> </head> <body> <div id="div1"> <div id="div2"> <div id="div3"></div> </div> </div> <pre> 事件共有三個階段： 1.事件捕獲階段 :從外向內 2.事件目標階段 :最開始選擇的那個 3.事件冒泡階段 : 從里向外 addEventListener(event, function, useCapture)中的useCaptrue就是設置捕獲階段或冒泡階段的。通過e.eventPhase這個屬性可以知道當前的事件是什么階段的：如果這個屬性的值是: 1---->捕獲階段 2---->目標階段 3---->冒泡一般默認都是冒泡階段,很少用捕獲階段冒泡階段:從里向外捕獲階段:從外向內 </pre> <script type="text/javascript"> document.getElementById("div1").onclick = function(e) { console.log(e.eventPhase); } document.getElementById("div1").onclick = function(e) { console.log(e.eventPhase); } document.getElementById("div1").onclick = function(e) { console.log(e.eventPhase); } </script> </body> </html> ```