반응형

자바스크립트 개발 환경은 Microsoft Visual Studio 2015 버전 HTML 기능 및 Chrome을 이용하고 있습니다.





addEventListener() 메서드는 이벤트 핸들러를 특정 element에 붙일 수 있도록 해준다.


이를통해 많은 이벤트 핸들러를 하나의 element에 추가 할 수 있다.


또한 같은 타입을 가진 핸들러도 계속해서 추가할 수 있다.(예를들면 click같은 이벤트들)


또한 이벤트 리스너들을 HTML element뿐만 아니라 DOM 오브젝트에도 붙일 수 있다.


이벤트 핸들러를 추가 할 수도있지만, 제거 할 수도있다.


바로 예시 코드를 통해 확인해보자.














1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE html>
<html>
<head>
    <title>test title</title>
</head>
 
<body>
    <h2> JavaScript </h2>
 
    <button type="button" id="btn"> << 클릭 >> </button>
    <p id="test"></p>
 
    <script>
        var x = document.getElementById('btn');
        x.addEventListener("click", func1);
        x.addEventListener("mouseover", func2);
        x.addEventListener("mouseout", func3);
 
        function func1() {
            document.getElementById('test').innerHTML += "클릭하셨습니다~" + "<br>";
            x.removeEventListener("click", func1);
            document.getElementById('test').innerHTML +=
                "클릭 이벤트가 삭제되어 클릭해도 \
                그다음부터 값이 나타나지 않습니다." + "<br>";
        }
 
        function func2() {
            document.getElementById('test').innerHTML += "마우스가 버튼위에 왔습니다." + "<br>";
        }
 
        function func3() {
            document.getElementById('test').innerHTML += "마우스가 버튼 밖으로 벗어났습니다." + "<br>";
        }
 
    </script>
 
</body>
</html>
 
//                                                       This source code Copyright belongs to Crocus
//                                                        If you want to see more? click here >>
Crocus




현재 btn이라는 id를 가진 버튼에 3가지의 이벤트 핸들러를 추가했음을 알 수 있다.

click, mouseover, mouseout 3가지인데, 클릭 할때, 마우스가 버튼위에 올려져있을 때, 마우스가 버튼에서 벗어났을 때이다.

클릭할 때는 클릭했다는 메세지를 출력하고, removeEventListener() 메서드를 이용하여 이벤트 핸들러를 제거해주는 방식이다.

그 외에는 마우스가 올라왔는지, 벗어났는지 출력해준다.



반응형
저작자표시 비영리 변경금지

'Basic > JavaScript' 카테고리의 다른 글

자바스크립트 input 그리고 submit  (0) 2017.09.26
자바스크립트 use strict  (0) 2017.09.24
자바스크립트 애니메이션 이용하는 방법  (0) 2017.09.23
자바스크립트 DOM(Document Object Model)  (0) 2017.09.23
자바스크립트 스트링 메서드  (0) 2017.09.22

티스토리툴바