국비지원교육 25일차(5주차&자바스크립트)

이벤트

 

웹 브라우저가 알려주는 HTML 요소에 대한 사건의 발생을 의미한다.
예를 들어 마우스가 브라우저에 있는 어떤 상자안에 올려지거나 빠져나가거나 마우스를 클릭했다거나 이런 모든것들이 이벤트이다.  

 

이벤트리스너

이벤트가 발생할 때까지 기다린 후 이벤트에 응답하는 함수이다.

클릭을 하면 어떤 이벤트가 발생하는 상황이라고 한다면, 리스너는 그 클릭이 발생되는걸 알아야 응답이 가능하기 때문에 지켜보고 기다리다가 응답하는 함수라고 생각하면 된다.


쓰는 방법 : 마지막에 있는 이벤트전파방식은 생략도 가능하다
대상객체.addEventListener(이벤트명, 실행할이벤트리스너, 이벤트전파방식)

 

 

만약 script의 맨 아래줄에 btn2.removeEventListener("click", fn1); 이게 없었다면

버튼2를 클릭했을때 출력되는 결과는 "버튼2 클릭!!!" 이었을 것이다.

 

소스

 

원본모양

버튼2 클릭

 

이벤트리스너 사용이 안될때 오류 발생이 있을 수 있기 때문에 

Elements 에서 Event Listeners 를 확인해서 볼 수 있다.

 

버튼을 눌렀는데 사용이 잘되는지 확인한다.

 

 

이벤트전파
버블링 : 자식요소에서 발생한 이벤트가 부모요소로 전파되는 것

자식>부모 
캡처링 : 자식요소에서 발생한 이벤트가 부모 요소부터 시작하여 이벤트를 발생시킨 자식요소까지 도달하는 것
부모>자식

 

 

event.currentTarget : 이벤트리스너가 달린 요소

event.target : 실제 이벤트가 발생한 요소

 

event.currentTarget은 보면 부모요소까지 모두 나타난다.

event.target 은 보면 클릭이 된 영역만 나타난다.

 

 

 

event.stopPropagation : 버블링을 막는 요소

버블링은 자식요소에서 발생한 이벤트가 부모요소로 전파되는 것인데, 이러한 현상을 막아주는 요소이다.