https://joshua1988.github.io/web-development/javascript/event-propagation-delegation/
이벤트 전파(propagation)
Dom 노드에서 발생한 이벤트는 DOM 트리를 통해 전파된다.
이벤트가 전파되는 방향에 따라 3단계로 구분한다.
- 캡처링 단계 : 이벤트가 상위 요소에서 하위 요소 방향으로 전파
- 타깃 단계 : 이벤트가 이벤트 타깃에 도달
- 버블링 단계 : 이벤트가 하위 요소에서 상위 요소 방향으로 전파
브라우저는 기본적으로 이벤트 버블링 단계에서 이벤트를 캐치한다.
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<div>Click me</div>
</body>
<script>
const html = document.querySelector("html");
const body = document.querySelector("body");
const div = document.querySelector("div");
html.addEventListener("click", () => console.log("HTML"));
body.addEventListener("click", () => console.log("BODY"));
div.addEventListener("click", () => console.log("DIV"));
</script>
</html>결과:
DIV
BODY
HTMLaddEventListener 메소드의 세번째 인수로 [, useCapture] 자리에 true 를 넣어주면 캡처링 단계에서도 이벤트 객체를 캐치할 수 있다. (기본값은 false)
html.addEventListener("click", () => console.log("HTML"), true);
body.addEventListener("click", () => console.log("BODY"), true);
div.addEventListener("click", () => console.log("DIV"));
HTML
BODY
DIV
이벤트 위임(delegation)
하위 요소에 각각 이벤트를 붙이지 않고 상위 요소에서 하위 요소의 이벤트들을 제어하는 방식
부모 요소에 이벤트를 주는 것.
preventDefault
기본 이벤트 동작을 못하게 하는 메소드
이벤트 버블링을 반대로: useCapture 옵션에 true
이벤트 버블링을 중지시키는 방법: stopPropagation
이벤트 전파를 중지시키는 메소드
이벤트가 과도하게 호출되어 성능에 문제를 일으킬 경우
scroll, resize, mousemove 같은 이벤트는 짧은 시간 간격으로 연속해서 발생. 이벤트가 과도하게 호출되어 성능에 문제를 일으킬 수 있음.
-> debounce, throttle 기법 사용
디바운스
디바운스는 짧은 시간 간격으로 이벤트가 연속해서 발생하면 이벤트 핸들러를 호출하지 않다가 일정 시간이 경과된 이후에 이벤트 핸들러가 한 번만 호출되도록 함.
짧은 시간 간격으로 발생하는 이벤트를 그룹화해서 마지막 한 번만 이벤트 핸들러가 호출되도록 함.
이를 통해 서버에부하를 줄일 수 있다.
<!DOCTYPE html>
<html>
<body>
<input type="text" />
<div class="msg"></div>
<script>
const $input = document.querySelector("input");
const $msg = document.querySelector(".msg");
const debounce = (callback, delay) => {
let timerId;
// debounce 함수는 timerId를 기억하는 클로저를 반환한다.
return (event) => {
// delay가 경과하기 이전에 이벤트가 발생하면 이전 타이머를 취소하고
// 새로운 타이머를 재설정한다.
// 따라서 delay보다 짧은 간격으로 이벤트가 발생하면 callback은 호출되지 않는다.
if (timerId) clearTimeout(timerId);
timerId = setTimeout(callback, delay, event);
};
};
// debounce 함수가 반환하는 클로저가 이벤트 핸들러로 등록된다.
// 300ms보다 짧은 간격으로 input 이벤트가 발생하면 debounce 함수의 콜백 함수는
// 호출되지 않다가 300ms 동안 input 이벤트가 더 이상 발생하면 한 번만 호출된다.
$input.oninput = debounce((e) => {
$msg.textContent = e.target.value;
}, 300);
</script>
</body>
</html>쓰로틀
쓰로틀은 짧은 시간 간격으로 이벤트가 연속해서 발생하더라도 일정 시간 간격으로 이벤트 핸들러가 최대한 한 번만 호출되도록 한다.
쓰로틀은 짧은 시간 간격으로 연속해서 발생하는 이벤트를 그룹화해서 일정 시간 단위로 이벤트 핸들러가 호출되도록 호출 주기를 만든다.
scroll 이벤트는 사용자가 스크롤할 때 짧은 시간 간격으로 연속해서 발생한다.
이처럼 짧은 시간 간격으로 연속해서 발생하는 이벤트의 과도한 이벤트 호출을 방지하기 위해 호출주기를 만든다.
무한 스크롤ui 구현등에 사용
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 300px;
height: 300px;
background-color: rebeccapurple;
overflow: scroll;
}
.content {
width: 300px;
height: 1000vh;
}
</style>
</head>
<body>
<div class="container">
<div class="content"></div>
</div>
<div>
일반 이벤트 핸들러가 scroll 이벤트를 처리한 횟수:
<span class="normal-count">0</span>
</div>
<div>
쓰로틀 이벤트 핸들러가 scroll 이벤트를 처리한 횟수:
<span class="throttle-count">0</span>
</div>
<script>
const $container = document.querySelector(".container");
const $normalCount = document.querySelector(".normal-count");
const $throttleCount = document.querySelector(".throttle-count");
const throttle = (callback, delay) => {
let timerId;
// throttle 함수는 timerId를 기억하는 클로저를 반환한다.
return (event) => {
// delay가 경과하기 이전에 이벤트가 발생하면 아무것도 하지 않다가
// delay가 경과했을 때 이벤트가 발생하면 새로운 타이머를 재설정한다.
// 따라서 delay 간격으로 callback이 호출된다.
if (timerId) return;
timerId = setTimeout(
() => {
callback(event);
timerId = null;
},
delay,
event
);
};
};
let normalCount = 0;
$container.addEventListener("scroll", () => {
$normalCount.textContent = ++normalCount;
});
let throttleCount = 0;
// throttle 함수가 반환하는 클로저가 이벤트 핸들러로 등록된다.
$container.addEventListener(
"scroll",
throttle(() => {
$throttleCount.textContent = ++throttleCount;
}, 1000)
);
</script>
</body>
</html>