이벤트

프로퍼티/메서드타입R/W설명

bubbles	bool	R	이벤트가 버블링되는지 나타냄
cancelable	bool	R	이벤트의 기본 동작 취소가능 여부
currentTarget	element	R	현재 이벤트를 처리중인 element
defaultPrevented	bool	R	true면 preventDefault()호출상태
detail	integer	R	이벤트와 관련된 추가정보
eventPhase	integer	R	이벤트 핸들러가 호출된 단계(1:캡처링,2:타깃,3:버블링)
preventDefault()	Function	R	이벤트의 기본행동 취소, cancelable가 true일때 기능함
stopImmediatePropagation()	Function	R	이벤트캡처링,이벤트버블링 모두 취소하며 다른 이벤트 핸들러 호출을 막음.
stopPropagation()	Function	R	이벤트캡처링,이벤트버블링 모두 취소합니다. bubbles가 true일때 기능합니다.
target	element	R	이벤트 타깃
trusted	bool	R	브라우저에서 생성한 이벤트라면 true 개발자가 만든 자바스크립트 이벤트라면 false
type	string	R	발생한 이벤트 타입
view	AbstractView	R	이벤트와 연결된 추상화된 뷰입니다. 이벤트가 발생한 window객체와 일치

[출처] https://blog.sonim1.com/152

13.2 이벤트 - 이벤트 객체

 

※ 이벤트(event)

사건의 발생을 의미하며 발생한 이벤트에 따라 정해준 특정 동작을 수행하는 것이다.

 

이벤트 리스너(event listener)

이벤트가 발생했을 때 처리해주는 함수 - 이벤트 핸들러라고도 함.

 

이벤트 리스너 호출하는 방법

이벤트 리스너가 등록되어 있는 상태에서 지정된 특정 이벤트가 발생하면 등록된 이벤트 리스너를 호출해줌.

이때, 이벤트 리스너 인수로는 이벤트 객체(event object)를 전달 받고, 식별자를 통해서 전달받은 이벤트 객체를 참조하게된다.

 

 

 

 

★ 버블링과 캡쳐링 전파 방식 비교

 

- 버블링(bubbling)  ↑

이벤트가 발생한 요소부터 시작해, DOM 트리를 따라 위쪽으로 올라가며 전파되는 방식 

해당 요소의 리스너가 실행된 후, 그 부모 요소에 등록된 리스너가 실행되고, 다시 그 부모 요소에 등록된 리스너가 실행됨

다수 요소에 공통으로 적용되는 에빈트 리스너에서 각각의 요소마다 지정할 필요 없이, 공통적으로 이어지는 조상 요소에 한 번만 등록하면 모두 처리할 수 있음.

 

- 캡쳐링(capturing) ↓

이벤트가 발생한 요소까지 DOM 트리의 최상위부터 아래쪽으로 내려가면서 전파되는 방식

가장 먼저 Window 객체의 리스너가 실행된 후, Documnet 객체에 등록된 리스너가 실행되고, 그 이후에 다시 그 자식 요소에 등록된 리스너가 실행됨 --> 이러한 전파로 이벤트가 발생한 요소까지 이어짐

이 전파 방식을 사용하는 방법은 addEventListener() 메소드의 세 번쨰 인수에 true를 전달하면 됨

 

 

cf. 이벤트의 대상이 되는 요소에 이벤트가 전달되기 전에 상위에서 가로채게되거나 잡아내게 (취소하게) 되면 이벤트를 걸러내에서 해당 이벤트가 호출되지 않도록 할 수 있다.  --> 이 기법을 이벤트 취소 기법이라한다. (잘 이해가 안감)

 

버블링 캡쳐링 참고

https://ko.javascript.info/bubbling-and-capturing#ref-286

버블링과 캡처링

 

 

//이벤트 전파의 취소

 

 

 

 

 

참고

http://tcpschool.com/javascript/js_event_concept

코딩교육 티씨피스쿨

http://tcpschool.com/javascript/js_event_eventListenerRegister

코딩교육 티씨피스쿨

http://tcpschool.com/javascript/js_event_eventListenerCall

코딩교육 티씨피스쿨

https://www.w3schools.com/jsref/obj_event.asp

Event Object