[JS] DOM & EVENT #6 이벤트 버블링, 이벤트 위임

1. 이벤트 전파 방식 : 이벤트 버블링

자식요소에서 발생한 이벤트 객체는 부모와 그 부모를 통해 전파 (하위요소에서 상위요소로 올라감)

 

2. 버블링할 수 있는 이벤트와 아닌 이벤트

동작은 같지만 버블링할 수 있냐의 차이

3. event.stopPropagation() : 이벤트 버블링 막기

• 이벤트 버블링을 막아야하는 경우는 드물어서 이걸 사용하는 일도 드물다

 

4. 이벤트 위임

- 자신에게 발생하는 일을 다른 요소에서 처리하게 만들기 => 버블링을 이용하자!

위임 처리 전 : 하나씩 clickHandler를 지정해야하는 불편함

위임 처리 후 : li태그에 위임하여 li에서 발생한 이벤트가 부모요소ul에 등록된 이벤트 헨들러를 실행시켜줌

• currentTarget : 항상 ul을 가리킴 => 핸들러가 등록된 요소
• target : 클릭된 요소를 가리킴 => 이벤트를 발생시키는 요소 이벤트 

 

• 이벤트 위임x : target === currentTarget

function clickHandler(event) {
	let target = event.target; 
    if(target.tagName="A"){ //target이 a태그이면
    	target = target.parentElement; //target을 li태그로 바꿔줌
    } else if (target === event.currentTarget){ //target이 ul태그이면
    	return; //그냥 return (여기서 끝내라)
    }
    for (c of colors){
    	c.classList.remove("on");
    }
    target.classList.add("on");
}

 

 

출처 : 코딩앙마