• 코드:
​x
 
1
<!DOCTYPE html>
2
<html lang="ko">
3
​
4
<head>
5
    <meta charset="UTF-8">
6
    <title>JavaScript EventListener</title>
7
</head>
8
​
9
<body>
10
​
11
    <h1>여러 개의 이벤트 리스너 등록</h1>
12
    <p>아래 버튼에 마우스를 올리거나 클릭해 보세요!</p>
13
    <button id="btn">버튼</button>
14
    <p id="text"></p>
15
​
16
    <script>
17
        var btn = document.getElementById("btn");           // 아이디가 "btn"인 요소를 선택함.
18
        btn.addEventListener("click", clickBtn);            // 선택한 요소에 click 이벤트 리스너를 등록함.
19
        btn.addEventListener("mouseover", mouseoverBtn);    // 선택한 요소에 mouseover 이벤트 리스너를 등록함.
20
        btn.addEventListener("mouseout", mouseoutBtn);      // 선택한 요소에 mouseout 이벤트 리스너를 등록함.
21
​
22
        function clickBtn() {
23
            document.getElementById("text").innerHTML = "버튼이 클릭됐어요!";
24
        }
25
        function mouseoverBtn() {
26
            document.getElementById("text").innerHTML = "버튼 위에 마우스가 있네요!";
27
        }
28
        function mouseoutBtn() {
29
            document.getElementById("text").innerHTML = "버튼 밖으로 마우스가 나갔어요!";
30
        }
31
    </script>
32
33
</body>
34
​
35
</html>