Event와 Event 종류

Javascript

Event(이벤트)란 무엇인가?

이벤트는 어떤 사건을 말한다. 브라우저에서 사건(Event)이란, 예를 들어, 사용자가 어떤 웹페이지에서 버튼을 클릭했을 ‘때’ 또는 어떤 박스에서 값을 입력했을 ‘때’를 의미한다.

이벤트는 이벤트가 발생했을 때, 그에 맞는 대응을 하도록 코드를 작성해야 한다. 이를 위해서는 보통, 이벤트는 함수에 연결되며 그 함수는 이벤트가 발생하기 전에는 실행되지 않다가 이벤트가 발생하면 실행되는데, 이 함수(콜백함수)를 이벤트 핸들러라고 한다.

1
2
3
4
var elem = document.getElementById('alertButton');
elem.addEventListener('click', function() {
  alert('Hello World');
});

id가 alertButton인 DOM 요소의 버튼을 클릭했을 때(이벤트), ‘Hello World’를 보여주는 alert가 실행되는 콜백함수가 이벤트 핸들러이다.


Event 종류

브라우저에 사용하는 이벤트는 다양하지만, 자주 사용되거나 대표적인 이벤트만 정리한다.


1. UI Event

Event Description
load 웹페이지의 로드가 완료되었을 때
unload 웹페이지가 언로드될 때(주로 새로운 페이지를 요청한 경우)
error 브라우저가 자바스크립트 오류를 만났거나 요청한 자원이 존재하지 않는 경우
resize 브라우저 창의 크기를 조절했을 때
scroll 사용자가 페이지를 위아래로 스크롤할 때
select 텍스트를 선택했을 때


load 이벤트를 사용하는 예제

1
2
3
window.addEventListener("load", function(event) {
  console.log("All resources finished loading!");
});


2. Keyboard Event

Event Description
keydown 키를 누르고 있을 때
keyup 누르고 있던 키를 뗄 때
keypress 키를 누르고 뗏을 때


keyup 이벤트를 사용하는 예제

1
2
3
4
5
inputTodo.addEventListener('keyup', function (e) {
  if (e.keyCode !== 13 || !inputTodo.value) return;
  addTodo(inputTodo.value);
  inputTodo.value = '';
});


3. Mouse Event

Event Description
click 마우스 버튼을 클릭했을 때
dbclick 마우스 버튼을 더블 클릭했을 때
mousedown 마우스 버튼을 누르고 있을 때
mouseup 누르고 있던 마우스 버튼을 뗄 때
mousemove 마우스를 움직일 때 (터치스크린에서 동작하지 않는다)
mouseover 마우스를 요소 위로 움직였을 때 (터치스크린에서 동작하지 않는다)
mouseout 마우스를 요소 밖으로 움직였을 때 (터치스크린에서 동작하지 않는다)


click 이벤트를 사용하는 예제

1
2
3
4
todoList.addEventListener('click', function (e) {
  if (!e.target || e.target.nodeName !== 'SPAN' || e.target.parentNode.nodeName === 'LABEL') return;
  removeTodo(e.target.dataset.id);
});


4. Focus Event

Event Description
focus 요소가 포커스를 얻었을 때
blur 요소가 포커스를 잃었을 때


focus와 blur 이벤트를 사용하는 예제

1
2
3
4
5
6
7
8
var form = document.getElementById("form");
form.addEventListener("focus", function( event ) {
  event.target.style.background = "pink";
}, true);

form.addEventListener("blur", function( event ) {
  event.target.style.background = "";
}, true);


5. Form Event

Event Description
input input 또는 textarea 요소의 값이 변경되었을 때
change select box, checkbox, radio button의 상태가 변경되었을 때
submit form을 submit할 때 (버튼 또는 키)
reset reset 버튼을 클릭할 때 (최근에는 사용 안함)


change 이벤트를 사용하는 예제

1
2
3
4
5
6
7
8
9
10
todoList.addEventListener('change', function (e) {
  toggleTodoComplete(e.target.id);
});

var toggleTodoComplete = function (id) {
  todos = todos.map(function (todo) {
    return todo.id === +id ? Object.assign({}, todo, { completed: !todo.completed }) : todo;
  } );
  renderTodos();
};


6. Clipboard Event

Event Description
cut 콘텐츠를 잘라내기할 때
copy 콘텐츠를 복사할 때
paste 콘텐츠를 붙여넣기할 때


copy 이벤트를 사용하는 예제

1
2
3
4
5
document.addEventListener('copy', function(e){
    e.clipboardData.setData('text/plain', 'Hello, world!');
    e.clipboardData.setData('text/html', '<b>Hello, world!</b>');
    e.preventDefault(); // We want our data, not data from any selection, to be written to the clipboard
});


7. Websocket Event

Event Description
open 웹소켓 연결이 되었을 때
message 웹소켓을 통해 메세지가 전달되었을 때
error 몇개의 메세지가 전달이 안된 상태로 웹소켓 연결이 끝났을 때
close 웹소켓 연결이 끝났을 때


8. CSS Animation Event

Event Description
animationstart CSS 애니메이션이 시작되었을 때
animationend CSS 애니메이션이 끝났을 때
animationiteration CSS 애니메이션이 반복될 때

이외에 다른 이벤트는 MDN에서 확인할 수 있다.