• 코드:
​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
        #linkBox { border: 2px solid green; }
11
    </style>
12
</head>
13
​
14
<body>
15
​
16
    <h1>이벤트 전파의 취소</h1>
17
    <div id="divBox">
18
        <p id="paraBox">박스 안의 여러 곳을 <a id="linkBox" href="/javascript/intro">클릭</a>해 보세요!</p>
19
    </div>
20
    <p id="text"></p>
21
​
22
    <script>
23
        // 각 요소마다 버블링 방식으로 click 이벤트 리스너를 등록함.
24
        document.getElementById("divBox").addEventListener("click", clickDiv);
25
        document.getElementById("paraBox").addEventListener("click", clickPara);
26
        document.getElementById("linkBox").addEventListener("click", clickLink);
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 clickLink(event) {
35
            event.preventDefault();     // 링크의 기본 동작을 취소함.
36
            document.getElementById("text").innerHTML += "링크의 기본 동작을 막았어요!<br>";
37
            event.stopPropagation();    // 이벤트의 전파를 취소함.
38
            document.getElementById("text").innerHTML += "이벤트의 전파를 막았어요!<br>";
39
        }
40
    </script>
41
42
</body>
43
​
44
</html>