• 코드:
​x
 
1
<!DOCTYPE html>
2
<html lang="ko">
3
​
4
<head>
5
    <meta charset="UTF-8">
6
    <title>JavaScript EventListener Call</title>
7
    <style>
8
        #divBox { width: 100%; height: 100px; border: 2px solid red; }
9
        #paraBox { width: 80%; height: 50px; border: 2px solid orange; }
10
        #spanBox { border: 2px solid green; }
11
    </style>
12
</head>
13
​
14
<body>
15
​
16
    <h1>캡쳐링 이벤트 전파</h1>
17
    <div id="divBox">
18
        <p id="paraBox">박스 안의 여러 곳을 <span id="spanBox">클릭</span>해 보세요!</p>
19
    </div>
20
    <p id="text"></p>
21
​
22
    <script>
23
        // 각 요소마다 캡쳐링 방식으로 click 이벤트 리스너를 등록함.
24
        document.getElementById("divBox").addEventListener("click", clickDiv, true);
25
        document.getElementById("paraBox").addEventListener("click", clickPara, true);
26
        document.getElementById("spanBox").addEventListener("click", clickSpan, true);
27
28
        function clickDiv(event) {
29
            document.getElementById("text").innerHTML += "div 요소를 click 하셨네요!<br>";
30
        }
31
        function clickPara(event) {
32
            document.getElementById("text").innerHTML += "p 요소를 click 하셨네요!<br>";
33
        }
34
        function clickSpan(event) {
35
            document.getElementById("text").innerHTML += "span 요소를 click 하셨네요!<br>";
36
        }
37
    </script>
38
39
</body>
40
​
41
</html>