JS-Do it! JS - #5일차

범위 :06. 이벤트와 이벤트 처리기 

 

이벤트 리스너로 이벤트 처리하기

요소.addEventListener(이벤트,함수,캡쳐 여부);

- 요소: 이벤트가 발생한 요소

- 이벤트: 이벤트 유형, 이벤트 이름을 그대로 사용 (on을 붙이지 않는다)

- 함수: 이벤트가 발생하였을 때 실행할 함수를 지정

- 캡쳐 여부: 이벤트 캡쳐링 여부, 기본값은 false

 

키보드 이벤트에서 키값 알아내기

키값은 event 객체에 담겨져있습니다.

event.code
event.key

 

이벤트 캡쳐링

웹 요소에서 이벤트가 발생하면 최상위 요소에서 시작해서 

이벤트가 발생한 요소까지 차례대로 이벤트가 전파되는 방식

 

 

실습

- 2개 이상의 선택지를 연결  : #majod > img 이런식으로

- 마우스 포인터를 이미지 위에 올려놓을 떄 mouseover

- 마우스 포인터를 이미지 밖에 올려놓을 때 mouseout