JavaScript 이벤트

Event

브라우저에서는 많은 이벤트가 발생한다.

화면의 크기를 마우스로 조절할 때, 스크롤을 할 때, 마우스로 이동하거나 무언가를 선택할 떄도 이벤트가

발생한다.

HTML엘리먼트별로 어떤 이벤트가 일어났을 때 특정행위를 하고싶다면 대상 엘리먼트를 찾고

자바스크립트로 구현하면 된다.

이벤트 등록

이벤트를 등록하기 위해 표준적으로 addEventListener함수를 사용한다.

여기서 addEventListener함수의 두번째 인자는 함수이다. 이 함수는 나중에 이벤트가 발생할 때

실행되는 함수로 이벤트핸들러 또는 이벤트리스너라고 한다.

실습을 통해 addEventListener가 작동하는 모습을 확인해보자.

이렇게 html코드를 작성한 후 querySelector을 통해 속성을 찾아

이벤트를 발생시키는 함수를 넣어주면

클릭을 했더니 다음과 같이 console 창에 결과가 잘 뜨는것을 확인할 수 있다.

또한 이벤트 객체를 통해 많은 정보를 얻어낼 수도 있는데 

다음과 같이 함수의 매개변수로 e를 넣어주어 출력하면

이렇게 많은 이벤트 정보를 얻을 수 있다.

그 중에서 다음과 같이 target속성이 가진 여러가지 정보를 얻어낼 수도 있다.

이벤트의 활용에대한 참고 링크

https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#Event_handler_properties

https://developer.mozilla.org/en-US/docs/Web/Events

출처 : edwith

https://www.edwith.org/boostcourse-web/lecture/16700/