40장 이벤트

Yuzu·2023년 7월 13일
0

40장 이벤트

40.1 이벤트 드리븐 프로그래밍

이벤트 핸들러(event handler) : 이벤트가 발생했을 때 호출될 함수
이벤트 핸들러 등록 : 이벤트가 발생했을 때 브라우저에게 이벤트 핸들러의 호출을 위임하는 것

40.2 이벤트 타입

: 이벤트의 종류를 나타내는 문자열

40.3 이벤트 핸들러 등록

등록 방법 3가지

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

on 접두사 + 이벤트의 종류를 나타내는 이벤트 타입

  • 콜백 함수와 마찬가지로 함수 참조를 등록해야 브라우저가 이벤트 핸들러를 호출할 수 있다.
  • 함수 호출문을 등록하면 함수 호출문의 평가 결과가 이벤트 핸들러로 등록된다.
  • 이벤트 핸들러 어트리뷰트 값은 사실 암묵적으로 생성될 이벤트 핸들러의 함수 몸체를 의미한다.
<button onclick= "sayHi('Lee')"> Click me!</button>

=> 어트리뷰트는 파싱되어 다음과 같은 함수를 암묵적으로 생성

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

2. 이벤트 핸들러 프로퍼티 방식

  • 이벤트 핸들러 프로퍼티에 함수를 바인딩하면 이벤트 핸들러가 등록된다.
  • 이벤트를 발생시킬 객체인 이벤트 타깃(event target), 이벤트의 종류를 나타내는 문자열인 이벤트 타입(event type) 그리고 이벤트 핸들러 지정 필요

3. addEventListener 메서드 방식

EventTarget.addEventListener('eventType', functionName [, useCapture]);

profile
냐하

0개의 댓글