Beyond_SW_Camp 13기 60일차 (JavaScript)

이벤트(Event)

1. 이벤트(Event)

• 브라우저에서 사용자가 하는 모든 행위(마우스 클릭, 키보드 입력 등)를 이벤트(Event)라 한다.
• 자바스크립트를 사용하여 브라우저에서 발생하는 이벤트에 대해 특정 기능을 수행하도록 설정할 수 있다.

2. 이벤트 설정 방법

2.1. 인라인 방식

• HTML 태그에 이벤트 핸들러 속성을 이용하여 직접 자바스크립트 코드를 작성하는 방법이다.
• <button onclick="수행 코드;">버튼</button>

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

• 요소가 가지고 있는 이벤트 속성에 이벤트 핸들러를 설정하는 방법이다.
• let button = document.getElementById('btn'); button.onclick = function () { // 수행 코드 }

2.3. addEventListener() 메소드 방식

• W3C에서 공식적으로 권장하는 이벤트 지정 방식으로 addEventListener() 메소드를 통해 이벤트 핸들러를 설정하는 방법이다.
• 하나의 이벤트에 대해 여러 개의 이벤트 핸들러를 등록할 수 있다.
• let button = document.getElementById('btn'); button.addEventListener('click', function() { // 수행 코드 },[true or false]);

3. 이벤트 객체

• 이벤트 객체의 속성속성 내용

  currentTarget	이벤트 발생한 bubbling 범위 내 이벤트 핸들러의 this와 같은 값을 가짐
  data	이벤트 핸들러로부터 받아오는 값
  delegateTarget	현재 호출된 이벤트 핸들러에 연결된 객체 리턴
  namespace	사용자 지정 이벤트명 리턴
  pageX	왼쪽 기준 마우스 위치 리턴
  pageY	위쪽 기준 마우스 위치 리턴
  relatedTarget	마우스가 요소에 들어오거나 나오는 요소 리턴
  result	이벤트 핸들러가 반환한 값을 보관
  target	이벤트가 발생한 요소 리턴
  timestamp	이벤트가 발생한 시간, 밀리 세컨드 초로 리턴
  Type	발생한 이벤트를 리턴
  Which	키/마우스를 눌렀을 때 그 키의 정수값 리턴

• 이벤트 객체 메소드메소드 내용

  isDefaultPrevented()	preventDefault()가 호출되었는지 확인
  isImmediatePropagationStopped()	stopImmediatePropadation()이 호출되었는지 확인
  isPropagationStopped()	stopPropagation() 호출됐는지 확인
  preventDefault()	기본 이벤트 발생 방지
  isImmediatePropagation()	실행된 한 개 이벤트 제외하고 나머지는 동일한 이벤트 중단
  stopPropagation()	bubbling을 막는 메소드

4. 이벤트 전달 제거

• 요소에 기본적으로 설정되어 있는 이벤트를 제거하거나(ex. <a>, submit) 이벤트가 상위 요소로 전달되는 것을 제거한다.메소드 내용

  event.preventDefault();	기본 이벤트를 제거하는 메소드
  event.stopPropagation();	이벤트 전달을 제거하는 메소드