이벤트

브라우저는 처리해야 할 특정 사건이 발생하면 이벤트(event)를 발생 시킵니다.
특정 타입의 이벤트에 대해 호출 될 함수를 브라우저에게 알려 호출을 위임 한다.
이벤트가 발생했을 때 호출될 함수를 이벤트 핸들러(event handler)라고 함
이벤트가 발생 했을 때 브라우저에게 핸들러의 호출을 위임하는 것을 이벤트 핸들러 등록 이라고 한다.

이벤트 핸들러를 통해 사용자와 애플리케이션 간의 상호작용을 제어할 수 있고 이를 이벤트 드리븐 프로그래밍 이라 한다.

이벤트 핸들러 등록

이벤트 핸들러 : 이벤트가 발생했을 때 브라우저에 호출을 위임한 함수
이벤트 핸들러 등록 방법 3가지

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

HTML 요소의 어트리뷰트 중에 이벤트에 대응하는 이벤트 핸들러 어트리뷰트가 있다.
어트리뷰트 값으로 함수 참조가 아닌 함수 호출문 등의 문을 할당해야함

<!DOCTYPE html>
<html>
<body>
  <button onclick="sayHi('Lee')">Click me!</button>
  <script>
    function sayHi(name) {
      console.log(`Hi! ${name}.`);
    }
  </script>
</body>
</html>

이때 이벤트 핸들러 어트리뷰트 값을 암묵적으로 생성될 인벤트 핸들러의 함수 몸체를 의미 (파싱되어 이벤트 핸들러 암묵적으로 생성한다는 의미)
리액트 같은 라이브러리에서 이런 방식으로 처리함

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

window 객체와 Document, HTMLElement 타입의 DOM 노드 객체는 이벤트에 대응하는 이벤트 핸들러 프로퍼티를 가지고 있음
이벤트 핸들러 프로퍼티에 함수를 바인딩하면 이벤트 핸들러가 등록 된다.

<!DOCTYPE html>
<html>
<body>
  <button>Click me!</button>
  <script>
    const $button = document.querySelector('button');

    // 이벤트 핸들러 프로퍼티에 이벤트 핸들러를 바인딩
    $button.onclick = function () {
      console.log('button click');
    };
  </script>
</body>
</html>

프로퍼티에 하나의 이벤트 핸들러만 바인딩 할 수 있다는 단점이 있다.

addEventListener 메서드 방식

EventTarget.prototype.addEventListener 메서드 사용
메서드의 첫 번째 매개변수에는 이벤트 타입, 두번째에 이벤트 핸들러 , 세번째는 이벤트 전파 단계를 전달

이벤트 전파 단계를 생략하거나 false를 지정하면 버블링 단계에서 이벤트를 캐치, true를 지정하면 캡처링 단계에서 이벤트를 캐치
하나 이상의 이벤트를 등록할 수 있고, 등록 순서대로 실행 (단, 동일한 이벤트를 중복 등록하면 하나만 등록됨)

이벤트 핸들러 제거

addEventListener 로 등록된 이벤트 핸들러를 제거하려면 removeEventListener 메서드 사용
무명 함수를 이벤트 핸들러로 등록하면 제거할 수 없으며, 이벤트 핸들러를 제거하려면 이벤트 핸들러의 참조를 변수나 자료구조에 저장해야 함.

가급적 이벤트 핸들러의 참조를 변수나 자료구조에 저장하여 제거 하는 것을 권장

이벤트 객체

이벤트가 발생하면 이벤트에 관련한 다양한 정보를 담고 있는 이벤트 객체가 동적으로 생성됨
브라우저가 이벤트 핸들러를 호출할 때 이벤트 객체를 인수로 전달.
생성된 이벤트 객체는 이벤트 핸들러의 첫 번째 인수로 전달 됨
이때 이벤트 핸들러 어트리뷰트 방식으로 등록 하면 이벤트 객체 이름을 반드시 event로 받아야됨 (암묵적으로 핸들러 함수 생성되기 때문에)

이벤트 객체의 상속 구조

상속 구조
Event, UIEvent, MouseEvent 등은 모두 생성자 함수 즉, 생성자 함수를 호출하여 객체 생성 가능.
즉, 프로토타입으로 구성된 프로토타입 체인의 일원.
Event 인터페이스는 DOM 내에서 발생한 이벤트에 의해 생성되는 이벤트 객체를 나타냄.
모든 이벤트 객체의 공통 프로퍼티가 정의되어 있고, 하위 인터페이스에는 이벤트 타입에 따라 고유한 프로퍼티가 정의.

이벤트 객체의 공통 프로퍼티

공통 프로퍼티	설명	타입
type	이벤트 타입	string
target	이벤트를 발생시킨 DOM 요소	DOM 요소 노드
currentTarget	이벤트 핸들러가 바인딘된 DOM 요소	DOM 요소 노드
target	이벤트를 발생시킨 DOM 요소	DOM 요소 노드
eventPhase	이벤트 전파 단계 0: 없음, 1: 캡처링, 2: 타깃, 3: 버블링	number
bubbles	이벤트를 버블링으로 전파하는지 여부	boolean
cancleable	preventDefault 메서드를 호출하여 이벤트의 기본 동작을 취소할 수 있는지 여부	boolean
defaultPrevented	preventDefault 메서드를 호출하여 이벤트를 취소 했는지 여부	boolean
isTrusted	사용자의 행위에 의해 발생한 이벤트인지 여부	boolean
timeStamp	이벤트가 발생한 시각	number

