자바스크립트 요소에 이벤트 부여하기, addEvenetListener()

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


eventTarget.addEventListener(event, function, bubbling or Capturing);


event // 이벤트 타입을 나타냅니다.
function // 동작할 콜백함수 입니다.
bubbling or Capturing // 기본값은 false이며 false인 경우 bubbling으로 동작합니다. 반대로 true인 경우 Capturing으로 동작하게 됩니다.


@ 이벤트 버블링 캡처링

버블링은 내부에서 외부로 동작하며 a 태그가 먼저 클릭되고 다음에 p 태그가 동작합니다.

캡처링은 버블링과 반대로 외부에서 내부로 동작합니다. p 태그가 먼저 동작하고 그 뒤에 a 태그가 실행됩니다.



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


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

# attachEvent() 메소드

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