-
[JS] 이벤트 알아보기Front-end/Javascript 2020. 11. 29. 22:15
이벤트
이벤트를 통해 화면에서 일어나는 일들에 대한 동작이나 사건들을 수행하고 처리합니다.
웹 브라우저에서 동작하는 프로그램은 기본적으로이벤트 주도형 프로그램으로서 미리 등록해준 작업을 이벤트가 발생할 때 수행하는 것입니다.
이렇게 등록해준 이벤트를이벤트 처리기라고 하며 이벤트가 발생했을 때 실행되는 함수입니다.
이벤트 처리기를 등록하는 방법은 총 3가지로서 하나씩 살펴보겠습니다.- HTML 요소의 속성으로 등록하는 방법
- DOM 요소의 프로퍼티로 등록하는 방법
- addEventListener 메서드를 등록하는 방법
HTML 요소의 속성에 이벤트 처리기 등록
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> </head> <body> <input type="button" value="click" onclick="displayTime()" /> </body> <script> function displayTime() { var date = new Date(); console.log(`현재시각은 ${date} 입니다.`); } </script> </html><input type="button" value="click" onclick="displayTime()" />
이 부분에서 onclick이라는 부분이 이벤트이며 그 이벤트는 개발자가 정한 이벤트 처리기 이름이라고 합니다.
예제로는 onclick이라는 이벤트를 사용했고 클릭했을 때 이벤트가 처리됩니다.
이벤트는 종류가 굉장히 많습니다. 당장은 외우지 못하더라도 어떠한 이벤트가 있는지 살펴보겠습니다.이벤트 처리기 이름(이벤트 종류)
이벤트 처리기 이름 이벤트 종류 onclick 마우스로 클릭했을 때 ondblclick 마우스로 더블클릭했을 때 onmousedown 마우스 버튼을 눌렀을 때 onmouseup 마우스 버튼에서 손가락을 떼었을 때 onmousemove 마우스 포인터가 HTML 요소 위에서 움직일 때 onmouseout 마우스 포인터가 HTML 요소를 벗어났을 때 onmouseover 마우스 포인터가 HTML 요소 위에 놓여있을 때 onkeydown 키보드의 키를 눌렀을 때 onkeypress 키보드의 키를 누르고 손가락을 떼었을 때 onkeyup 키보드의 키에서 손가락을 떼었을 때 onchange input 요소의 값이 바뀌었을 때 onblur input 요소가 포커스를 잃었을 때 onfocus input 요소가 포커스를 맞추었을 때 onselect 텍스트 필드 등의 텍스트를 선택했을 때 onsubmit 폼 제출 버튼을 눌렀을 때 onload HTML을 모두 읽어 들였을 때 onunloadWeb 웹 페이지가 메모리에서 내려갈 때(예 : 다른 페이지로 전환할 때) onabort 페이지나 이미지 읽어 들이기가 중단되었을 때 onerror 페이지나 이미지를 읽어 들이는 동안 오류가 발생했을 때 onresize HTML 요소의 크기가 바뀌었을 때 DOM에서 가져온 HTML 요소에 이벤트 처리기 저장
DOM은 HTML 요소를 조작할 수 있게 하는 인터페이스입니다. 지금 살펴볼 주요 객체는 아래와 같습니다.
- window : Window 객체라고 부르며 웹 브라우저 윈도우 하나 또는 하나를 가리킵니다.
- document : Document 객체라고 부르며 HTML 문서 전체를 가리킵니다. HTML 문서 요소를 가져오거나 새로 만드는 등 HTML 관련된 기능을 제공합니다.
- 요소 객체 : HTML 문서의 요소를 가리키는 객체입니다.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> </head> <body> <input type="button" value="click" id="button" /> </body> <script> function displayTime() { var date = new Date(); console.log(`현재시각은 ${date} 입니다.`); } // onload를 활용해 HTML을 다 읽어들인 후에 실행 window.onload = function() { // getElementById를 통해 input의 button이라는 id를 가진 요소 객체를 가져옴 const button = document.getElementById("button"); // 가져온 객체에 이벤트 처리기를 등록 button.onclick = displayTime; // 아래의 방식으로도 가능 button.onclick = function() { var date = new Date(); console.log(`현재시각은 ${date} 입니다.`); }; // 함수 리터럴에 이름을 붙이면 디버깅이 편리 button.onclick = function displayTime() { var date = new Date(); console.log(`현재시각은 ${date} 입니다.`); }; }; </script> </html>위처럼 이벤트 처리기를 분리하게 되면 HTML 코드와 자바스크립트 코드를 분리하기 때문에 훨씬 가독성이 높고 유지보수가 편리합니다.
이벤트 처리기 제거
이벤트를 처리하고 남은 이벤트를 제거해야할 때가 있습니다. 이벤트 처리기가 등록되어 있지 않은 이벤트 처리기 프로퍼티에는 기본적으로
null이 담겨있습니다.console.log(button.onkeydown); // null button.onclick = null;현재 예제에서 onclick을 등록해놓은 상태이기 때문에 단순하기
null을 대입하면 이벤트 처리기가 제거됩니다.'Front-end > Javascript' 카테고리의 다른 글
[JS] 반복문 알아보기 (0) 2020.11.29 [JS] 조건문 알아보기 (0) 2020.11.29 [JS] 연산자 알아보기 (0) 2020.11.29 [JS] 함수 알아보기 (0) 2020.11.29 [JS] 객체 알아보기 (0) 2020.11.29