TIL - 20220901

 오늘은 모던 JavaScript 튜토리얼에서 브라우저 이벤트 소개에 대해 공부했다. 작성한 질문은 다음과 같다.

 브라우저에서 이벤트란 무엇이 일어났다는 신호이며, 모든 DOM 노드들은 이러한 신호를 만들어내며 종류로는 다음과 같은 이벤트들이 있다.

• 마우스 이벤트: click 같은 이벤트부터 커서를 요소 위로 올렸을 때, 마우스를 움직일 때와 같은 마우스 이벤트들이 존재한다.
• 폼 요소 이벤트: 폼을 제출하거나 input과 같은 요소에 포커스 될 때 발생한다.
• 키보드 이벤트: 키를 누르거나 뗄 떼 발생한다.
• 문서 이벤트: DOM 생성이 완료됐을 때 발생한다.
• CSS 이벤트: CSS 애니메이션이 종료됐을 때 발생한다.

 

 이벤트 핸들러란 이벤트가 발생했을 때, 실행되는 함수를 이벤트 핸들러라고 부르고 HTML 안의 on<event> 속성에 핸들러를 할당할 수 있다.

 

 이벤트 핸들러를 다룰 때 자주 하는 실수로, HTML 속성에 이벤트 핸들러를 할당할 때는 HTML 속성 값에 괄호가 붙어있어야 하며 객체의 프로퍼티처럼 할당할 때는 괄호가 붙으면 안 된다. 또한, DOM 프로퍼티는 대, 소문자를 구분한다.

 

 이벤트 핸들러를 두 개 사용하고 싶어서 HTML 속성 값에 넣어주고, 객체의 프로퍼티처럼 할당하면 둘 중 먼저 선언된 하나는 나중에 선언된 이벤트 핸들러에 의해 덮어 써지게 된다. 따라서, 하나의 이벤트에 복수의 핸들러를 할당하려면 addEventListener(event, handler, [options])를 사용하면 된다.

 

 이벤트 객체란 이벤트가 발생했을 때 브라우저가 만드는 객체를 이벤트 객체라고 부른다.