40장 이벤트

41장 디바운스와 스로틀

이벤트

<aside> ❗

이벤트 핸들러 이벤트가 발생했을 때 호출될 함수

</aside>

<aside> ❗

이벤트 핸들러 등록

이벤트가 발생했을 때 브라우저에게 이벤트 핸들러의 호출을 위임하는 것

</aside>

이벤트 드리븐 프로그래밍 : 프로그램의 흐름을 이벤트 중심으로 제어하는 프로그래밍 방식

이벤트 핸들러 등록

이벤트 핸들러 어트리뷰트 방식

• 이벤트 핸들러 어트리뷰트 값으로 함수 호출문 등의 문(statement)을 할당
  • ❗️함수 참조가 아닌 함수 호출문 등의 문을 할당

HTML에서 이벤트 핸들러 어트리뷰트 값(onclick)에 sayHi('Lee')와 같은 함수 호출문을 작성하면

1. 브라우저는 이 값을 암묵적으로 생성될 이벤트 핸들러의 함수 몸체로 해석한다.

2. 어트리뷰트는 파싱되어 암묵적으로 이벤트 핸들러 함수를 생성한다.

   function onclick(event) {
       sayHi('Lee');
   }
   

3. 이벤트 핸들러 어트리뷰트 이름과 동일한 키 onclick 이벤트 핸들러 프로퍼티에 할당한다. (DOM 노드 객체의 이벤트 핸들러 프로퍼티로 변환)

이처럼 동작하는 이유는 이벤트 핸들러에 인수를 전달하기 위함. (함수 참조를 할당한다면 인수를 전달하기 곤란)

이벤트 핸들러 어트리뷰트 값으로 여러 개의 문을 할당할 수 있다.