[위클리 페이퍼] 이벤트 버블링, 캡쳐링, 위임

이벤트 개념과 종류

• 이벤트는 웹페이지에서 발생하는 사건을 의미하며
• 마우스 클릭, 더블 클릭, 키보드 입력, 스크롤 등 유저가 웹페이지에서 어떤 사건을 발생시키는 것

이벤트 흐름

1. 이벤트 버블링(Bubbling)

• 이벤트가 발생한 요소부터 상위 요소로 순차적으로 전파되는 방식

//html

<div class="div">
	<button class="button">이벤트 버블링</button>
<div>


//javascript

const div= document.querySelector(".div");
const button = document.querySelector(".button");

div.addEventListener('click', function (){
	console.log("div 클릭함");
});

button.addEventListener('click', function (){
	console.log("button 클릭함");
});

button을 클릭하면 콘솔창에 "button 클림함" 과 "div 클림함" 이 순차적으로 출력된다.

• focus 같은 일부 이벤트는 버블링되지 않지만 거의 모든 이벤트는 버블링과 캡처링이 된다.
  
  
  
  
  
  
  
  

2. 이벤트 캡처링(Capturing)

• 이벤트 버블링과 반대 방향으로 진행됨
• 조상 요소로부터 이벤트가 발동된 하위 요소로 이벤트가 순차적으로 전파되는 방식
• addEventListener(' ', function, □) 3번째 프로퍼티에 {capture: true} or true값 전달
• 이벤트 캡처링은 사용 빈도가 극히 드물어 실제 코드에서 보기 힘들며, 이벤트 버블링으로도 충분히 처리할 수 있기때문에 최신 브라우저에서는 점차 지원하지 않는 추세

//html
<div class="div">
	<button class="button">이벤트 캡처링</button>
</div>


//javascript
const div= document.querySelector('.div')
const button= document.querySelector('.button')

div.addEventListener('click', function(){
	console.log("div 클릭함");
    } ,true);
button.addEventListener('click', function(){
	console.log("button 클릭함");
    } ,true);

button을 클릭하면 콘솔창에 "div 클림함" 과 "button 클림함" 이 순차적으로 출력된다.

추가)이벤트가 전파되는것을 막고 싶다면 event.stopPropagation()

function logEvent(event) {
	event.stopPropagation();
}

• 이벤트 버블의 경우 클릭한 요소의 이벤트만 발생시키고 상위 요소로 이벤트 전달하는 것을 방해한다.
• 이벤트 캡처의 경우 클릭한 요소의 최상위 요소 이벤트만 동작시키고 하위 요소들로 이벤트를 전달하지 않는다.
  
  
  
  
  
  
  
  

3. 이벤트 위임(Delegation)

• 하위 요소에 각각 이벤트를 붙이지 않고 상위 요소에서 하위 요소의 이벤트들을 제어하는 방식

//html
<ul class="parent">부모
	<li>자식1</li>
    <li>자식2</li>
    <li>자식3</li>
</ul>

자식1, 2, 3의 li요소에 클릭 이벤트를 주려면 각각 이벤트리스너를 붙여야하는 비효율 작업이 발생한다.
-> 부모태그에 이벤트리스너를 걸어서 해결하자.

//html
<ul class="parent">부모
	<li class=child>자식1</li>
    <li class=child>자식2</li>
    <li class=child>자식3</li>
</ul>

//javascript

document.querySelector('.parent').addEventListener('click',
	function(){
	if(event.target.classList.contains('.child')
    {console.log(event.target.textContent + "선택함");
    }
  });
  

위임을 사용하면 왜 좋나?

• 효율성과 성능절약(이벤트리스너를 한번만 등록하면 되기에)
• 동적 요소 처리: li 자식요소가 추가되거나 삭제되더라도 수정없이 이벤트 적용 가능하다.

출처:
https://jjang-j.tistory.com/76
https://velog.io/@soulee__/JavaScript-%EC%9D%B4%EB%B2%A4%ED%8A%B8-%EB%B2%84%EB%B8%94%EB%A7%81-%EC%BA%A1%EC%B3%90-%EC%9C%84%EC%9E%84
https://velog.io/@rookieand/%EC%9D%B4%EB%B2%A4%ED%8A%B8-%EB%B2%84%EB%B8%94%EB%A7%81-%EC%BA%A1%EC%B2%98%EB%A7%81-%EC%9C%84%EC%9E%84%EC%9D%84-%EC%95%8C%EC%95%84%EB%B3%B4%EC%9E%90
https://vc972.tistory.com/18
https://velog.io/@jeris/%EC%9D%B4%EB%B2%A4%ED%8A%B8-%EB%B2%84%EB%B8%94%EB%A7%81-%EC%BA%A1%EC%B3%90%EB%A7%81-%EC%9C%84%EC%9E%84