Browser Event, Event listener

Event

브라우저에는 많은 이벤트가 발생한다. 브라우저 화면의 크기를 마우로 조절할 떄도, 마우ㅡ로 이동하거나 무언가를 선택할 때도 이벤트가 발생한다.
HTML엘리멘트별로 어떤 이벤트가 발생했을때 특정 행위를 하고 싶다면 대상 엘리먼트를 찾고 어떤 일을 등록하면 된다. 그것을 자바스크립트로 구현할 수 있다.

 

이벤트 등록

addEventListener

 

addEventListener 함수의 두번째 인자는 함수다. 이 함수는 나중에 이벤트가 발생할 때 실행되는 함수로 Event handler 또는 Event listener라고 한다.
Event handler (Event listener) 콜백 함수는 이벤트가 발생할 때 실행된다.

 

 

event.js를 만들어서 test에 include 해주었다.

 

 

 

처음 실행하고 console을 보면 아무것도 볼 수 없다.
outside element를 클릭하면 이벤트가 실행되어 clicked가 출력이 된다.

 

 

 

이처럼 매개변수를 받을 수도 있다. 매개변수를 e로 받은 예시이다.

 

실행하고 console을 보면 엄청 많은 정보가 나온다. 클릭한 지점의 좌표값이 나오기도 하고, 타겟을 보여주기도 한다.

 

 

 

 

outside element를 클릭했을 때

outside라는 class name이 있고, tag name은 div라는 것을 알 수 있다.

 

innerText를 추가해보면

 

outside element도 출력이 된다.

 

이처럼 target 정보로 여러가지 정보를 얻을 수 있다.

 

 

이벤트 객체

이벤트 리스너가 실행될 때 어떤 이벤트에 의해서 실행됐는지, 이벤트 객체를 매개변수로 생성한다.

따라서 이벤트 리스너 안에서는 이벤트 객체를 활용해서 추가적인 작업을 할 수 있다.
가장 많이 쓰이는 것은 event.target이다. 해당 이벤트가 발생한 element를 가리킨다.
element도 객체이므로, 그 안에 classname이나 element가 가진 속성을 사용할 수 있다.

 

 

 

 

 

참고 : boostcourse    https://www.boostcourse.org/web316/lecture/16700?isDesc=false

웹 프로그래밍(풀스택)