간단한 js 무한스크롤과 이벤트위임

오늘은 가볍게 js에대해 정리하고자 한다 

const button = document.querySelector("button");
const clickMe = () => {
  alert("hi");
};
button.addEventListener("click", clickMe);
setTimeout(() => {
  button.removeEventListener("click", clickMe);
  //리스닝 설정을 특정해서 지우는것이기 때문에 이벤트이름과 함수가 같다
}, 2000); 특정해서 지우는것이기 때문에 이벤트이름과 함수가 같다
}, 2000);

 

 

익명의 함수는 안된다 ❌⇒완전히 다른 두개의 객체이기 때문이다

clickMe.bind(this)⇒bind 도 새로운 함수 객체를 만들기 때문에 ❌

⇒const bindFunc=clickMe.bind(this) 변수에 할당해서 사용해야한다

const button = document.querySelector("button");
button.addEventListener("click", () => alert("hi"));
setTimeout(() => {
  button.removeEventListener("click", () => alert("hi"));

}, 2000);

 

 

 

여러요소 이벤트 핸들러 등록시

const buttons = document.querySelectorAll("button");
const clickMe = (e) => {
  e.target.disabled = true;
};
buttons.forEach((btn) => btn.addEventListener("click", clickMe));

e.relatedTarget  마우스가 나간 곳에 객체(엘리먼트) 를 알려준다.⇒마우스 오버하고 아웃했던 곳

주로 마우스 이벤트(mouseover mouseout,mouseenter, mouseleave)와 함께 사용되며, 사용자가 이동한 요소에 대한 정보를 가져오는 데 사용된다 모든 브라우저가 모든 이벤트에 대해 e.relatedTarget 속성을 지원하지는 않으며, 경우에 따라 값이 **null**일 수 있다

 

 

무한스크롤기초

let curElementNumber = 0;
 
function scrollHandler() {
    const distanceToBottom = document.body.getBoundingClientRect().bottom;
 //함수 내에서 먼저 뷰포트(현재 보고 있는 것의 왼쪽 상단 모서리)와 
//(단순히 현재 보이는 영역 사이의 총 길이가 아닌) 페이지 끝 사이의 총 길이를 측정
    if (distanceToBottom < document.documentElement.clientHeight + 150) {
        const newDataElement = document.createElement('div');
        curElementNumber++;
        newDataElement.innerHTML = `<p>Element ${curElementNumber}</p>`;
        document.body.append(newDataElement);
    }
}
 
window.addEventListener('scroll', scrollHandler);

1. client- : 눈에 보이는 content + padding의 크기값
2. offset- : 눈에 보이는 content + padding + border + scrollbar의 크기값
3. scroll- : 눈에 보이지 않는 영역까지 포함한 전체 content + padding의 크기값

 

getBoundingClientRect() 엘리먼트의 크기와 뷰포트에 상대적인 위치 정보를 제공하는 DOMRect 객체를 반환

document.documentElement.clientHeight  잠재적인 스크롤바를 고려하므로 window.innerHeight보다 선호된다

페이지 콘텐츠 끝까지의 길이가 150px 미만인 경우 if 블록(새 데이터를 추가하는 곳)으로 만든다

if 문 내부에서 새 <div> 요소를 생성하고 이 요소를 <p> 요소로 채워 차례로 증가되는 카운터 값을 출력한다

버블링 캡쳐링

 

<div>
  <button>Click me!</button>
</div>

div.addEventListener(
  "click",
  (e) => {
    console.log(e, "div");
  },
  true//옵션
);

 

 

세번째 옵션은 이벤트 캡처링(capturing)을 나타낸다 ⇒이벤트가 발생한 요소보다 더 상위 요소부터 이벤트가 발생하는 것을 의미

**button** 요소를 클릭하면 click 이벤트가 발생한다 . 이벤트 캡처링을 사용하지 않으면 이벤트는 **button** 요소에서 발생한 것으로 간주되지만 이벤트 캡처링을 사용하면 div 요소에서부터 이벤트가 발생하여**button** 요소까지 전파되기 때문에 이벤트가 div 요소에서 발생한 것으로 간주되지만

세번째 옵션으로 true를 설정하면 이벤트 캡처링을 사용하여 div 요소에서부터 click 이벤트가 발생하도록 할 수 있다

캡처링 사용하지 않는다면 세번째 옵션은 생략하거나 **false**를 설정 한다

 

 

const button = document.querySelector("button");
button.addEventListener("click", (e) => {
  console.log("button clicked");
});
//button을 클릭했을 때 이벤트가 button에서 시작하여 div로 전파된다
//=>e.stopPropagation()를 호출
const button = document.querySelector("button");
button.addEventListener("click", (e) => {
  console.log("button clicked");
  e.stopPropagation();
});

const div = document.querySelector("div");
div.addEventListener("click", (e) => {
  console.log("div clicked");
});

**e.stopPropagation()**를 호출하면 이벤트가 **button**에서 중단되어 **div**로 전파되지 않아 div 요소에 등록된 이벤트 핸들러는 호출되지 않는다

*mouseenter, mousemove 이벤트는 보통 전파하지 않는다(buble:false)

이벤트 위임

<ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 4</li>
      <li>Item 5</li>
    </ul>

const listItem = document.querySelectorAll("li");
listItem.forEach((item) => {
  item.addEventListener("click", (e) => {
    e.target.classList.toggle("highlight");
  });
});

 

 

다수 리스너를 추가하는것은 번거롭고 성능과 메모리 측면에서도 좋지않다

const list = document.querySelector("ul");
list.addEventListener("click", (e) => {
  e.target.classList.toggle("highlight");
});

단하나의 이벤트 리스너로 작동 ,이벤트 전파를 활용하여 상위 요소에 추가했기 때문에 ⇒이벤트 위임패턴

 

 

 

복잡한 구조일때 사용하는 e.target.closet()

   <ul>
      <li class="parent">
      <button>Item 1</button>
      <p>some text</p>
      </li>
      <li class="parent">
      <button>Item 2</button>
      <p>some text</p>
      </li>
      <li class="parent">
      <button>Item 3</button>
      <p>some text</p>
      </li>
      <li class="parent">
      <button>Item 4</button>
      <p>some text</p>
      </li>
    </ul>

 

이벤트 객체(e)가 발생한 요소를 기준으로, 해당 요소의 가장 가까운 상위 요소를 반환한다

**button**요소에서 **click**이벤트가 발생하면, **e.target**은 해당 **button**요소를 가리키게 된다

이때, **e.target.closest('.parent')**를 호출하면, 가장 가까운 **.parent**클래스를 가진 요소인 **li.parent**를 반환한다