마우스 정보 취득

MouseEvent 타입의 이벤트 객체는 다음과 같은 고유의 프로퍼티를 갖는다.
마우스 포인터의 좌표 정보를 나타내는 프로퍼티
screenX / screenY : 사용자 모니터를 기준으로 한 좌표
clientX / clientY : 브라우저에서 사용자에게 웹페이지가 보여지는 영역을 기준으로한 좌표
pageX / pageY : 전체 문서를 기준으로 한 좌표
offsetX / offsetY : 좌표를 출력하도록 하는 이벤트가 걸려있는 DOM node를 기준으로 좌표를 표시

버튼 정보를 나타 내는 프로퍼티

altKey
ctrlKey
shiftKey
button

이벤트 전파

DOM 트리 상에 존재 하는 요소 노드에서 발생한 이벤트는 DOM 트리를 통해 전파 된다.
이를 이벤트 전파(event propagation) 이라고 한다.
이벤트 발생 시 생성된 이벤트 객체는 이벤트를 발생시킨 DOM 요소인 이벤트 타겟(event target)을 중심으로 DOM 트리를 통해 전파

enter image description here

이벤트가 전파되는 방향에 따라 3단계로 구분
- 캡처링 단계(capturing phase) : 이벤트가 상위 요소에서 하위요소로로 전파
- 타겟 단계(target phase) : 이벤트가 이벤트 타겟에 도달
- 버블링 단계 (bubbling phase) : 이벤트가 하위 요소에서 상위 요소 방향으로 전파
즉, 이벤트는 이벤트를 발생시킨 이벤트 타깃은 물론 상위 DOM 요소에서도 캐치 할 수 있다.
이벤트 리스너에 세번째 인수로 capturing 사용 여부 지정 가능
기본 값 false로 보통 버블링 단계에서 이벤트를 캐치함
버블링을 통해 전파 되지 않는 이벤트도 존재 함
- mouseenter : 마우스커서를 HTML 요소 안으로 이동했을 때 발생 (버블링 되지 않는다.)
- mouseover : mouseenter랑 동일, 버블링 되는게 차이
- mouseleave : 마우스 커서를 HTML요소 밖으로 이동했을 때 (버블링 되지 않는다.)
- mouseout : mouseleave 와 동일, 버블링 되는게 차이

이벤트 위임

이벤트 위임(event delegation)은 여러 개의 하위 DOM요소에 각각 이벤트 핸들러를 등록하는 대신 하나의 상위 DOM 요소에 이벤트 핸들러를 등록하는 방법을 말한다.
이벤트 위음을 통해 상위 DOM 요소에 이벤트 핸들러를 등록하면 하위 DOM 요소에 이벤트 핸들러를 등록할 필요 없다.
이 경우 target 프로퍼티와 currentTarget 프로퍼티가 다를 수 있다.

예를들어 ul 태그에 하위 li태그가 있는 경우
ul 태그에 하나의 이벤트 리스너를 등록
currentTarget은 ul태그 요소, target은 이벤트가 발생한 li 태그 요소

DOM 요소의 기본 동작 조작

DOM 요소는 저마다 기본 동작이 존재
이벤트 객체의 preventDefault 메서드를 통해 기본 동작을 중지
이벤트 객체의 전파를 중지 하고 싶으면 stopPropagation 메서드 사용

이벤트 핸들러 내부의 this

이벤트 핸들러 어트리 뷰트 방식으로 이벤트 등록시 이벤트 핸들러 내부의 this는 window 가리킨다.
왜냐, 암묵적으로 이벤트 핸들러 함수 생성하기 때문에 (일반 함수 호출시 this는 window)
단, 파라미터로 전달한 this 는 이벤트를 바인딩한 DOM 요소 가리킴

<!DOCTYPE html>
<html>
<body>
  <button onclick="handleClick(this)">Click me</button>
  <script>
    function handleClick(button) {
      console.log(button); // 이벤트를 바인딩한 button 요소
      console.log(this);   // window
    }
  </script>
</body>
</html>

이벤트 핸들러 프로퍼티 방식과 addEventListener 방식

두 방식의 이벤트 핸들러 메서드 내부의 this는 이벤트를 바인딩한 DOM요소를 가리킨다.
화살표 함수로 정의한 이벤트 핸들러 내부의 this는 상위 스코프의 this를 가리킨다.
class 사용 시 이벤트 핸들러 내부의 this는 이벤트를 바인딩한 DOM 요소를 가리키기 때문에 주의 해야한다.
에벤트 핸들러 메서드 바인딩 시 bind 메서드 사용하여 클래스가 생성 할 인스턴스 가리키도록 해야함

이벤트 핸들러에 인수 전달

