Written by Lee Jongseo
on April 20, 2021

Code Piece - 1

Click 시, 특정 스타일 on & off 하기

addEventListner('click', cb)
classList.toggle('클래스이름')

이용

HTML 작성

<ul id="nav">
    <li>
        <button>1</button>
    </li>
    <li>
        <button>2</button>
    </li>
    <li>
        <button>3</button>
    </li>    
</ul>

스타일 정의

/* style.css */

/* <li class="on"> */
li.on {
    background: orange;
}

자바스크립트 정의

const navElem = document.querySelector("#nav")

// event bubbling을 이용하여 parent 요소에 이벤트 리스너 등록
navElem.addEventListener('click', e => {
    const targetElem = e.target
    if (targetElem.tagName === "BUTTON") {
        // parentElement를 통하여 부모 요소에 접근할 수 있다.
        targetElem.parentElement.classList.toggle("on")
    }
})

위의 코드는 클릭한 요소에 on 클래스를 toggle하는 기능을 한다.

만약 한 요소에만 on를 부여해야 한다면 어떻게 해야할까?

// 1. 먼저 자식 요소를 배열에 담는다.
// navItems = [li, li, li, ...]
const navItems = Array.from(navElem.children)

// 2. 클릭한 요소의 인덱스를 찾는다.
navElem.addEventListener('click', e => {
    // ...생략

    // targetElem = <button>...</button>
    // targetElem.parentElement = <li>...</li>
    const targetIndex = navItems.indexOf(targetElem.parentElement)
    // 3. for loop을 통해 targetIndex 이 외 요소의 클래스에 접근하여 'on'을 remove한다.
    for (let i =0; i< navItems.length; i++) {
        if (i !== targetIndex) {
            navItems[i].classList.remove("on")
        }
    }

})

throttle

delay 시간 만큼 event 발생을 지연시킨다.

const throttle = (func, delay) => {
  let throttled = false;
  return (...args) => {
      // delay 시간 동안 throttle 변수는 true이므로
      // 함수가 호출되지 않는다.
    if (!throttled) {
      throttled = true;
      // delay시간 동안 타이머를 작동한다.
      setTimeout(() => {
          // 함수를 호출한다.
        func(...args);
        // 함수 호출 후 throttled에 false를 할당하여 다음 이벤트 발생을 대기한다.
        throttled = false;
      }, delay);
    }
  };
};

window.addEventListener("scroll", throttle(e => {
    // scroll 이벤트가 발생후 처음 한번 호출하고
    // 이 후 1초마다 호출이 일어난다.
    console.log(e.target)
}), 1000)

lodash의 _.throttle를 이용하자.

👈 👉 Top