Event 객체

728x90

이벤트 객체란 DOM과 관련된 이벤트가 발생되면 이벤트와 관련된 상세한 정보를 저장하는 객체 일종의 저장소 이다.

예를 들어보자

마우스 클릭을 하면 마우스 정보와 클릭한 위치 정보 이벤트가 발생한 위치 등에 대한 정보를 이벤트객체의 자식 객체인 MouseEvent 객체에 담아 전달하는 역할을 한다.

모든 브라우저가 이벤트 객체를 지원하지만 세부 사항은 다르다.

event객체에서 이벤트 기본 기능이 구현 되어있다.

속성

type : 발생한 이벤트 타입 반환
target : 실제 이벤트를 트리거한(발생시킨) 엘리먼트 반환
currentTarget : 현재 이벤트를 처리하는 엘리먼트를 반환(캡처링과 버블링 단계를 거치면서 만나는 객체에 이벤트 리스너가 등록되어있으면 리스너가 실행되는데 이때 리스너를 가진 대상 요소가 담겨 있다.)
eventPhase : 이벤트 핸들러 호출단계를 알려줌
bubble:이벤트가 버블링이 발생하는 이벤트인지 true/false로 알려줌
concelable:이벤트의 기본 동작 취소 가능 여부를 알려줌
defaultPrevented : true로 되어있으면 preventDefault()메서드가 호출된 상태이다.
view : 이벤트가 발생한 window개체에 대한 참조를 반환

메서드

stopPropagation() : 이벤트캡처링, 이벤트 버블링 모두 취소 버블링을 도중에 중지시켜야 할때 사용 (bubbles가 true일때 가능)
stopImmediatePropagation() : 이벤트 캡처링, 이벤트 버블링 모두 취소 다른 이벤트 핸들러 호출을 막는다.
preventDefault() : 이벤트 기본행동 제거

기본행동이란 : 특정 이벤트 발생시에 기본적으로 실행되는 기능을 말한다.
예를들어 a태그는 링크를 클릭하면 링크 경로로 이동한다든지 하는 것을 기본 행동이라고 한다.

분석 시스템은 네비게이션에서 그 요소를 클릭한 횟수등을 확인할 수 있는데

stopPropagation()을 사용하면 알 수 없기 때문에 분석이 제대로 되지 않아 이런 영역을 dead zone이라고 부른다.

//예전방식
선택한 객체.on이벤트 타입명 = function(이벤트 객체 매개변수){

}

//addEventLister() 사용
선택한 객체.addEventListener('이벤트타입',function(이벤트 객체 매개변수)){

});

EVENT 객체 < UIEvent < MouseEvent, KeyboardEvent ..

EVENT 객체를 상속 받은 UIEvent는 마우스, 키보드, 포커스, 입력 이벤트 드으이 부모 이벤트 이다.

마우스 이벤트 등은 상속 받았기 때문에 event객체, UIEvent의 기능까지 모두 사용 가능하다

728x90

mooyou