이벤트 핸들러 프로퍼티 방식 또는 addEventListener 방식 사용 시 함수 자체를 등록해야 함으로 내부에 인수를 전달 할 수 없다.
인수 전달 하려면 이벤트 핸들러 내부에서 함수를 호출하면서 인수 전달
또는 이벤트 핸들러를 반환하는 함수를 호출하면서 인수를 전달

커스텀 이벤트

커스텀 이벤트 생성

이벤트 생성자 함수로 이벤트 객체 생성 가능
원래 이벤트 객체는 암묵적으로 생성 되서 이벤트 종류에 따라 이벤트 타입이 결정
근데 이벤트 생성자로 임의로 생성한 이벤트 객체는 개발자가 이벤트 타입 지정가능
즉, 개발자가 의도적으로 생성한 이벤트를 커스텀 이벤트라고 한다.

// MouseEvent 생성자 함수로 click 이벤트 타입의 커스텀 이벤트 객체를 생성
const mouseEvent = new MouseEvent('click', {
  bubbles: true,
  cancelable: true,
  clientX: 50,
  clientY: 100
});

console.log(mouseEvent.clientX); // 50
console.log(mouseEvent.clientY); // 100

// KeyboardEvent 생성자 함수로 keyup 이벤트 타입의 커스텀 이벤트 객체를 생성
const keyboardEvent = new KeyboardEvent('keyup', { key: 'Enter' });

console.log(keyboardEvent.key); // Enter

커스텀 이벤트 디스패치

생성된 커스텀 이벤트는 dispatchEvent메서드로 이벤트를 발생 시킬 수 있다.
dispatchEvent 메서드에 이벤트 객체를 인수로 전달하면서 호출하면 인수로 전달한 이벤트 타입의 이벤트가 발생.

<!DOCTYPE html>
<html>
<body>
  <button class="btn">Click me</button>
  <script>
    const $button = document.querySelector('.btn');

    // 버튼 요소에 click 커스텀 이벤트 핸들러를 등록
    // 커스텀 이벤트를 디스패치하기 이전에 이벤트 핸들러를 등록해야 한다.
    $button.addEventListener('click', e => {
      console.log(e); // MouseEvent {isTrusted: false, screenX: 0, ...}
      alert(`${e} Clicked!`);
    });

    // 커스텀 이벤트 생성
    const customEvent = new MouseEvent('click');

    // 커스텀 이벤트 디스패치(동기 처리). click 이벤트가 발생한다.
    $button.dispatchEvent(customEvent);
  </script>
</body>
</html>

기존의 이벤트 타입이 아닌 임의의 이벤트 타입을 지정하고 싶으면 CustomEven 이벤트 생성자 함수 사용

// CustomEvent 생성자 함수로 foo 이벤트 타입의 커스텀 이벤트 객체를 생성
const customEvent = new CustomEvent('foo');
console.log(customEvent.type); // foo

임의의 이벤트 타입 지정 경우 addEventListener 메서드 사용해야함
on+이벤트타입 으로 지정된 프로퍼티가 존재하지 않기 때문에

'javascript > 📖 study' 카테고리의 다른 글

[스터디 10주차]42장- 비동기 프로그래밍 (0)	2022.04.02
[9주차 스터디]41장-타이머 (0)	2022.03.27
[8주차 스터디]39장-DOM (0)	2022.03.27
[8주차 스터디]38장-브라우저 렌더링 (0)	2022.03.27
[7주차 스터디]37장-Set 과 Map (0)	2022.03.27

homie's blog

[9주차 스터디]40장-이벤트

이벤트

이벤트 핸들러 등록

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

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

addEventListener 메서드 방식

이벤트 핸들러 제거

이벤트 객체

이벤트 객체의 상속 구조

이벤트 객체의 공통 프로퍼티

마우스 정보 취득

마우스 포인터의 좌표 정보를 나타내는 프로퍼티

버튼 정보를 나타 내는 프로퍼티

이벤트 전파

이벤트 위임

DOM 요소의 기본 동작 조작

이벤트 핸들러 내부의 this

이벤트 핸들러 프로퍼티 방식과 addEventListener 방식

이벤트 핸들러에 인수 전달

커스텀 이벤트

커스텀 이벤트 생성

커스텀 이벤트 디스패치

'javascript > 📖 study' 카테고리의 다른 글

댓글

티스토리툴바

[9주차 스터디]40장-이벤트

이벤트

이벤트 핸들러 등록

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

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

addEventListener 메서드 방식

이벤트 핸들러 제거

이벤트 객체

이벤트 객체의 상속 구조

이벤트 객체의 공통 프로퍼티

마우스 정보 취득

마우스 포인터의 좌표 정보를 나타내는 프로퍼티

버튼 정보를 나타 내는 프로퍼티

이벤트 전파

이벤트 위임

DOM 요소의 기본 동작 조작

이벤트 핸들러 내부의 this

이벤트 핸들러 프로퍼티 방식과 addEventListener 방식

이벤트 핸들러에 인수 전달

커스텀 이벤트

커스텀 이벤트 생성

커스텀 이벤트 디스패치

'javascript > 📖 study' 카테고리의 다른 글

관련글

댓글

티스토리툴바