40장. 이벤트(2)

본 내용은 모던 자바스크립트 Deep Dive - 자바스크립트의 기본 개념과 동작 원리를 토대로 작성하였습니다.

40.5 이벤트 객체

• 이벤트 발생 시 이벤트 객체가 동적으로 생성
• 생생된 이벤트 객체는 이벤트 핸들러의 첫 번째 인수로 전달
  • 이벤트 핸들러에 이벤트 객체를 전달받을 매개변수를 명시적으로 선언해야 함
  • 이벤트 핸들러 어트리뷰트 방식의 경우, 반드시 매개변수 이름이 event이어야 함

40.5.1 이벤트 객체의 공통 프로퍼티

• Event 인터페이스의 이벤트 관련 프로퍼티는 모든 이벤트 객체가 상속받는 공통 프로퍼티임
• target : 이벤트를 발생시킨 객체
• currentTarget : 이벤트 핸들러가 바인딩된 DOM 요소를 가리킴

40.6 이벤트 전파

• Event propagation
• 생성된 이벤트 객체는 이벤트를 발생시킨 DOM 요소인 타깃을 중심으로 DOM 트리를 통해서 전파
• 캡처링 단계 : 이벤트가 상위 요소에서 하위 요소 방향으로 전파
• 타깃 단계 : 이벤트가 이벤트 타깃에 도달
• 버블링 단계 : 이벤트가 하위 요소에서 상위 요소 방향으로 전파
• 이벤트는 이벤트를 발생시킨 이벤트 타깃의 상위 DOM 요소에서도 캐치 가능

40.7 이벤트 위임

• 많은 요소에 이벤트 핸들러를 등록하면 성능 저하의 원인이 되고 유지 보수에도 좋지 않음
• 이벤트 위임 : 하나의 상위 DOM 요소에 이벤트 핸들러를 등록
  • 이벤트 전파로 인해 상위 DOM 요소에서도 하위 요소에서 발생한 이벤트를 캐치할 수 있음
  • 추가된 DOM 요소에 이벤트 핸들러를 등록할 필요가 없음
• 반응이 필요한 DOM 요소에 한정해서 이벤트 핸들러가 실행되도록 이벤트 타깃을 검사해야 함
  • Element.prototype.matches