[JavaScript] 이벤트

이벤트

• 이벤트(event)
  • 웹브라우저가 알려주는 HTML 요소에 대한 사건의 발생을 의미
• 이벤트 타입 event type
  • 이벤트의 종류를 나타내는 문자열로 event name 이라고도 한다.
  • 키보드, 마우스, HTML DOM, Window 객체 등을 처리하는 이벤트
• 이벤트 리스너(event listener)
  • 이벤트가 발생했을 때 그 처리를 담당하는 함수, event handler 라고도 한다.
  • 이벤트가 특정 요소에서 발생시, 그 요소에 등록된 이벤트 리스너 실행
• 이벤트 리스너 등록
  • 객체나 요소에 프로퍼티로 등록하는 방법
    • 자바스크립트 코드에서 프로퍼티로 등록
      • 이벤트 타입별로 하나의 이벤트 리스너만 등록 가능
      • window.onload = function() { … }
    • HTML 태그에 속성으로 등록
      • <p onclick="alert('문자열을 클릭했어요!')">
  • 객체나 요소의 메소드에 이벤트 리스너를 전달하는 방법
    • addEventListener() 메소드
      • 대상객체.addEventListener(”이벤트명”, 실행할함수명, 이벤트전파방식)
        • 이벤트 전파 방식은 false면 버블링(bubbling) 방식으로, true면 캡처링(capturing) 방식으로 이벤트를 전파
• 여러 개의 이벤트 리스터 등록
  • addEventListener() 메소드 사용시 하나의 객체에 여러 이벤트 리스너 등록 가능
• 이벤트 리스너 삭제
  • removeEventListener() 메소드
    • 객체명.removeEventLister(”이벤트명”, 함수명);
• 이벤트 객체 event object
  • 모든 이벤트 객체는 이벤트 타입을 나타내는 type 프로퍼티와 이벤트의 대상을 나타내는 target 프로퍼티를 가진다.
  • event.type, event.target
• 이벤트 전파 방식
  • 이벤트 리스터를 실행시킬 대상 요소를 결정하는 과정
  • 전파 방식
    • 버블링(bubbling) 전파 방식
      • 이벤트가 발생한 요소부터 시작해서 DOM 트리를 따라 위쪽으로 올라가며 전파되는 방식
    • 캡쳐링(capturing) 전파 방식
      • DOM 트리의 최상위부터 아래쪽으로 내려가면 전파되는 방식
      • 해당 전파방식을 사용하기 위해서는 addEventListener() 메소드의 세번째 인수에 true 전달
• 이벤트 기본 동작의 취소
  • event.preventDefault();
    • 링크의 기본 동작 취소
• 이벤트 전파의 취소
  • event.stopPropagation()