Skip to content

ch-40-1.md

Latest commit

 

History

History
126 lines (109 loc) · 6.19 KB

ch-40-1.md

File metadata and controls

126 lines (109 loc) · 6.19 KB
Raw

Ch-40-1 이벤트 생성과 객체

이벤트 드리븐 프로그래밍

  • 브라우저는 특정 액션 -> 특정 타입 이벤트 발생

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

  • 이벤트 핸들러 등록 :이벤트 발생시 브라우저에게 이벤트 핸들러의 호출을 위임하는 것

  • 사용자가 언제 버튼을 클릭할지 모르기 때문에 -> 언제 호출하지?

    • 버튼 클릭 시, 특정 함수(이벤트 핸들러)를 호출하도록 브라우저에게 위임(이벤트 핸들러 등록)
    • 브라우저에게 함수 호출을 개발자가 위임하게 되는 것

  • 이런 이벤트 중심 프로그래밍 방식을 **이벤트 드리븐 프로그래밍(event-driven programming)**이라고 함

이벤트 타입

  • 약 200여가지 존재
    • ex) click, mouseover, mouseout, keydown, keyup, load, unload, scroll, resize, error 등

이벤트 핸들러 등록

방식은 총 3가지

  • HTML 어트리뷰트 방식
  • DOM 프로퍼티 방식
  • addEventListener 메서드 방식

HTML 어트리뷰트 방식

  • HTML 요소에 어트리뷰트로 이벤트 핸들러 등록
  • 어트리뷰트 이름은 on + 이벤트 타입
    • ex) onclick, onmouseover, onmouseout, onkeydown, onkeyup 등
  • 어트리뷰트 값은 이벤트 핸들러 코드
    • ex) onclick="alert('clicked!')"
  • CBD (Component-Based Development) 방식에서는 잘 사용됨
    • ex) React, Vue, Angular 등
    • JSX 문법에서는 onClick, onMouseOver 등 카멜케이스로 사용

DOM 프로퍼티 방식

  • HTML 요소의 DOM 프로퍼티로 이벤트 핸들러 등록
  • 프로퍼티 이름은 on + 이벤트 타입
    • ex) element.onclick, element.onmouseover, element.onmouseout, element.onkeydown, element.onkeyup 등
  • 프로퍼티 값은 이벤트 핸들러 함수
    • ex) element.onclick = function() { alert('clicked!'); }
  • 단점 : 하나의 이벤트 타입에 하나의 이벤트 핸들러만 등록
    • ex) element.onclick = func1; element.onclick = func2; -> func1이 func2로 덮어써짐
  • 구성 : 이벤트 타깃.on + 이벤트타입 = 이벤트 핸들러
  • HTML과 JS 코드가 분리되어 유지보수성 향상, 하지만 이벤트 핸들러 프로퍼티에 하나의 이벤트 핸들러만 바인딩 가능

addEventListener 메서드 방식

  • EventTarget.prototype.addEventListener() 메서드로 이벤트 핸들러 등록
  • 앞선 2가지 방식은 DOM Level 0 이벤트 모델, 이 방식은 DOM Level 2 이벤트 모델
  • ex) element.addEventListener('click', function() { alert('clicked!'); }, [useCapture]);
  • 캡처링, 버블링 등 이벤트 전파 방식 제어 가능
  • 하나의 이벤트 타입에 여러 개의 이벤트 핸들러 등록 가능
  • 제거는 EventTarget.prototype.removeEventListener() 메서드 사용
    • 제거하기 위해서는 이벤트 핸들러 함수 참조 필요 -> 변수나 자료구조에 함수 할당 후 사용

이벤트 객체

  • 이벤트 핸들러가 호출될 때 브라우저가 이벤트 객체를 이벤트 핸들러의 첫 번째 인수로 전달
  • 이벤트 객체는 이벤트에 대한 다양한 정보를 담고 있는 객체
  • 클릭 이벤트에 의해 생성된 이벤트 객체는 이벤트 핸들러의 첫 번째 인수로 전달되어 매개변수 e에 암묵적으로 할당된다. 
    element.addEventListener('click', function(e) {
  console.log(e); // MouseEvent 객체
});
  • 이벤트 핸들러 어트리뷰트 방식인 경우 이벤트 객체를 전달받으려면 이벤트 핸들러의 첫 번째 매개변수 이름이 반드시 event여야 한다. 
    <button onclick="console.log(event)">Click me</button>

이벤트 객체의 상속 구조

  • 이벤트 객체는 다양한 이벤트 타입에 따라 여러 종류가 존재
  • 모든 이벤트 객체는 Event 인터페이스를 상속받음
  • 이벤트 객체의 상속 구조
    • Event
      • UIEvent
        • MouseEvent : 마우스 이벤트 객체
          • WheelEvent
          • PointerEvent
          • DragEvent
        • KeyboardEvent
        • FocusEvent
        • TouchEvent
        • CustomEvent : 사용자 정의 이벤트 객체, 자바스크립트 코드에 의해 인위적으로 생성한 이벤트 객체

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

  • type : 이벤트 타입

  • target : 이벤트가 발생한 요소(이벤트 타깃)

  • currentTarget : 이벤트 핸들러가 등록된 요소(이벤트 리스너 타깃)

  • eventPhase : 이벤트 전파 단계(캡처링, 타깃, 버블링)

  • bubbles : 이벤트가 버블링되는지 여부

  • cancelable : preventDefault()를 호출하여 이벤트의 기본 동작을 취소할 수 있는지 여부

  • defaultPrevented : 이벤트의 기본 동작이 취소되었는지 여부

  • isTrusted : 이벤트가 신뢰할 수 있는지 여부(사용자 액션에 의해 생성된 이벤트인지 여부)

  • timeStamp : 이벤트가 생성된 시간(1970년 1월 1일 00:00:00 UTC 이후 경과한 밀리초)

  • 체크 박스 예시

    <input type="checkbox" id="checkbox">
<label for="checkbox">Check me</label>
<script>
  const checkbox = document.getElementById('checkbox');
  checkbox.addEventListener('change', function(e) {
    console.log('type:', e.type); // change
    console.log('target:', e.target); // <input type="checkbox" id="checkbox
    console.log('currentTarget:', e.currentTarget); // <input type="checkbox" id="checkbox">
    console.log('eventPhase:', e.eventPhase); // 2 (AT_TARGET)
    console.log('bubbles:', e.bubbles); // true
    console.log('cancelable:', e.cancelable); // false
    console.log('defaultPrevented:', e.defaultPrevented); // false
    console.log('isTrusted:', e.isTrusted); // true
    console.log('timeStamp:', e.timeStamp); // 이벤트가 생성된 시간(밀리초)
    console.log('checked:', e.target.checked); // 체크 여부
  });
</script>

    -> 체크 박스의 체크 여부는 checked 프로퍼티로 확인 가능

  • 일반적으로 target과 currentTarget은 동일하지만, 이벤트 위임 시 다를 수 있음

    • ex) 부모 요소에 이벤트 핸들러 등록, 자식 요소 클릭 시 target은 자식 요소, currentTarget은 부모 요소