이벤트 버블링, 캡쳐링, 위임

이벤트 버블링(Event Bubbling)

이벤트가 발생된 주체로 부터 이벤트가 상위로 전파되는 것.

이벤트 캡쳐링(Event Capturing)

이벤트 버블링의 반대로 발생된 주체로부터 이벤트가 하위로 전파되는 것.
이벤트리스너의 인자로 불리언 값을 가진 객체를 전달한다

items.forEach(function(div) {
	div.addEventListener('click', logEvent, {
		capture: true
	});
});

event.stopPropagtion()으로 버블링, 캡쳐링을 제어할 수 있다.

이벤트 위임(Event Delegation)

DOM이 동적으로 제어될 때는 미리 바인딩 해놓은 이벤트들로 제어를 할 수가 없다.
따라서 앞서 나온 이벤트 버블링을 활용하는데, 이것을 이벤트 위임이라고 부른다.

const items = document.querySelector('.items'); // 이벤트가 발생하는 상위 부모요소
items.addEventListener('click', function() {
  	// 부모요소에 이벤트를 달아놓고 하위에서 발생한 클릭 이벤트를 감지한다.
	console.log('it works');
})