JS 기초_01 (Event)

Event

• 네트워크 활동 혹은 사용자와의 상호작용 같은 사건의 발생을 알리기 위한 객체
• 이벤트는 마우스를 클릭하거나 키보드를 누르는 등 사용자 행동에 의해 발생할 수도 있고, 특정 메서드를 호출(HTMLElement.click())하여 프로그래밍적으로도 만들어낼 수 있음
• 이벤트 처리기 (Event-handlers)
  • EventTarget.addEventListener()
  • 해당 메서드를 통해 다양한 요소에서 이벤트를 붙일 수 있음
  • removeEventListener()를 통해 이벤트를 제거 가능

 

Event 기반 인터페이스

UIEvent ref : https://developer.mozilla.org/en-US/docs/Web/API/UIEvent

• AnimationEvent, ClipboardEvent, DragEvent 등
• 그 중에서도 'UIEvent'
  • 간단한 사용자 인터페이스 이벤트
  • Event의 상속을 받음
  • MouseEvent, KeyboardEvent, InputEvent, FocusEvent 등의 부모 객체 역할을 함

 

" 클릭하면 경고 창을 띄운다."

"특정 이벤트가 발생하면 할 일을 등록한다."

 

Event handler

Event ref : https://developer.mozilla.org/en-US/docs/Web/Events

• EventTarget.addEventListener()
• 지정한 이벤트가 대상에 전달될 때마다 호출할 함수를 설정
• 이벤트를 지원하는 모든 객체(Element, Document, Window 등)를 대상으로 지정 가능
• target.addEventListner(type, listener[, options])
  • type : 반응 할 이벤트 유형 (대소문자 구분 문자열)
  • listener : 지정된 타입의 이벤트가 발생 했을 때 알림을 받는 객체
  • EventListerner 인터페이스 혹은 JS function 객체(콜백 함수)여야 함