[Javascript] 스크롤 이벤트가 인식되지 않는 문제

 

무한 스크롤 처리를 하려는데 스크롤 이벤트가 인식되지 않는 문제가 있었다.

 

기존 코드

window.addEventListener('scroll', function() {
	console.log('test');
});

해결

3번째 인자로 true를 추가해주니 정상적으로 작동했다.

window.addEventListener('scroll', function() {
	console.log('test');
}, true);

 

---

# addEventListener의 세 번째 인자

1) true 

  - 이벤트 리스너가 캡처링 단계에서 호출됨

  - 이벤트가 하위 요소에 도달하기 전에 해당 이벤트를 가로채야 할 때

2) false (기본값)

  - 이벤트 리스너가 버블링 단계에서 호출됨

 

#  캡처링

  - 이벤트가 발생한 요소의 상위 요소에서부터 이벤트가 전파되는 방식

      : 가장 상위 요소에 등록된 이벤트 리스너부터 실행됨

      → 이벤트가 발생하면 가장 최상위 요소인 window에서부터 시작함

      → 이벤트가 발생한 요소까지 차례대로 이벤트가 전파됨

 

#  버블링

  - 이벤트가 발생한 요소에서 시작하여 상위 요소로 이벤트가 전파되는 방식

      : 가장 하위 요소에 등록된 이벤트 리스너부터 실행됨

      → 이벤트가 발생하면 이벤트가 발생한 요소에서부터 시작함

      → 가장 최상위 요소인 window까지 차례대로 이벤트가 전파됨

  - 기본적으로 버블링 방식으로 이벤트가 전파됨

 

 

---

 

일반적인 경우에는 기본값(false)으로 둬도 제대로 작동하는데,

이벤트의 기본적인 동작을 방해하는 CSS나 스크립트가 존재하는 경우에는 true로 적용해주면 이벤트가 더 잘 인식된다고 한다.

아마 퍼블리셔 분이 작업하신 부분에 그런 것들이 있었던 것 같다.