이벤트의 이해 [JavaScript][이벤트전파][이벤트막기]

이벤트

[광고 누르면 오늘의 행운 상승!!]

• 이벤트 : 웹 브라우저에서 웹 문서에 특별한 일이 있을 때 발생하는 신호
• 예) 텍스트 입력 서식에 커서가 위치, 텍스트 입력, 마우스 이동, 보튼 클릭, 이미지 로딩 등

이벤트 핸들러

• DOM 객체에 할당되어 해당 객체의 이벤트 반응에 호출되어 처리되는 프로퍼티
• 이벤트 핸들러의 역할

1. 이벤트 발생 감시
2. 이벤트 감지
3. 지정된 자바스크립트 코드 또는 함수 호출

이벤트 모델

• 이벤트 핸들러와 이벤트 API 정리
• 웹 브라우저와 시기별로 3가지의 다른 이벤트 모델 존재 → 이유 : 웹브라우저의 종류에 따라 변화되고 개선

기본 이벤트 모델(Original event model)

• 오래된 모델
• 마이크로 소프트 인터넷 익스플로러 버전 8 이하와 호환 안됨
• 기술적으로 부족함 → DOM Level 0 이벤트 모델

표준 이벤트 모델(Standard event model)

• 기본 이벤트 모델 개선화, 표준화
• 현재 마이크로소프트 인터넷 익스프롤러 버전 9 이상과 다른 모든 웹브라우저에서 지원
• 표준 이벤트 모델 사용을 강력히 권장 → DOM Level 2 이벤트 모델

인터넷 익스플로러 이벤트 모델(Internet Explorer event model)

• 마이크로 소프트 인터넷 익스플로러 버전 8까지의 독자적인 이벤트 모델
• 다른 웹 브라우저에서는 지원하지 않음
• 현재는 사용하지 않음

이벤트 모델의 이벤트 핸들러 종류

<<마우스 관련 이벤트>>

onclick     : 마우스 클릭을 감지

onmousedown : 마우스 단추가 눌렸는지를 감지

onmouseup   : 눌려졌던 마우스 단추가 올려졌는지를 감지

onmouseover : 마우스 커서가 특정 객체 위에 올라갔는지를 감지

onmouseout  : 마우스 커서가 특정 객체에서 벗어났는지를 감지

onmousemove : 마우스 커서의 이동을 감지

 

<<로딩 관련 이벤트 핸들러>>

onload   : 이미지 또는 화면 로딩이 완료 되었는지를 감지

onunload : 현재 화면에서 벗어날 때를 감지(링크로 페이지 이동 등) 

 

<<서식 관련 이벤트 핸들러>>

onsubmit / onreset : 서식이 전송 / 재설정 될 때를 감지

onfocus  / onblur  : 특정 서식 요소에 마우스 커서나 텍스트 커서가 접근함 / 벗어남 감지

 

<<키보드 관련 이벤트 핸들러>>

onkeydown  : 키보드가 눌렸는지를 감지

onkeypress : 키보드가 눌려지고 있는지를 감지

onkeyup    : 눌려진 키보드가 올려졌는지를 감지

 

<<그 외 HTML5의 이벤트 핸들러>>

onbeforeonload : 도큐먼트 로딩 전에 이벤트 감지

onhaschange    : 도큐먼트에 변화가 있을 때 발생하는 이벤트 감지

onmousewheel   : 마우스 휠을 돌릴 때 발생하는 이벤트 감지

onplay         : 로딩 된 미디어 파일이 재생될 때 발생하는 이벤트 감지

 

이벤트 기본 기능 막기

<a href = "second.html" onclick =alert('두 번째 페이지로 갈까요?') 
return true;>SecondPage</a>

return 값 참 ->
코드 : return true;
기본 이벤트 기능 수행
-> second.html 페이지로 이동

return 값 거짓 ->
코드 : return false;
기본 이벤트 기능 수행 안함
-> second.html 페이지로 이동 안함
-> 기본으로 작동하는 기능 실행 막음

※ return 문을 쓰지 않으면 기본적으로 참 값 리턴 ※

 

자바스크립트에서 이벤트 할당

• 예1) window.onload = init;
• 화면 로딩이 완료되면 init 함수를 호출

window.onload = init;    // O

window.onload = init();  // X

HTML속성으로 적용된 이벤트 핸들러는 JavaScript의 반환값을 할당받지만
Javascript에서 DOM객체의 프로퍼티로 적용된 이벤트 핸들러는 함수 자체를 호출한다.

 

• 예2) 웹 페이지 내 특정한 객체에 이벤트 핸들러 적용

document.form[0].element[0].onfocus = viewCaution;
document.getElementById("next").onclick = goNext;

 

이벤트 인터페이스 (이벤트 API)

• 호출 함수는 이벤트 객체를 인자로 받음
• 전달 받은 이벤트 객체는 이벤트 API를 이용하여 각종 이벤트 정보를 구함
• 예) 이벤트 인터페이스
  웹 페이지 내, 클릭한 곳의 좌표를 얻는 코드

function mousePos(event){
	var mousePosX = event.clientX;
	var mousePosY = event.clientY;
	var outputString = "X=" + mousePosX + ", Y=" + mousePosY;
	alert(outputString);

	clientX, clientY를 이용하여 웹페이지 좌표를 얻어 경고창으로 제시

이벤트 프로퍼티 : clientX, clientY, screenY, keyCode, altKey, shiftKey, type
}

 

표준 이벤트 모델

