가희의자기개발블로그
이벤트 소개 본문
01_이벤트란?
이벤트란 이름에서 알 수 있듯이 일종의 알림 기능이다. 예를들어, 태그 요소에서 마우스를 클릭하면 웹 브라우저는 마우스와 관련된 여러가지 정보가 담긴 MouseEvent라는 객체를 생성하고 마우스 이벤트를 발생시킨다. 이때, 마우스 이벤트에 들어있는 정보는 클릭한 마우스 버튼 정보, 클릭과 함께 누른 키보드 정보, 해당 페이지에서 클릭한 마우스의 위치 정보가 담긴다. 그리고 이벤트 리스너가 실행되는데 이것은 MouseEvent객체가 리스너 함수로 넘어오게 되기때문이다.
웹페이지에서도 사용자가 마우스를 클릭하거나 키보드 키를 입력하면 브라우저는 입력정보(클릭 위치, 클릭 버튼, 입력키 값 등)을 이벤트에 담아 개발자에게 알려 준다. 개발자는 이정보를 받아 여러가지 용도에 맞게 개발을 진행한다.
02_이벤트 종류
02_1 마우스 이벤트
사용자가 마우스 버튼을 눌렀을 때 발생하는 이벤트, 이때 이벤트에는 누른 마우스 버튼, 화면 상에서 마우스 버튼이 눌린 위치, Ctrl 키 또는 Alt 키를 누른 상태에서 마우스 버튼을 눌렀는지를 나타내는 정보가 담긴다.
02_2 키보드 이벤트
사용자가 키보드를 눌렀을 때 발생하는 이벤트, 눌린 키에 대한 정보가 이벤트에 담긴다.
02_3 태그요소 고유 이벤트
엘리먼트마다 발생하는 고유의 이벤트로 <img>태그요소의 경우 이미지가 모두 로드되면 load이벤트를 발생시켜 이미지가 성공적으로 로드됐음을 알리며<input>태그요소의 경우 입력한 정보가 바뀌면 change이벤트를 발생시켜 입력 정보가 변경됐음을 알린다.
02_4 사용자 정의 이벤트
개발자가 직접 만들어 사용하는 이벤트로 개발자 고유 라이브러리 또는 클래스를 만들고 이를 사용한 어떤 작업이 끝났음을 사용자에게 알려줄 때 개발자만의 이벤트를 만들어 사용한다.
03_이벤트 단계
- 단계1: 캡쳐 단계
- 단계2:타킷 단계
- 단계3: 버블링 단계
1. 이벤트 흐름: 이벤트 흐름은 오직 DOM노드 객체를 따라 이동한다. 사용자가 만든 객체에서는 절대 일어나지 않을 뿐더러 이벤트를 흐르게 할 수도 없다.
2.eventPhase 프로퍼티 : eventPhase는 이벤트 단계를 알 수 있는 프로퍼티이다.
캡쳐 단계
타깃 단계
버블링 단계
이렇게 3단계로 나뉜다.
03_01 캡처 단계
03_01_01 설명
가장 먼저 실행되는 이벤트 단계로서, 이벤트 흐름은 가장 최상위 노드인 document에서 시작해 <html>태그와 <body>태그를 거쳐 실제 이벤트를 발생시킨 노드 전까지 흐르게 되며 이 단계까지를 캡쳐 단계라고 한다. 이때 지나오며 만나는 노드 중 캡처 단계에 이벤트 리스너가 등록돼 있다면 이벤트 리스너가 실행된다.
03_01_02 이벤트 등록 방법
$대상.get(0).addEventListener(이벤트 이름, 리스너, true);jQuery의 경우 캡쳐 단계에 이벤트를 등록하는 기능을 제공하지 않는다. 즉 다음과 같이 jQuery 내부에 들어있는 자바스크립트 DOM에 접근해 자바스크립트 방식으로 이벤트를 등록해 줘야한다.
자바스크립트에서 캡처 단계에 이벤트를 등록하는 방법은 addEventListener()마지막 인자 값에 true를 넣어주면 된다.
03_01_02 캡처 단계 용도
캡쳐 단계 용도는 주로 타깃/버블링 단계의 이벤트 실행 전에 처리해야 할 사전 작업 또는 타킷/버블링 단계 이벤트 처리를 제어하는 용도로 아주 가끔 사용된다.
실무에서는 캡처 단계를 사용할 일은 거의 없다. 이벤트는 주로 타깃/버블 단계에 이벤트를 걸어 사용하며 jQuery에서도 기본으로 타깃/버블링 단계에 이벤트가 등록되게 만들어져 있다.
stopPropagation()은 캡처링과 버블링을 흐르지 않게 멈추는 기능을 하는 Event 객체에서 제공하는 메서드이다.
03_02 타깃 단계
03_02_01 설명
타깃 단계는 이벤트 흐름이 이벤트를 발생시킨 노드에 머무르는 단계를 말하며, 이때 이벤트를 발생시킨 노드에 이벤트가 등록되어 있다면 리스너가 실행된다.
03_02_02 이벤트 등록 방법
$대상.on(이벤트 이름, 리스너);on메서드와 같은 jQuery 이벤트 관련 메서드를 사용해 이벤트를 등록하는 경우 기본적으로 타깃과 버블 단계에 등록된다.
자바스크립트를 이용해 타깃/버블링 단계에 이벤트를 등록하는 방법은 다음과 같다.
$대상.get(0).addEventListener(이벤트 이름, 리스너, false);캡처 단계에서 true로 설정해 줬다면 이 단계에서는 false로 설정한다.
03_03 버블 단계
03_03_01 설명
버블 단계는 캡쳐 단계의 역순으로 흐르는 단계를 의미한다. 그리고 이 흐름을 버블링이라고 부른다.
03_03_02 이벤트 등록 방법
$대상.on(이벤트 이름, 리스너);타깃 단계와 이벤트를 등록하는 방법이 동일한데 타깃 단계인지 버블 단계인지 구분할 때는 Event객체의 eventPhase속성을 사용하면 된다.
중요한 것은 모든 이벤트가 버블링이 발생하진 않는다는 것이다. 또한 버블링이 발생하는 이벤트의 경우 버블링을 도중에 멈출 수도 있다. 이를 위해서는 Event객체에대한 이해가 필요하다.
04 Event
04_01 Event 객체의 용도
Event객체는 이벤트를 발생시키는 곳에서 이벤트와 관련된 정보를 담아 외부로 보낼 때 사용하는 일종의 저장소이다.
예를 들어, 사용자가 웹페이지의 특정 요소를 클릭하면 브라우저는 클릭한 마우스 버튼 정보와 클릭한 위치 정보 그리고 어떤 요소에서 이벤트가 발생했는지에 대한 정보 등을 Event객체의 자식 객체인MouseEvent객체에 가득 담아 사용자에게 알려준다.
04_01 Event 객체의 구조
Event객체에는 이벤트와 관련된 기본 기능이 구현돼 있다. Event객체는 MouseEvent등의 부모 객체이기도 하다. Event 기능 가운데 반드시 알고 있어야 할 핵심 프로퍼티와 메서드는 다음과 같다.
- eventPhase
이 프로퍼티에는 현재 이벤트의 위치에 관한 정보가 담겨 있다.
1 = 캡처 단계
2 = 타킷 단계
3 = 버블 단계
- Type : 발생한 이벤트 이름
- target : 실제 이벤트를 발생시킨 대상
- currentTarget : 캡처링 단계와 버블링 단계를 거치면서 만나게 되는 객체에 이벤트 리스너가 등록되어 있을 경우 리스너가 실행 되는데, 이때 리스너를 가지고 있는 대상이 담겨 있다. 이벤트 단게에 따라 target과 currentTarget은 같을 수도 있고 다를 수도 있다.
- cancelable 과 preventDefault() : 이 프로퍼티와 메서드를 이해하려면 기본 행동(default behavior)에 대해 알아야 한다. 여기서 기본 행동이란, 특정 이벤트 발생 후 실행되는 기능을 이야기 한다. 예를 들어, <a href="http://naver.com">ddandongne</a> 태그에서 링크를 클릭하면click 마우스이벤트가 발생한 후 http://naver.com 페이지로 이동한다. 바로 클릭 후 해당 링크로 이동하는 행동이 바로 기본 행동 중 하나이다. 이때 기본 행동을 취소하게 되는 경우 링크 이동은 발생하지 않게된다. 기본 행동은 concelable프로퍼티의 값이 true인 경우 preventDefault()를 이용해 기본 행동이 실행되지 않게 취소할 수 있다.
- bubbles와 stopPropagation() : bubbles가 true라면 현재 발생한 이벤트는 버블링이 발생하는 이벤트이며 이때 버블링을 도중에 중지시켜야하는 경우 stopPropagation() 메서드를 사용하면 된다.
| EventType | Bubbles | Cancelable |
| load | X | X |
| click | O | O |
| mousedown | O | O |
| mouseover | O | O |
| mousemove | O | X |
| blur | X | X |
| change | O | X |
| resize | O | X |
| scroll | O | X |
| focus | X | X |
'프론트엔드 > JavaScript+JQuery' 카테고리의 다른 글
| 요소의 위치 및 크기 관련 기능 (0) | 2020.07.17 |
|---|---|
| 이벤트 핵심 내용 (0) | 2020.07.15 |
| 속성 핵심내용 (0) | 2020.07.14 |
| 속성 소개 (0) | 2020.07.14 |
| Scope (0) | 2020.07.09 |