JavaScript 자바스크립트 이벤트 리스너(eventListener)

 

 

 

나.. 이벤트리스너 모르네

 

 

✍ addEventListener

EventTarget 인터페이스의 메서드.
지정한 유형의 이벤트를 수신할 때마다 호출할 함수를 설정한다.

= 호출 시 인자를 전달받는다.

일반적인 대상
Element, Document, Window지만 XMLHttpRequest 같이 이벤트를 지원하는 모든 객체가 대상이 될 수도 있다.

target.addEventListener('click', function(){})

1. 이벤트명을 나타낸 문자열
2. 함수 (콜백함수)
3. 옵션 ( capture, once, passive, signal ... )

기존 이벤트 핸들러 (onclick)등을 사용하는 것에 비해 addEventListener을 사용하면

1. 이전에 추가한 이벤트 핸들러를 제거할 수 있응 대응 메소드 존재
2. 같은 리스너(타겟)에 대해 다수의 핸들러 등록 => 라이버르리, JS모듈 등, 확장 코드와 충돌하지 않고 동작해야 하는 코드에 중요
3. 추가옵션 사용 가능
4. 어떤 이벤트 전파 단계(캡처링 vs 버블링)에 동작해야 하는지 조절 가능

이러한 장점이 있다

 

 

✅ 이벤트 객체
추가적인 기능과 정보 제공을 위해 이벤트 핸들러에 자동으로 전달되는 데이터. event, e로 많이 쓴다
target.addEventListener('click', (e)=>{})
이벤트 발생 시 이벤트 핸들러가 호출될 때 이벤트 객체가 전달되는데, 이 때 매개변수(e)를 통해 이벤트 객체를 받아올 수 있다 => e.target

 

✅ 옵션

한 번만 사용되는 이벤트를 만들기 위해서는
3번째 인자로
{ once: true }를 전달해 주면 된다.
이런 식으로 옵션을 전달하면 됨.

div.removeEventListener('click', helloFc)를 쓰는 것도 가능

 

✅ 이벤트 버블링

이벤트 발생 시 해당 이벤트가 발생한 요소의 부모 -> 조부모 -> 최상위 요소까지 이벤트가 전달되는 현상

 

만약 document 안에 중첩된 네모 (div)들이 있으면
모든 네모들에 addEventListener을 걸어줬을 때, 가장 가운데 중첩된 네모를 클릭하면 모든 EventListener가 호출된다. document까지

 

✅ 이벤트 캡쳐링

버블과 작동 방향이 다르다. 상위 요소부터 이벤트 객체를 찾아간다.

 

✅ 이벤트 위임

페이지에 동적인 요소를 추가할 때 매우 중요.

이벤트 버블링/캡쳐링 특성을 활용한 것.

각각의 요소에 이벤트를 하나하나 지정할 것 없이 부모 요소에 이벤트를 주어 메모리를 절약한다.

document.addEventListener('click',e => {
    if(e.target.matches('div')){
        console.log('hi')
    }
})

안에 들어있는 div에 addEventListener을 각각 달아주지 않고 상위 요소에서 이벤트를 지켜봄으로서 이벤트를 위임할 수 있다.

 

 

 

👨‍💻
내가 알고싶었던 내용은 React에서 document.addEventListener()을 하는 방법인데..
기본적으로 useEffect를 써서 해야 한다는건 알고 있어도 어떻게 target을 가져와야 하는지 이 부분이 항상 헷갈려서 js event listener부터 다시 공부해보려고 작성했다.