이벤트 전파( 버블링, 캡처링 ) / 기본동작의 취소 / 이벤트 타입에 대해서 정리한다.
이벤트 전파( 버블링과 캡처링 )
- 문서 전체적으로 엘리먼트마다 이벤트가 설정 되어있고 이 이벤트가 어떻게 실행 되는지의 내용을 이벤트 전파라고 한다.
- 버블링은 이벤트가 자식 엘리먼트부터 부모 엘리먼트 순서로 실행이 되는걸 말한다.
- 캡처링은 반대로 부모 엘리먼트부터 자식 엘리먼트 순서로 실행이 되는걸 말한다.
- 서로가 반대되는 개념이다.
* addEventListener()를 이용할때 세번째 인자는 capturing 사용에 대한 인자이다.
( 값을 true로 주게되면 capturing 방식으로 동작하고 false로 주거나 주지 않게 되면
bubbling 방식으로 동작한다 )
* event.eventPhase는 이벤트 흐름에서 현재 단계를 알려주는 속성이다.
( eventPhase=1 일때 capturing, eventPhase=2 일때 target, eventPhase=3일때 bubbling )
* event.stopPropagation()을 이용하면 해당 엘리먼트 이후에 이벤트 전파를 막을 수 있다.
( 위 방식은 버블링과 반대 개념인 캡처링 방식으로 부모에서 자식으로 이벤트가 전파되는걸 말한다.. )
( 위 이벤트 전파는 버블링 방식으로 자식에서부터 부모로 이동되는 방식이다..
addEventListener()를 이용할때 세번째 인자를 true로 주게 되면 캡처링 방식이고
그 외에 false나 인자를 주지 않으면 버블링 방식으로 이벤트가 전파된다... )
( stopPropagation()을 이용해서 해당 이벤트 이후에 전파가 되지 않도록 이벤트를 제어할 수 있다.. )
기본동작의 취소
- 사용자가 만들어서 동작하는 이벤트가 아닌 웹브라우저에서 기본적으로 동작하는 이벤트인
기본동작을 이벤트 방식에 따라서 취소할 수 있다.
( inline, 프로퍼티 리스너, addEventListener() 방식마다 취소 방식이 조금씩 다르다 )
* inline 방식
- 이벤트의 리턴값이 false이면 기본 동작이 취소된다.
* property 방식
- inline 방식과 똑같이 리턴값이 false이면 기본 동작이 취소된다.
* addEventListener 방식
- event 객체의 preventDefault 메소드를 실행하면 기본 동작이 취소된다.
이벤트 타입
- 웹브라우저에서는 onclick과 같이 많은 종류의 이벤트 타입을 제공한다.
폼
submit - 폼의 정보를 서버로 전송하는 명령인 submit시에 일어나는 이벤트
* submit을 이용해서 해당 서버로 전송하기 전에 입력값을 미리 검증 할 수 있다.
change - 폼 컨트롤의 값이 변경 되었을때 발생하는 이벤트
* input, textarea, select 태그에 적용된다.
( 해당 폼에 대한 값이 변경되면 그 값을 <p>태그 안에 넣도록 했다... )
blur, focus - 엘리먼트에서 포커스가 사라졌을 때 blur, 포커스가 생겼을 때 focus 이벤트가 발생한다.
( 해당 입력폼에 마우스를 클릭하게 되면 포커스가 생기므로 focus 이벤트가 발생한다.. )
( 해당 폼에서 포커스를 없애게 되면 blur 이벤트가 발생하면서 해당 경고창이 뜨도록 만들어놨다.. )
* <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>,
<title> 태그를 제외한 모든 태그에서 발생한다.
문서 로딩
- 웹페이지를 프로그래밍적으로 제어하기 위해서는 웹페이지의 모든 요소에 대한 처리가 끝나야 한다.
이것을 알려주는 이벤트가 load, DOMContentLoaded이다.
* load 이벤트는 문서내의 모든 리소스(이미지, 스크립트)의 다운로드가 끝난 후에 실행 되기 때문에
어플리케이션의 구동이 지연될 수 있다.
* DOMContentLoaded는 문서에서 스크립트 작업을 할 수 있는 상태인 즉, 문서 태그만 모두 정의 되어있다면
실행이 된다.
( 해당 엘리먼트보다 <script>를 위쪽에 배치하면 위 그림처럼 해당 id를 가져오지 못하는 문제가 발생할 수 있다.. )
( 그래서 보통 이런 문제를 발생 시키지 않기 위해서는 해당 엘리먼트보다 위쪽에 <script>를 배치한다..
하지만 load나 DOMContentLoaded 이벤트를 이용하면 이러한 문제를 해결할 수 있다.. )
( addEventListener()에서 load 이벤트를 이용하면 문서내의 모든 리소스를 다운로드 한후에 실행이 된다..
다만, 이러한 특성이 어플리케이션의 구동을 지연 시킬수 있다 )
( DOMContentLoaded 이벤트 같은 경우에는 load 이벤트와는 조금 다르게 문서에서 스크립트 작업을 할 수 있는 상태인
문서 태그만 모두 정의되어 있다면 실행이 되고 그렇기 때문에 load 이벤트보다 먼저 실행된걸 볼수 있다 )
마우스
이벤트 타입
- click
클릭했을 때 발생하는 이벤트.
- dblclick
더블클릭을 했을 때 발생하는 이벤트
- mousedown
마우스를 누를 때 발생
- mouseup
마우스버튼을 땔 때 발생
- mousemove
마우스를 움직일 때
- mouseover
마우스가 엘리먼트에 진입할 때 발생
- mouseout
마우스가 엘리먼트에서 빠져나갈 때 발생
- contextmenu
컨텍스트 메뉴가 실행될 때 발생
키보드 조합
event.shiftKey
event.altKey
event.ctrlKey
마우스 포인터 위치
clientX
clientY
댓글