[JS]Event Bubbling, IntersectionObserver

Apple Ipad 10.2 홈페이지 만들기 프로젝트를 진행하며 알게된 것들을 기록합니다.

GitHub Link: Link

Page Link :Page
(가끔 들어가실때 위험한 페이지라고 뜨는 이유는 검색엔진이 정식 홈페이지와 너무 똑같아서, 피싱사이트라고 의심해서 뜨는 것이니 안심하고 들어가셔도 됩니다 😀)

Event Bubbling

한 요소에 이벤트(Click, Scroll...etc) 가 발생시
이 요소에 할당된 핸들러가 동작하며,
그 요소의 부모요소의 핸들러도 동작하게되며 최상단 요소까지 핸들러가 동작하는 현상

<div class="first">
  1
  <div class="second">
    2
    <div class="third">3</div>
  </div>
</div>

const divEls = document.querySelectorAll("div");

const clickEvent = (e) => {
  console.log(e.currentTarget.className);
};

divsEls.forEach((div) => {
  div.addEventListener("click", clickEvent);
});

라는 코드가 있을때,
<div class="third">3</div> 부분에 클릭 이벤트를 발생시키면
콘솔에 3만 출력되는 것이 아니라 3, 2, 1 순서로 출력이 된다

이것이 바로 Event Bubbling

stopPropagation()

🚨 만약 내가 3 만 출력하고 싶다면?(이벤트 버블링을 멈추고 싶다면?)

const clickEvent = (e) => {
  e.stopPropagation();
  console.log(e.currentTarget.className);
};

이런식으로 stopPropagation 속성을 통해 3만 콘솔에 출력할 수 있다.

Event Capturing

이벤트 캡쳐링은 상위 요소의 이벤트가 먼저 실행되도록 캡쳐 옵션을 전달하는 것이다

divsEls.forEach((div) => {
  div.addEventListener("click", clickEvent, { capture : true});
});

캡쳐 옵션을 전달하게 되면, 이 옵션이 전달된 부분부터 동작하게 되는데,
div 1 부터 내려오기 때문에 1, 2, 3 순서대로 출력이 가능하게 된다.

IntersectionObserver

요소의 가시성을 판별하는 옵션, 즉, 유저가 바라보는 ViewPort 와, 설정한 요소의 교차점(겹치는 부분)을 관찰하여, 그 요소가 ViewPort 내부로 들어왔는지를 판별

 const io = new IntersectionObserver(function(entries) {
  entries.forEach(function(entry){
    if(!entry.isIntersecting) {
      return
    }
     /*  
    만약 target이 viewport 내부로 들어왔다면, show 클래스를 붙여서
    가렸던 것을 보여주는 등의 방법으로 활용이 가능하다.
    */
    entry.target.classList.add('show')
  })
})
 
 
/* 
가렸던 info에 가시성을 판별하여 forEach를 통해 각 요소에 .show 클래스를 붙여,유저들에게 보일 수 있도록 하는 기능을 구현함.
*/
const infoEls = document.querySelectorAll('.info')
infoEls.forEach(function(el){
  io.observe(el)
})

참고

1. 이벤트 버블링: Link
2. IntersectionObserver : Link