prgrms-web-devcourse · juyeon-park · Sep 5, 2023 · Sep 3, 2023
diff --git a/[40장] 이벤트-1/혜수.md b/[40장] 이벤트-1/혜수.md
@@ -0,0 +1,116 @@
+# 40장 이벤트-1 
+## 40.1 이벤트 드리븐 프로그래밍
+브라우저는 처리해야 할 특정 사건이 발생하면 이를 감지해 이벤트를 발생시킴<br>
+만약 애플리케이션이 특정 타입의 이벤트에 대해 반응해 어떤 일을 하고 싶다면 해당하는 타입의 이벤트가 발생했을 때 호출될 함수를 브라우저에게 알려 호출을 위임함
+ex) 사용자가 버튼 클릭을 할 때 클릭 이벤트가 발생하면 특정 함수를 호출(이벤트 핸들러)하도록 브라우저에게 위임(이벤트 핸들러 등록)
+
+이벤트 핸들러 : 이벤트가 발생했을 때 호출될 함수<br>
+이벤트 핸들러 등록 : 이벤트가 발생했을 때 브라우저에게 이벤트 핸들러의 호출을 위임
+
+## 40.2 이벤트 타입
+이벤트 타입은 이벤트의 종류를 나타내는 문자열
+[상세목록](https://developer.mozilla.org/en-US/docs/Web/Events)
+
+## 40.3 이벤트 핸들러 등록
+이벤트 핸들러를 등록하는 방법은 3가지이다.
+### 40.3.1 이벤트 핸들러 어트리뷰트 방식
+이벤트 핸들러 어트리뷰트의 이름은 onClick과 같이 on 접두사와 이벤트의 종류를 나타내는 이벤트 타입으로 이루어짐<br>
+이벤트 핸들러 어트리뷰트 값으로 함수 호출문 등의 문을 할당하면 이벤트 핸들러가 등록 됨
+```html
+<button onclick="sayHi('Hi')">Click</button>
+```
+```js
+function sayHi(text){
+  ...
+}
+```
+주의할 점 : 이벤트 핸들러 어트리뷰트 값으로 함수 참조가 아닌 함수 호출문 등의 문을 할당함!
+
+이벤트 핸들러를 등록할 때 콜백 함수와 마찬가지로 함수 참조를 등록해야 브라우저가 이벤트 핸들러를 호출할 수 있음. 만약 함수 참조가 아닌 함수 호출문을 등록하면 함수 호출문의 평과 결과가 이벤트 핸들러로 등록됨<br>
+하지만 위 예제에는 이벤트 핸들러 어트리뷰트 값으로 함수 호출문을 할당했는데, 사실 이벤트 핸들러 어트리뷰트 값은 사실 암묵적으로 생설될 이벤트 핸들러의 함수 몸체를 의미함
+```js
+function onclick(event){
+  sayHi('Hi');
+}
+```
+`onclick="sayHi('Hi')"` 어트리뷰트는 파싱되어 위와 같은 함수를 암묵적으로 생성하고, 이벤트 핸들러 어트리뷰트 이름과 동일한 onclick 이벤트 핸들러 프로퍼티에 할당함
+
+이처럼 동작하는 이유는 이벤트 핸들러에 인수를 전달하기 위해서이며 만약 이벤트 핸들러 어트리뷰트 값으로 함수 참조를 할당해야 한다면 이벤트 핸들러에 인수를 전달하기 곤란해짐
+
+이 방식은 CBD(Component Based Development) 방식의 Angular,React,Svelte,Vue.js에서 이벤트를 처리하기 때문에 알아두는 것이 좋을 것 같음
+### 40.3.2 이벤트 핸들러 프로퍼티 방식
+window 객체와 Document, HTMLElement 타입의 DOM 노드 객체는 이벤트에 대응하는 이벤트 핸들러 프로퍼티를 가짐
+```html
+<button>Click!</button>
+```
+```js
+const $button = document.querySelector('button');
+
+$button.onclick = function(){
+...
+};
+```
+이벤트 핸들러를 등록하기 위해 이벤트를 발생시킬 객체인 이벤트 타깃과 이벤트의 종류를 나타내는 문자열인 이벤트 타입 그리고 이벤트 핸들러를 지정할 필요가 있음<br>
+ex) 버튼 요소가 클릭되면 handleClick 함수를 호출하도록 이벤트 핸들러를 등록하는 경우 이벤트 타깃은 버튼 요소이고 이벤트 타입은 'click' 이며 이벤트 핸들러는 handleClick 함수임
+
+이벤트 핸들러는 대부분 이벤트를 발생시킬 이벤트 타깃에 바인딩 하지만 이벤트 전파, 이벤트 위임을 통해 이벤트 타깃 또는 전파된 이벤트를 캐치할 DOM 노드 객체에 바인딩할 수도 있음
+
+이벤트 핸들러 프로퍼티 방식은 앞에서 살펴본 이벤트 핸들러 어트리뷰트 방식과 동일하다. 하지만 프로퍼티 방식은 하나의 이벤트 핸들러만 바인딩 할수 있다는 단점이 있음
+### 40.3.3 addEventListener 메서드 방식
+```js
+EventTarget.addEventListener('eventType',functionName,[,useCpature]); // 마지막 매개변수는 false가 기본값이고 true일때 capture 사용.
+```
+addEventListener 메서드의 첫 번째 매개변수에는 이벤트의 종류를 나타내는 문자열인 이벤트 타입을 전달 -> on 접두사를 붙이지 않음<br>
+두 번째 매개변수에는 이벤트 핸들러를 전달<br>
+마지막 매개변수에는 이벤트를 캐치할 이벤트 전파 단계를 지정 -> capture or bubbling
+
+만약 동일한 HTML요소에서 발생한 동일한 이벤트에 대해 이벤트 핸들러 프로퍼티 방식과 addEventListener 메서드 방식을 모두 사용해 이벤트 핸들러를 등록하면 두 방식은 서로에게 영향을 주지 않기 때문에 2개의 이벤트 핸들러가 모두 호출되게 됨<br>
+-> 이벤트 핸들러 프로퍼티 방식은 하나의 이벤트만 바인딩 할수 있었지만 addEventListener 메서드는 하나 이상의 이벤트 핸들러를 등록할 수 있다는 장점이 있음(이벤트 핸들러는 등록된 순서대로 호출)
+## 40.4 이벤트 핸들러 제거
+- addEventListener 메서드로 등록한 이벤트 핸들러를 제거하려면 EventTarget.prototype.removeEventListener 메서드를 사용<br>
+이때 removeEventListener에 전달할 인수는 addEventListener와 동일
+-> 무명 함수를 이벤트 핸들러로 등록한 경우 제거할 수 없게됨
+
+만약에 기명 함수를 이벤트 핸들러로 등록할 수 없는경우 호출된 함수(자기 자신)를 가리키는 `arguments.callee`를 사용할 수 있음<br>
+하지만 코드 최적화를 방해하므로 strict mode에서 사용이 금지됨
+- 이벤트 핸들러 프로퍼티 방식으로 등록한 이벤트 핸들러는 이벤트 핸들러 프로퍼티에 null을 할당
+## 40.5 이벤트 객체
+이벤트가 발생하면 이벤트에 관련한 다양한 정보를 담고 있는 이벤트 객체가 동적으로 생성되며 생성된 이벤트 객체는 이벤트 핸들러의 첫 번째 인수로 전달됨<br>
+이벤트 객체를 전달받으려면 이벤트 핸들러를 정의할 때 이벤트 객체를 전달받을 매개변수를 명시적으로 선언해야함
+- 이벤트 핸들러 어트리뷰트 방식으로 이벤트 핸들러를 등록한 경우
+이벤트 핸들러의 첫 번째 매개변수 이름이 반드시 event여야 함. 만약 다른 이름으로 선언하게 되면 이벤트 객체를 전달받지 못함
+```html
+<!DOCTYPE html>
+<html>
+  <body onClick="showCoords(event)">
+    <p>클릭한 화면의 좌표값</p>
+    <em class="message"></em>
+    <script>
+    const $msg = document.querySelector('.message');
+    const showCoords = (e) => {
+      $msg.textContent = ` x = ${e.clientX}, y = ${e.clientY}`;
+    }
+    </script>
+  </body>
+</html>
+```
+### 40.5.1 이벤트 객체의 상속 구조
+이벤트가 발생하면 암묵적으로 생성되는 이벤트 객체도 생성자 함수에 의해 생성되며, 생성된 이벤트 객체는 생성자 함수와 더불어 생성되는 프로토타입으로 구성된 프로토타입 체인의 일원이 됨.
+
+이벤트 객체 중 일부는 사용자의 행위에 의해 생성된 것이고 일부는 자바스크립트 코드에 의해 인위적으로 생성된 것.
+### 40.5.2 이벤트 객체의 공통 프로퍼티
+Event 인터페이스, Event.prototype에 정의되어 있는 이벤트 관련 프로퍼티는 UIEvent, CustomEvent, MouseEvent 등 모든 파생 이벤트 객체에 상속되며, Event 인터페이스의 이벤트 관련 프로퍼티는 모든 이벤트 객체가 상속받는 공통 프로퍼티임<br>
+-> type, target(이벤트를 발생시킨 DOM요소), currentTarget(이벤트 핸들러가 바인딩된 DOM요소), eventPhase, bubbles, cancelable, defaultPrevented, isTrusted, timeStamp가 존재함
+### 40.5.3 마우스 정보 취득
+click, dbclick, mousedown, ... 이벤트가 발생하면 생성되는 MouseEvent 타입의 이벤트 객체는 다음와 같은 고유의 프로퍼티를 가짐
+
+- 마우스 포인터의 좌표 정보를 나타내는 프로퍼티 : screenX/screenY, clientX/clientY, pageX/pageY, offsetX/offsetY
+- 버튼 정보를 나타내는 프로퍼티 : altKey, ctrlKey, shiftyKey, button
+### 40.5.4 키보드 정보 취득
+keydown, keyup, keypress 이벤트가 발생하면 생성되는 KeyboardEvent 타입의 이벤트 객체는 altKey, ctrlKey, shiftKey, metaKey, key, keyCode 같은 고유의 프로퍼티를 가짐
+
+
+
+
+
+