이벤트

브라우저는 처리해야 할 특정 사건이 발생하면 이를 감지하여 이벤트를 발생시킨다.

브라우저에서는 마우스 이동 키보드 입력 클릭 등을 감지하여 특정 타입의 이벤트를 발생시킨다고 한다.

애플리케이션이 특정 타입 이벤트에 대해 어떤 동작을 하고 싶다면 이벤트가 발생했을 때 호출될 함수를
브라우저에게 알려 호출을 위임한다.

이때 이벤트가 발생했을 때 호출될 함수를 이벤트 핸들러라 하고
이벤트 핸들러의 호출을 위임하는 것을 이벤트 핸들러 등록이라고 부른다.

 

사용자가 브라우저에서 클릭을 언제 할지, 키보드 입력을 언제할지 모르기 때문에
개발자가 함수를 호출하는 것이 아닌 브라우저에게 함수 호출을 위임하는 것이다.

위 코드에는 btn, onClick이라는 프로퍼티에 함수를 할당했다.
Window, Document.HTMLElement 타입의 객체는
onClick과 같이 특정 이벤트에 대응하는 다양한 이벤트 핸들러 프로퍼티를 가지고 있다.

해당 이벤트가 발생했을 때(onClick클릭) 할당한 함수가 브라우저에 의해 호출되는 것이다.

이처럼 프로그램의 흐름을 이벤트 중심으로 제어하는 프로그래밍 방식을 

이벤트 드리븐 프로그래밍이라 한다.

 

이벤트 핸들러 어트리뷰트 

HTML요소의 어트리뷰트 중에는 이벤트에 대응하는 이벤트 핸들러 어트리뷰트가 있다.

on 접두사와 이벤트의 종류를 나타내는 이벤트 타입으로 어트리뷰트 값의
함수 호출문 등 의 문을 할당하면 이벤트 핸들러가 등록된다.

이벤트 핸들러 어트리뷰트 값으로 함수 호출문을 할당했다. 이때 이벤트 핸들러 어트리뷰트 값은

암묵적으로 생성될 이벤트 핸들러의 함수 몸체를 의미한다.

이런 이유는 이벤트 핸들러에 인수를 전달하기 위해서다. 이벤트 핸들러 어트리뷰트 값으로
함수 참조를 할당해야 한다면 이벤트 핸들러에 인수를 전달하기 곤란하다.

이벤트 핸들러 어티리뷰트 방식은 사용하지 않는 것이 좋다고 한다. 
(HTML과 자바스크립트는 관심사가 다르므로 혼재하는 것보다 분리하는 편에서?)

하지만 CBC(Component Based Development) 방식의 Angular/ React / Svelt / Vue
프레임워크 / 라이브러리에서 이벤트 핸들러 어트리뷰트 방식으로 이벤트를 처리한다.

CBD에서는 HTML,CSS, 자바스크립트를 관심사가 다른 개별적인 요소가 아닌 뷰를 구성하기 위한
구성요소로 보기 때문에 관심사가 다르다고 생각하지 않기 때문?

어트리뷰트 방식 사용하지 않는 이유

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

결론으로 자바스크립트에서 이벤트를 바라볼때는 직접 DOM을 조작하는 문제와 보안, 코드작성 부분에서 
이벤트 헨들러 어트리뷰트 방식을 사용하지 않는 것이 좋다!

(리액트에서는 Virual DOM, Component같은 시스템을 사용하기 때문에 DOM, 코드, 보안 부분에서는 문제없는 것 같다)

 

이벤트 핸들러 프로퍼티 

이벤트 핸들러 프로퍼티의 키는 이벤트 핸들러 어트리뷰트와 마찬가지로 onClick 과 같이 on 접두사와
이벤트의 종류를 나타내는 이벤트 타입으로 이루어져 있다.

이벤트를 발생시킬 객체인 이벤트 타킷과 이벤트의 종류를 나타내는 문자열인 이벤트 타입

이벤트 핸들러를 지정할 필요가 있음

이벤트 핸들러 어트리뷰트 방식도 결국 DOM 노트 객체의 이벤트 핸들러 프로퍼티로 변환되므로

이벤트 핸들러 프로퍼티 방식과 동일하다. 프로퍼티 방식은 어트리뷰트 방식의 HTML 과 자바스크립트

뒤섞이는 문제를 해결 가능하다.하지만 프로퍼티 하나의 하나에 이벤트만 바인딩 가능!