less than 1 minute read

  • 이벤트는 무언가 일어났다는 신호로 모든 DOM 노드(DOM에만 한정된 건 아님)는 이런 신호 만들어냄

  • 이벤트에 반응하려면 이벤트가 발생했을 때 실행되는 함수인 핸들러 할당해야 함

  • 이벤트 핸들러는 HTML 속성에 추가, DOM 프로퍼티에 추가, 메서드(addEventListnter로 추가, removeEventListener로 제거) 중 하나로 할당

  • 핸들러 내부에 쓰인 this 의 값은 핸들러가 할당된 요소

  • HTML 속성은 속성값 전체가 큰 따옴표로 둘러싸여 있기 떄문에 작은 따옴표로 둘러 쌓으며 속성값 내부에 또 큰따옴표 사용 시 코드 작동 하지 않으며 사용 시 태그 중간에 JS 코드 중간에 들어가기 떄문에 지양

  • 핸들러를 HTML 속성 사용해 할당 시 브라우저는 속성값을 읽고 속성값을 함수 본문으로 하는 핸들러 함수를 만들고 생성된 함수를 DOM 프로퍼티에 할당함

  • DOM 프로퍼티에 할당하는 방법은 복수의 핸들러 할당이 불가능 (대/소문자 구분함)

  • transitionend, DOMContentLoded 같은 일부 이벤트는 메서드 할당만 가능.

  • addEventListner 는 객체 형태의 이벤트 지원하며 이 경우엔 이벤트 발생 시 객체 안에 구현된 handleEvent 호출됨

  • removeEventListner 는 참조값을 이용해 이벤트 삭제하기 떄문에 핸들러 함수에 변수값 할당해야 함

  • 어떤 방식으로 이벤트 핸들러 할당하던 첫 번째 인자는 이벤트 객체

  • 이벤트 객체엔 여러 프로퍼티 지원.