-
자바스크립트 - 이벤트 핸들러프론트엔드/JavaScript 2020. 10. 19. 17:31
이벤트 핸들러란?
브라우저 상에서 특정한 동작이 발생했을 때 이벤트가 일어난다.
그리고 이때 실행되는 코드 블럭을 이벤트 핸들러라고 한다.
이벤트 리스너라고 부르기도 하지만 정확히 말하면 조금 차이가 있다.
이벤트 리스너는 이벤트 발생하기를 기다렸다가 이를 수신한다.
이벤트 핸들러는 이벤트 발생 후 준비된 코드를 실행한다.
이벤트 핸들러의 종류
이벤트 핸들러의 종류는 3가지다.
- 인라인 이벤트 핸들러
- 이벤트 핸들러 프로퍼티
- addEventListener 메서드
아래서 설명하겠지만 인라인 이벤트 핸들러는 현재는 잘 쓰지 않는다.
'HTML'과 자바스크립트가 분리되지 않는 문제가 생긴다.
그래서 코드가 길어지면 가독성이 떨어지고 문제가 생길 확률이 높아지기 때문이다.
1. 인라인 이벤트 핸들러
<body> <button onclick=inline()> 버튼입니다. </button> <!-- 버튼을 누르면 인라인 메서드가 실행된다. --> </body> <script> function inline(){ alert("인라인 이벤트 핸들러입니다."); }; // 버튼을 눌렀을 때 실행되는 메서드다. </script>위 코드가 인라인 이벤트 핸들러다.
즉 'HTML' 코드 안에 자바 스크립트 메서드를 실행하는 코드가 들어있다.
이렇게 대기하다가 이용자가 버튼을 누르면 자바스크립트의 메서드를 불러오는 것이다.
이는 과거에는 많이썼지만 코드가 길어지면 오류를 일으킬 확률이 높아져서 지금은 쓰지 않는다.
2. 이벤트 핸들러 프로퍼티
<body> <button id="button"> 버튼입니다. </button> <!-- 이벤트 핸들러 프로퍼티에선 버튼은 별도 기능이 없다 --> </body> <script> let btn = document.getElementById("button"); btn.onclick = function (){ alert("이벤트 핸들러 프로퍼티 이용한 경우입니다."); } </script>이벤트 핸들러 프로퍼티를 이용한 코드다.
인라인 이벤트 핸들러와 달리 'HTML'의 버튼 태그는 아무런 기능이 없다.
DOM을 이용해서 자바스크립트 내에서 버튼 태그를 조작하면서 이벤트 메서드를 실행한다.
다만 이 경우 한 가지 단점이 있다.
같은 이벤트를 두 개 설정하면 두 번 실행되는 것이 아니라 가장 최신 코드 하나만 실행된다.
<body> <button id="button"> 버튼입니다. </button> <!-- 이벤트 핸들러 프로퍼티에선 버튼은 별도 기능이 없다 --> </body> <script> let btn = document.getElementById("button"); btn.onclick = function (){ alert("이벤트 핸들러 프로퍼티 이용한 경우입니다."); } btn.onclick = function (){ alert("이벤트 핸들러 프로퍼티 이용한 경우입니다. 222"); } </script>위와 같은 코드에선 버튼을 누르면 아래 두번째 메시지만 경고창으로 뜨게 된다.
3. addEventListener 메서드를 이용한 방식
<body> <button id="button"> 버튼입니다. </button> </body> <script> let btn = document.getElementById("button"); btn.addEventListener('click', function (){ alert("addEventListener 메서드 이용한 경우입니다.") }); // 버튼을 누르면 이 코드가 먼저 실행 btn.addEventListener('click', function (){ alert("addEventListener 메서드 이용한 경우입니다.222") }); // 버튼을 누르면 위 코드 실행 이후 다음에 실행 </script>위 코드는 addEventListener메서드를 사용한 방식이다.
프로퍼티를 이용했을때와 비슷해보이지만 그와 달리 같은 이벤트를 여러개 중복 등록이 가능하다.
그리고 중복등록해도 각자 순서대로 실행이 된다.
또한 HTML 요소 뿐 아니라 모든 DOM 요소에 대해 동작한다.
<body> <button id="button"> 버튼입니다. </button> <button id="button2"> 버튼입니다. </button> </body> <script> addEventListener('click', function (){ alert("addEventListener 메서드 이용한 경우입니다.") }); // 버튼을 누르면 이 코드가 먼저 실행 </script>addEventListener 메서드는 해당 메서드를 실행할 객체를 따로 지정하지 않으면 window를 객체로 둔다.
즉 브라우저 윈도우 내에서 실행되는 모든 클릭 이벤트에 대해 해당 메서드가 실행된다.
그리고 해당 메서드는 캡쳐링과 버블링을 지원한다.
'프론트엔드 > JavaScript' 카테고리의 다른 글
자바스크립트 - 버블링, 캡쳐링의 활용과 이벤트 위임 (0) 2020.10.20 자바스크립트 - 이벤트 버블링과 캡쳐링 (0) 2020.10.20 자바스크립트 - 이벤트 (0) 2020.10.19 자바스크립트 고차함수 - find(), findindex() (0) 2020.10.06 자바스크립트 고차함수 - every(), some() (0) 2020.10.06