문서 객체 모델(DOM) 9 - DOM에서 이벤트 처리하기 1 : DOM 요소에 함수 연결하기와 addEventListener() 메서드 사용하기

웹 문서에서 이벤트가 발생하면 이벤트 처리기를 연결해야 한다. HTML 태그에서 이벤트 처리기를 연결할 수도 있지만 태그와 스크립트 소스가 섞여 있어서 복잡한 프로그램에서 적합하지 않다. 이럴 때 DOM에서 이벤트 처리기를 연결하면 HTML 태그와 스크립트 소스를 분리할 수 있다.

---

 

 

 

 

DOM 요소에 함수 직접 연결하기

이벤트 처리기 함수가 간단하다면 DOM 요소에 직접 연결할 수 있다. 예를 들어 다음 예제는 img 요소를 가져와 변수에 저장한 후 onclick을 사용해 변수에 이벤트 처리기(함수)를 직접 연결한다. 이미지를 클릭하면 알림 창이 나타나지만 이미지 외의 다른 곳을 클릭하면 실행되지 않는다.

 

이미지를 클릭하면 알림 창 표시하기

 

 

---

 

 

 

 

 

함수 이름을 사용해 연결하기

이벤트가 발생했을 때 실행할 함수를 따로 정의해 놓았다면 함수 이름을 사용해 연결할 수 있다. 이 경우에는 함수 이름 다음에 괄호를 추가하지 않는다.

다음 예제는 이미지를 cup 변수로 저장한 후 click 이벤트가 발생했을 때 changePic() 함수를 실행한다.

 

이미지를 클릭하면 함수 실행하기

 

 

 

 

이미지를 클릭하면 이렇게 파란색 컵으로 바뀐다.

---

 

 

 

 

 

DOM의 event 객체 알아보기

DOM에는 이벤트 정보를 저장하는 event 객체가 있다. 이 객체에는 웹 문서에서 이벤트가 발생한 요소가 무엇인지, 어떤 이벤트가 발생했는지 등의 정보가 들어 있다.

다음은 이미지에 발생한 이벤트의 유형과 위치를 알림 창으로 보여 주는 예제이다. 여기에서 img 요소를 클릭하면 그 위치를 확인하기 위해 event 객체를 함수의 인수로 사용한다.

 

이미지에서 클릭한 위치 알아내기

 

 

 

다음 표는 event 객체의 주요 프로퍼티와 메서드를 정리한 것이다.

 

 

 

event 객체에는 이벤트 정보만 들어있다. 만약 이벤트가 발생한 대상에 접근하려면 이벤트 처리기에서 예약어 this를 사용해야 한다. 다음 예제처럼 클릭한 이미지의 파일 경로를 알고 싶다면 this.src를 사용한다.

 

this 예약어 사용하기

 

---

 

 

 

 

 

addEventListener() 메서드 사용하기

지금까지 살펴본 이벤트 처리기는 한 요소에 하나의 이벤트 처리기만 연결할 수 있었다. 하지만 다음과 같이 addEventListener() 메서드와 event 객체를 사용하면 한 요소에 여러 이벤트 처리기를 연결해 실행할 수 있다. addEventListener() 메서드는 끝에 세미콜론을 꼭 붙여야 한다.

 

 

다음은 이미지 위로 마우스 포인터를 올려놓으면 다른 이미지로 바뀌었다가 내려놓으면 다시 원래 이미지로 돌아오는 예제이다. addEventListener() 메서드를 사용해서 changePic() 함수와 riginPic() 함수를 이벤트 처리기로 사용한다.

 

마우스 포인터를 올리면 이미지 바꾸기

 

 

 

 

이 예제에서는 함수 changPic()과 originPic()을 따로 선언하고 사용했다. 하지만 단순히 이벤트를 처리하는 함수라면, 즉 따로 다른 곳에서 다시 사용하는 함수가 아니라면 다음처럼 메서드 안에서 함수 표현식으로 사용하는 경우가 많다.

 

아래 그림처럼 addEventListener() 메서드에서 changePic() 함수가 있던 자리에 함수 선언 부분을 그대로 옮기면 되는데, 이때 함수명은 제외한다. 마찬가지로 originPic() 함수도 옮긴다.

 

 

 

 

이때 addEventListener() 메서드 안에 함수를 함께 선언하면 특정 이벤트에서 어떤 명령을 실행하는지 한눈에 확인할 수 있어서 더욱 편리하다.

 

메서드 안에서 함수 선언하기

---

 

 

 

 

학습을 마치고

이벤트 처리기가 어떻게 동작되는지 자세히 배울 수 있는 시간이었다. 메서드를 바꾸는 문제는 아직은 좀 이해가 되지 않지만 그래도 이벤트 리스너를 사용하는 방법을 알게 되었다.

이 단원은 분량이 좀 많아서 둘로 나누어 나머지 부분을 다음 포스트에 이어서 정리해보기로 했다.