Javascript : 이벤트, 버블링 & 캡처링, target & this
🍵 이벤트 객체
이벤트 객체는 이벤트 핸들러 안에 포함된 객체로 이벤트가 발생하면 생성된다. 이벤트에 대한 다양한 정보를 가지고 있다. 예를들어 이벤트 발생 대상(태그)에 접근할 때 this 키워드를 사용할 수 있다.
[이벤트 객체의 프로퍼티]
- altKey : 이벤트가 발생했을 때 alt키가 눌렸는지 여부를 boolean 값으로 반환
- ctrlKey : 이벤트가 발생했을 때 ctrl키가 눌렸는지 여부를 boolean 값으로 반환
- shiftKey : 이벤트가 발생했을 때 shift키가 눌렸는지 여부를 boolean 값으로 반환
- button : 마우스에서 누른 키 값 반환 (왼쪽 : 0, 휠 : 1, 오른쪽 : 2)
- charCode : keypress이벤트가 발생했을 때 어떤 키를 눌렀는지 유니코드 값으로 정보 반환
- clientX, clientY : 이벤트가 발생한 요소의 x좌표 위치와 Y좌표 위치 반환
- pageX, pageY : 현재 문서를 기준으로 이벤트가 발생한 X좌표와 Y좌표 위치 반환
- screenX, screenY : 현재 화면 기준으로 이벤트 발생한 X좌표와 Y좌표 위치 반환
- target : 이벤트가 최초로 발생한 대상 반환
- timeStamp : 이벤트가 발생한 시간 반환
- type : 발생한 이벤트의 이름 반환
- which : 키보드와 관련된 이벤트 발생시 키의 유니코드 반환
[메서드]
- preventDefault() : 기본이벤트 취소할 때 사용
- stopPropergation() : 기본이벤트 취소할 때 사용
🍵 addEventListner()메서드
changeButton.onclick = changeColor; 와 같이 앞에서 배운 이벤트 핸들러는 한 요소에 하나의 이벤트 핸들러만 연결할 수 있었다. 하지만 검색창 돋보기 버튼처럼 클릭과 엔터 이벤트를 연결해야 할 경우처럼 하나의 요소에 여러개 이벤트를 연결할 때 addEventListner()메서드를 사용한다.
[기본형]
요소.addEventListner('이벤트명', 함수(핸들러), 캡처 여부);
- 이벤트명 : 이벤트의 유형 지정. click이나 keydown처럼 on이라는 키워드는 넣지 않는다.
- 함수 : 이벤트가 발생하면 실행할 명령이나 함수 입력.
여기서 함수를 정의할 때는 event객체를 인수로 받는다.
(매개변수) 자리에 이벤트 객체가 생성된다.- 캡처 여부 : 이벤트를 캡처할지 여부를 지정하며 기본값은 false이고 true나 false중 선택할 수 있다. true면 캡처링, false면 버블링의 의미. 캡처링은 DOM의 부모노드에서 자식노드로 이벤트 전달, 버블링은 자식노드에서 부모노드로 이벤트 전달.
🍵 표준 DOM이벤트 흐름 3단계
- 캡처링 단계 - 이벤트가 하위요소로 전파
- 타겟 단계 - 이벤트가 실제 타겟요소에 전파
- 버블링 단계 - 이벤트가 상위요소로 전파
🍵 버블링
버블링이란 DOM의 자식노드에서 부모노드로 이벤트를 전달하는 것을 말하며 기본값이다. 단 모든 이벤트가 버블링 되는 것은 아니다.
작동 원리 : 한 요소에 이벤트가 발생하면 이 요소에 할당된 핸들러가 동작하고 이어 부모요소 핸들러가 동작한다. 가장 최상위 요소를 만날 때까지 반복되며 각각 요소의 핸들러가 동작한다.
🍵 캡처링
캡처링은 반대로 DOM의 부모노드에서 자식노드로 이벤트를 전달하며 기본값은 false로 캡처링이 되지 않고, addEventListner의 마지막 인자값 자리에 true를 넣었을 경우에만 발생한다.
캡처링은 이벤트 리스너에 마지막 인수자리에 true를 설정하면 진행된다. 이때 최상위 요소부터 타겟 요소까지 순차적으로 내려오며 이벤트 실행.
[기본형]
요소.addEventListner('이벤트명', 함수, true);
요소.addEventListner('이벤트명', 함수, {capture : true});
🍵 event.target ★
부모요소의 핸들러는 이벤트가 정확히 어디에서 발생했는지에 대한 정보를 얻을 수 있다. 이벤트가 발생한 가장 안쪽 요소는 target요소라고 부르고 event.target을 사용해 접근할 수 있다.
★ event.target / this(= event.currentTarget)의 차이
- event.target : 실제 이벤트가 시작된 타겟 요소. 클릭 이벤트라면, 클릭을 하는 요소. 버블링이 진행되어도 변하지 않음.
- this : 이벤트 핸들러를 가지고 동작시키는 태그
target과 this가 같을 수도 있다.
🍵 버블링 중단하기
이벤트 버블링은 타켓 이벤트에서 시작해서 html요소를 거쳐 document 객체를 만날 때까지 각 노드에서 모두 발생한다. 몇몇 이벤트는 window객체까지 거슬러 올라가기도 한다. 이때 모든 이벤트 핸들러가 실행된다. 핸들러에게 이벤트를 완전히 처리한 후 버블링을 중단하도록 명령할 수 있다. event.stopPropergation()메서드를 사용한다.
<!-- 버블링 : span을 클릭해도 div의 alert가 실행됨 -->
<div class="first_div" onclick="alert('div에 할당한 이벤트 핸들러!')">
<span> span태그를 클릭해도 div에 할당한 이벤트가 동작합니다. </span>
</div>
<form onclick="alert('form')">
form
<div onclick="alert('div')">
div
<p onclick="alert('p')">p</p>
</div>
</form>
<div onclick="alert('버블링은 여기까지 도달하지 못합니다.')">
<button type="button" onclick="event.stopPropagation()">
클릭해주세요.
</button>
</div>