• 기본 이벤트 모델의 문제점을 보완하고 추가적인 API를 포함하여 표준으로 공표한 이벤트 모델
• DOM Level 2 Event Model
• 다양한 이벤트 API
• 고급 이벤트 처리 방식(복잡하고 정밀한 이벤트 전파 제어)

addEventListener

• DOM 객체에 이벤트 핸들러 함수를 적용
• 예) Drag & Drop 예제 코드

document.addEventListener('load' , dragNdropInit, true);

페이지 로딩 완료 이벤트 발생 시 dragNdrop 함수 호출
-addEventListener의 인자
1. 이벤트 핸들러 'load' (기본 이벤트 모델 : onload)
2. 실행 될 함수 : dragNdropInit
3. 이벤트 감지 : true(참/거짓)

function dragNdropInit(){
	document.getElementById("drag").addEventListener('mousedown', mouseDown, true);
	document.getElementById("drag").addEventListener('mouseup', mouseUp, true);
}

addEventListener를 ID 'drag'인 객체에 적용
마우스로 럭비공 끌고 다니기 설정 : CSS에서 포지션 릴레이티브로 지정

1. mousedown : 마우스 눌렀을 때
2. mouseup   : 누른 마우스를 풀었을 때

 

기본 이벤트 기능 막기

• preventDefault(); : 이벤트 API를 이용하여 이벤트 기본 기능 작동을 막음

function mouseDown(event){
	event.preventDefalut();
  //이벤트 기본 기능 작동 멈추게 함
  //마우스로 끌기 효과 만드려면 반드시 마우스 누르는 이벤트 기본 기능이 멈추어야 함

	dragNdropInit.objPosX = event.target.offsetLeft - 8;
	dragNdropInit.objPosY = event.target.offsetTop[ - 8;

	//target : 이벤트가 발생한 객체
  // -> event.target : id 가 drag인 객체
	//offsetTop : top위치 값 읽기
  // -8한 이유 : 기본적인 body 마진 제거

	document.getElementById("drag").addEventListener('mousemove', mouseMove, true);
	//이벤트 리스너 : 마우스 움직임 발생 시 이벤트 감지
  -> addEventListener : 마우스가 단추 누른 상태에서 움직임 감지
}

this와 target

function mouseMove(event){
	var newPosX = event.clientX;
	var newPosY = event.clientY;

	event.target.style.left = dragNdropInit.objPosX + newPosX - dragNdropInit.startPosX + "px";
	//이벤트 발생한 객체에 left, top 스타일을 새로 지정 
	// -> 마우스가 커서 따라가게 함

	this.style.top = dragNdropInit.objPosY + newPosY - dragNdropInit.startPosY + "px";
	// event.target가 아닌 this 사용
	// 이벤트 핸들러가 호출하는 함수의 this역할 : 이벤트가 발생한 객체
	// event.target == this
}

※ event.target과 this 둘중에 한 가지만 사용하는 것이 좋음
특히 event.target사용이 이벤트 전파시 발생하는 문제 피할 수 있음!

 

이벤트 핸들러 제거

• removeEventListener를 이용
• 짝이되는 addEventListenr와 똑같은 세가지 인자를 가지고 있어야 함

function mouseUp(event){
		document.getElementById("drag").removeEventListener('mousemove', mouseMove, true);
}

이벤트 전파의 이해

• 이벤트 전파 : 발생한 이벤트는 상위 노드로 전파된다.
• 이벤트 전파의 3단계

1. document 노드 → 이벤트 발생 노드
2. 이벤트 발생 노드
3. 이벤트 발생 노드 → document 노드

addEventListener의 이벤트 전파 관련 인자

• addEventListener의 마지막 인자가 이벤트 전파 관련 인자

addEventListener('click', bang, false);

 

<<참일경우>>

이벤트 전파 전 과정에서 이벤트 호출 감지
이벤트 캡쳐링, 케스케이드 다운이라고 부름

3 -> 2 -> 1(누른 객체)

 

<<거짓일 경우>>

두 번째와 세 번째 과정 이벤트 대상 객체부터 document까지 내려가는 과정 이벤트 호출 감지
이벤트 버블링 또는 버블 업 이라고 부름

1(누른 객체) -> 2 -> 3

 

이벤트 전파 방지

• stopPropagation : 이벤트 전파를 막는 이벤트 API

window.addEventListener('load' , init, false);

function init(event){
	document.getElementById("apple").addEventListener('click', bang, false);
	document.getElementById("lemon").addEventListener('click', bang, false);
  document.getElementById("strawberry").addEventListener('click', bang, false);
}

function bang (event){
	var targetName = event.currentTarget.getAttribute("id");
	if(targetName == 'lemon') event stopPropagation() // 더이상 전파를 막음
	alert(targetName);
}

 

currentTarget

• 전파된 이벤트가 도착한 객체

function bang (event){
	var targetName = event.currentTarget.getAttribute("id");
	var outputString = "현재 이벤트가 도착한 객체는 " targetName + "입니다";
	alert(outputString );
}

 

eventPhase

• 세 단계의 이벤트 전파 과정 중 현 단계가 몇 단계인지 알려줌

function bang (event){
	var targetName = event.currentTarget.getAttribute("id");
	var outputString = "현재 이벤트가 도착한 객체는 " targetName + "입니다";
	outputString += targetName+"은" + event.eventPhase + "번 째 이벤트 전파 단계입니다";
	alert(outputString );
}

 

timeStamp

• 이벤트 발생 시간을 밀리초 단위로 알려줌

var eventTime = new Date(event.timeStamp).toLocalTimeString();