나디아 성장 일기

이벤트 위임(Event Delegation): 이벤트 버블링을 활용하여 여러 자식 요소에 각각 이벤트 리스너를 붙이지 않고, 상위 요소에서 한 번에 이벤트를 처리하는 방법 비슷한 방식으로 여러 요소를 다뤄야 할 때 사용 요소마다 핸들러를 할당하지 않고, 요소의 공통 조상에 이벤트 핸들러를 하나만 할당해도 여러 요소를 한꺼번에 다룰 수 있다⭕공통 조상에 할당한 핸들러에서 event.target을 이용하면 실제 어디서 이벤트가 발생했는지 알 수 있다⭕많은 핸들러를 할당하지 않아도 되기 때문에 초기화가 단순해지고 메모리가 절약된다⭕DOM 수정이 쉬워진다👍 Item 1 Item 2 Item 3   이벤트 위임 순서컨테이너에 하나의 핸들러를 할당핸들러의 event.target을 사용해 이벤트가 발생한 요소..

이벤트 버블링( Event  Bubbling): 이벤트가 가장 안쪽의 요소(이벤트가 발생한 요소)에서 시작하여 상위 요소들로 전파되는 과정요소에 이벤트가 발생하면 해당 요소의 핸들러가 동작 ➡ 이어서 부모 요소의 핸들러가 동작 ➡ 가장 최상단의 조상 요소를 만날 때까지 이 과정이 반복 자식 요소 → 부모 요소 → 조부모 요소 ... 최상위 요소 순서addEventListener의 3번 째 인자인 capture 옵션을 false로 설정❗elem.addEventListener(..., {capture: false})  /* form 선택 시 -> formdiv 선택 시 -> div, formp 선택 시 -> p, div, form */    event.target: 이벤트가 정확히 어디서 발생했는지에 대한..

이벤트 핸들링(Event Handling) 핸들러(handler): 사용자의 행동에 어떻게 반응할지를 자바스크립트 코드로 표현한 것    이벤트 핸들링 3가지 방법 HTML 속성: HTML 태그 안에 속성으로 할당 (ex. onclick="handler()")- 잘 사용하지 않음❌DOM 프로퍼티 : 이벤트를 함수로 DOM 프로퍼티에 할당(ex. element.onclick = handler)- 복수 할당이 불가능❌메서드 : `addEventListener`, `remoceEventListener`(ex. element.addEventListener(event, handler[, phase]))  이벤트 추가/제거  addEventListener : 특정 이벤트가 발생했을 때 실행될 함수를 등록 elem..