이벤트 델리게이션(위임)
- 하위 요소에 각각 이벤트를 붙이지 않고, 상위 요소에서 하위 요소의 이벤트를 제어하는 방식입니다. 이는 많은 요소를 모니터링해야 할 때, 오버헤드가 훨씬 낮아질 수 있습니다.
<ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> 여기에서 각각의 li태그에 이벤트를 걸어줘야된다고 생각했는데, 강의를 듣고, 상위요소 태그 하나에 이벤트를 걸어줘도 하위요소의 이벤트를 제어할 수 있다는 사실을 알게됨. e.target 을 이용하여 해당 li 태그를 찾을 수 있음.
디바운싱
- 연이어 발생한 이벤트를 하나의 그룹으로 묶어서 처리하는 방식으로, 주로 그룹에서 마지막이나 처음에 처리된 함수를 처리하는 방식으로 사용됨.
→ 이벤트가 발생할 때마다 서버에 요청을 하면, 성능적으로도 비효율적이고, 유료 API 를 사용할 경우에도 큰 손해이다. 이는 timer 변수, clearTimeout, setTimeout 함수를 이용하여 사용할 수 있다.
let timer = null document.querySelector('#input').addEventListener('input', function(e){ if(timer){ clearTimeout(timer) } timer = setTimeout(function(){ // .... }, 2000) }) // setTimeout 은 기본적으로 실행하면 특정 id같은 숫자값을 반환하는데, // 그것을 timer에 담고, clearTimeout 을 이용하여 초기화할 수 있다.
처음에 처리된함수를 처리하는방식???
timer 같은 변수를 2개 선언해서,
처음값만 setTimeout으로 받고 따로 저장을 하는지??
let timer1 = null let timer2 = null let isInit = true document.querySelector('#input').addEventListener('input', function(e){ if (isInit) { func(); } isInit = false; setTimeout -> 몇초 뒤에 isInit = true;[] if(timer2){ clearTimeout(timer2) } if(!isInit){ timer1 = setTimeout(function(){ // .... }, 2000) isInit = true return } timer2 = setTimeout(function(){ // .... }, 2000) })
