[Javascript] 6. 이벤트 처리

✔︎ 이벤트 처리기 등록

이벤트 주도형 프로그램에서 이벤트가 발생했을때 실행할 함수를 등록하는 방법에 대해서 알아봅니다.

 

🚀  HTML 요소의 이벤트 처리기 속성에 설정

HTML과 자바스크립트 소스가 섞여 가독성 💩

특정 요소에 하나의 이벤트만 등록 가능

 

<input type="button" onClick="eventFunc()">

 

🚀  Dom 요소 객체의 이벤트 처리기 프로퍼티에 설정

HTML과 자바스크립트 소스를 분리해서 작성 가능

하지만 위와 마찬가지로 특정 요소에 하나의 이벤트만 등록 가능

 

var btn = document.getElementbyId("button");

btn.onClick = eventFunc();

 

🚀  addEventListener 메소드로 설정

같은 요소에 여러개의 이벤트 등록 가능

버블링 및 캡쳐링 단계에서도 활용 가능 => Dom 요소 객체의 이벤트 처리기 활용이 무조건 버블링 단계 이벤트만 캡쳐 가능

removeEventListener, stopPropagation, preventDefault를 활용한 정밀한 이벤트 전파 가능

 

var btn = document.getElementbyId("button");

btn.addEventListener("click", eventFunc, false); => false : 버블링(기본) / true : 캡쳐링

 

 

✔︎ 이벤트 전파

앞서 addEventListener 메소드를 이야기 하면서 갑자기 버블링 및 캡쳐링이란 용어가 나왔는데 해당 용어에 대해 알아보겠습니다.

 

🚀  이벤트 전파 단계

   👻  캡쳐링 단계

   이벤트가 Window 객체에서 출발해서 DOM 트리를 타고 이벤트 타깃으로 전파되는 단계

   👻  타깃 단계

   이벤트가 이벤트 타깃에 전파되는 단계로 이벤트 타깃에 등록된 이벤트 처리기나 이벤트 리스너가 실행

   👻  버블링 단계

   이벤트 타켓에서 출발해서 DOM트리를 타고 Window 개체로 전파되는 단계

   참고로 focus나 blur 와 같은 이벤트는 그 요소에서만 필요한 이벤트이므로 버블링 진행 ❌

 

   만일 이벤트 처리기를 디폴트( false )로 등록했다면 이벤트 처리기는 타깃 단계와 버블링 단계에서 모두 실행됩니다.

   반대로 addEventListener의 3번쨰 인자를 true로 설정 시 캡쳐링 단계와 타깃 단계에서만 실행됩니다.

 

 

✔︎ 이벤트 전파 취소

자식 요소에서 발생한 이벤트는 부모 요소에도 전파됩니다. 이로 인해 불필요한 동작이 발생 할 수 있습니다.

 

🚀  event.stopPropagation()

해당 함수를 호출하면 이벤트가 그 다음 요소로 전달되는 것을 막습니다.

이벤트를 등록한 요소개체의 다음 개체로의 전파를 막습니다. ( 다른 이벤트도 모두 막아버림 )

 

🚀  event.stopImmediatePropagation()

해당 함수를 호출하면 이벤트가 그 다음 요소로 전달되는 것을 막습니다. 추가적으로 그 이벤트에 등록된 다른 이벤트 리스너까지 멈춥니다.

 

🚀  event.preventDefault()

웹 브라우저에서 기본적으로 구현된 이벤트들을 취소합니다.

 

 

✔︎ 이벤트 위임

이벤트 위임이란 이벤트 리스너를 부모 요소에 등록하는 것입니다. 

즉, 하위 요소에서 이벤트가 발생하였을 때 이벤트 버블링으로 인해 어차피 부모 요소에도 이벤트가 전파되므로 사용하는 메모리 양이나 소스를 간결하게 작성하기 위해 부모요소에만 이벤트를 추가하는 것을 의미합니다.

 

🚀  장점

이벤트가 발생하는 요소가 변경이 있을때 마다 리스너를 변경할 필요가 없다.

 

✔︎ Debounce & Throttle