<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="target">
        <p>click p</p>
        click div
    </div>

    <script>
        document.querySelector("div#target").addEventListener('click',(event)=>{
            console.log(event.target.tagName);
        });
        /*
        浏览器产生事件流分为三个阶段
        1.从最外层的根元素html开始依次向下，称为捕获阶段
        2.到达目标元素时，称为到达阶段
        3.然后依次向上回到根元素，称为冒泡阶段
         */
    </script>
</body>
</html>