안녕하세요^^
자바스크립트를 사용한 이벤트 사용에 대하여 알아보고자합니다. 먼저 자바스크립트에서 말하는 이벤트는 무엇일까요?

# 자바스크립트 이벤트


자바스크립트에는 정해진 동작 또는 계획에 의하여 이벤트를 발생시킬 수 있습니다. 이 이벤트는 미리 등록한 콜백함수를 실행하게 되는데 자바스크립트에 사용 가능한 이벤트 트리거.. 예를들어 아래의 행동에 의하여 동작할 수 있습니다.

클릭 click
더블클릭 dbclick
마우스오버 mouseover
마우스아웃 mouseout
드래그 dragstart
타임아웃 setTimeout
타임인터벌 setInterval
등등등 ...

그 외에도 여러가지 이벤트를 동작할 수 있습니다. 이런 이벤트는 대부분 키보드, 마우스, 태블릿 등의 디바이스를 조작하는 것들이 대부분 이지만 게임패드나 리더기 등등에 반응하는 이벤트도 있다는 점을 참고하세요.

? 트리거(trigger)
; 트리거는 말 그대로 방아쇠입니다. 방아쇠를 당겨야 총이 발사하는 것처럼 이벤트는 트리거를 통해 비로서 시작, 실행되게 됩니다.

이처럼 트리거가 동작하면 예약된 함수인 이벤트 함수가 동작하게됩니다. 간단한 예제를 만들어보면서 자세히 알아보겠습니다.


# 클릭시 클릭되었음을 알리는 문구 만들기
너무 간단한 예제이지만 가장 이해하기 쉬운 예인 것 같습니다. 코드도 짧구요^^ 우리는 다음과 같은 작은 기능을 구현하려 합니다.

- 버튼을 생성
- 버튼에 클릭 이벤트를 추가
- 클릭시 "클릭"이란 문구를 출력

매우 간단하죠? 그럼 차근차근 알아보겠습니다.

- 버튼을 생성

<button>Click</button>



- 버튼에 클릭이벤트를 추가

클릭에 동작하는 버튼을 만들기 위하여 클릭이벤트를 추가하고 이벤트 핸들러인 이벤트함수를 추가합니다. 이벤트 핸들러(event handler)는 이벤트가 발생할 경우 이를 전달받는 함수를 말합니다.

<button onclick="alert("Click!")";>


DOM 태그에 이벤트를 만드는 onclick 속성을 추가하는 방법이 있습니다.

btnEle = document.getElementById("btn");
btnEle.addEventListner("click", function() {
  alert("Click!");
});


위 방법은 순수 자바스크립트를 사용하는 방법입니다. 이제 해당 코드를 실행하고 클릭하면 해당하는 메시지를 띄우게됩니다.


위 예제는 매우 간단하지만 대부분의 이벤트는 이처럼 동작하게됩니다. 여기까지 이벤트를 추가하고 실행하는 방법을 알아보았습니다. 다음에는 또 다른 예제를 알아보도록 하겠습니다^^


참고로 실제 웹어플리케이션을 만들때는 고려할 사항이 더욱 많습니다.
  • 이벤트 추가 외에 제거하는 방법
  • 이벤트 등록시 성능 개선 부분
  • 이벤트에 적은 리소스를 사용하는 방법
  • 이벤트의 완료 후 메모리에 남지 않도록 하기
  • 이벤트 간섭, 캡쳐링 및 버블링 고려하기

이처럼 복잡한 웹어플리케이션을 만들기 위해서는 작은 기능, 이벤트도 매우 많은 부분을 고려하고 만들게됩니다.