[JS] Event 작동 방식

1. Event 작동 방식

1-0. 참고 코드

<div class='first'>
  <div class='second'>
    <div class='third'></div>
  </div>
</div>

1-1. Event 캡쳐링

• Event가 Window 객체에서 출발해서 Event 타겟까지 전파
• 이 단계에서는 Event 타겟에서 발생하도록 등록된 EventListener보다 먼저 실행된다.
• addEventListener의 매개변수에 useCapture 부분에 true를 인자로 전달하면 캡쳐링 단계에서도 Event 실행 가능. (아래 코드 확인)

let elems = document.querySelectorAll('div');
elems.forEach((elem)=>{
  elem.addEventListener('click', ()=> {
    console.log('clicked');
  }
}, {capture:true})

1-2. Event 타겟팅

• Event 타겟에 전파되는 단계
• Event 타겟에 등록된 이벤트 핸들러, 리스너들은 이 시점에 실행
• Event 캡쳐링 단계에서는 핸들러, 리스너는 실행되지 않음.

1-3. Event 버블링

• 이벤트가 이벤트 타겟에서 출발해서 Window 객체까지 전파
• 캡쳐링, 타겟팅 단계와 반대 방향으로 전파

2. 실전 활용

이러한 자바스크립트의 이벤트 특성을 이용하여 편리하게 코딩을 할 수도 있고, 이를 기능에 따라서 막을 수도 있다. 어떻게 활용할 수 있고 막을 수 있는지 알아보자.

2-1. e.preventDefault()

기본적인 이벤트를 막는 기능을 수행한다.
예를 들면,

<form>
  <input type='text'/>
  <input type='submit'/>
</form>

위 코드와 같이 form 태그로 감싸진 input 태그 두 개가 있다. text를 입력 후 submit 버튼을 클릭하면 브라우저는 무조건 새로고침을 시도한다.

이러한 기본적인 기능이 필요할 수도 있지만 때에 따라서는 필요하지 않을 수도 있다. 따라서 form 태그의 submit 이벤트에 e.preventDefault()를 넣어주면 데이터가 전송 될 때 마다 reload 되는 것을 방지 할 수 있다.

2-2. e.stopPropagation()

이벤트 버블링을 막는 기능을 수행한다.
1-0. 참고 코드 를 그대로 사용하여 js코드를 짜면

1. e.stopPropagation() 미 사용

let first = document.querySelector('.first');
let second = document.querySelector('.second');
let third = document.querySelector('.third');

first.addEventListener('click', ()=>{
  console.log('first');
})

second.addEventListener('click', ()=>{
  console.log('second');
})

third.addEventListener('click', ()=>{
  console.log('third');
})

third class div를 클릭하면 console에는

third
second
first

를 출력할 것이다. 이벤트 전파로 인해 거꾸로 올라가기 때문이다.

2. e.stopPropagation() 사용

let first = document.querySelector('.first');
let second = document.querySelector('.second');
let third = document.querySelector('.third');

first.addEventListener('click', ()=>{
  console.log('first');
})

second.addEventListener('click', ()=>{
  console.log('second');
})

third.addEventListener('click', (e)=>{
  e.stopPropagation();
  console.log('third');
})

third class div를 클릭하면 console에는

third

third만 찍히고 끝이 날 것이다. 이벤트 버블링이 막혔기 때문이다.

2-3. 이벤트 위임

상위 엘리먼트에 이벤트 리스너를 등록하여 하위 엘리먼트 각각에 이벤트를 붙이지 않고 상위 엘리먼트에서 하위 엘리먼트의 이벤트를 제어하는 방식이다.

<div class='btn-wrapper'>
  <button class='save-btn'>save</button>
  <button class='delete-btn'>delete</button>
</div>

let btnWrapper = document.querySelector('.btn-wrapper');
btnWrapper.addEventListener('click', ({ btnWrapper })=>{
  if (btnWrapper.classList.contains('save-btn')) {
     console.log('save');                                 
   }
  else if(btnWrapper.classList.contains('delete-btn'){
     console.log('delete');       
   }
                                   
})