addEventListener() 함수

 addEventListener() 함수는 이벤트가 발생한 요소에 이벤트 처리기를 연결해 주는 함수로, 웹문서에서 이미지나 텍스트 등 특정 요소뿐만 아니라 Document 객체나 Window 객체 어디에서든 사용할 수 있습니다.

문서에 있는 이미지 요소를 pic 변수에 지정했고, 미리 changePic() 함수와 originPic() 함수를 선언해 두었습니다. Pic 변수에 지정된 요소에 마우스 커서를 올려 놓으면 changePic() 함수를 실행하도록 하였습니다.

- 이벤트 유형

 처리할 이벤트 유형을 지정합니다. 단 이 함수에서 이벤트 유형을 지정할 때는 'on'을 붙이지 않고 'click'이나 'mouseover'처럼 이벤트만 사용합니다.

 

- 함수

 이벤트가 발생했을 때 실행할 명령을 나열하거나 따로 함수를 만들었다면 함수 이름을 지정합니다.

 

- 캡처 여부

 이벤트를 캡처링하는지 여부를 지정하는데 생략할 수 있습니다. true이면 캡처링, false이면 버블링한다는 의미인데, 기본 값은 false입니다. 이벤트 캡처링 DOM의 부모 노드에서 자식 노드로 이벤트가 전달되는 것이고, 이벤트 버블링은 DOM의 자식 노드에서 부모 노드로 이벤트가 전달되는 것입니다.

• 캡처링 - window 로부터 이벤트가 발생한 요소까지 이벤트를 전파한다.
• 버블링 - 이벤트가 발생한 요소부터 window 까지 이벤트를 전파한다.

 둘의 차이점은 단순히 방향입니다.

하위 => 상위, 상위 => 하위 개념으로 보면 됩니다.

 

default 값이 false 이기 때문에, 단순히 사용했다면 버블링을 통해 이벤트를 전파했을 것이다. true 로 설정해주면 캡처링을 통해 이벤트를 전파합니다.

 

HTML 문서를 열어 소녀 이미지 위로 마우스 커서를 올리면 소년 이미지로 바뀝니다 . 그리고 마우스를 치우면 원래 소녀 이미지로 돌아갑니다 .

 

실행한 화면

이 처럼 addEventListener() 함수를 사용하면 하나의 요소에 여러 개의 이벤트 처리기를 연결할 수 있습니다 .