자바스크립트 메소드 중 하나인 addEventListener()에 대하여 알아보자. addEventListener()를 사용하면 선택한 요소에 특정한 이벤트를 발생시키고 뒤에 따르는 함수를 실행하게 해주는 매우 유용한 이벤트 메소드이다.


eventTarget.addEventListener(이벤트 타입, function() { 실행할 내용 }, 선택옵션);


아래는 실제 이벤트를 사용하는 간단한 예제이다. 먼저 클릭(click) 이벤트를 발생시키는 예제에 대하여 알아보자. 우선 이벤트의 대상이 될 html 코드부터 살펴보자.

<div>
   <span id="button">Click</span>
</div>

아주 간단한 예제부터 알아보겠다. 위 예제에서는 만약 click 버튼을 클릭할 경우 alert()을 실행시켜 경고창이 나오도록 만드는 매우 간단한 예제를 알아보고자 한다. 이를 구현할 경우 스크립트 코드는 아래와 같이 될 것이다.

<script>
var buttonEle = document.getElementById('button');
buttonEle.addEventListener('click', function() { alert(); }, false);
</script>


# attachEvent() 메소드

IE 9 이전 버전의 경우 attachEvent 메소드를 사용해야만 한다. 사용방법은 크게 다르지 않으나 만약 위 코드를 attachEvent() 메소드를 사용할 경우 다음과 같이 작성할 수 있을 것이다.

<script>
var buttonEle = document.getElementById('button');
buttonEle.attachEvent('onclick', function() { alert(); };
</script>