event

특정요소에 이벤트 핸들러를 등록하면

실제 요소에서 이벤트가 발생했을 때 브라우저에서 이벤트 객체를 이벤트 핸들러 콜백함수에 전달해 준다.

이벤트 캡쳐링, 버블링

https://ko.javascript.info/bubbling-and-capturing

이벤트 버블링

한 요소에서 이벤트가 발생되면 해당 요소의 핸들러가 실행되고,가장 최상단의 부모요소 까지 계속해서 부모의 이벤트 핸들러가 실행되는 현상

부모로의 이벤트 버블링을 방지하려면 해당 요소에 event.stopPropagation() 을 호출한다.

이벤트 캡쳐링

• 부모에서 자식으로 이벤트가 전파되는 현상

이벤트 취소

• eventPreventDefault() ⇒ 브라우저 기본 기능을 취소

이벤트 위임

https://ko.javascript.info/event-delegation

요소들의 공통 부모의 이벤트 핸들러로 요소들의 이벤트를 처리하는 것

사용하는 이유 : 요소마다 이벤트 핸들러 달기 귀찮아서

예를들어 쇼핑목록에서 특정 목록을 삭제하는 로직이 있어야 할 때

아이템 마다 이벤트 핸들러를 달면 낭비가 된다.

아이템을 총괄하는 ul 태그에 이벤트 핸들러를 달고 event.target 으로 id 를 받아와서

삭제해주면 함수 하나로 모든 목록을 처리할 수 있다.

이벤트 위임은 비슷한 방식으로 여러 요소를 다뤄야 할 때 사용됩니다. 이벤트 위임을 사용하면 요소마다 핸들러를 할당하지 않고, 요소의 공통 조상에 이벤트 핸들러를 단 하나만 할당해도 여러 요소를 한꺼번에 다룰 수 있습니다.