[JavaScript] 이벤트 처리(event handling)

자바스크립트 이벤트 모델

• 자바스크립트는 이벤트 드리븐(event-driven) 모델에 기반한다.
  웹페이지 안에서 발생한 여러 가지 이벤트에 따라 대응하는 방법들(이벤트 핸들러)을 이용해 처리한다.
• 이벤트에 대응해 처리를 담당하는 함수를 이벤트 핸들러라고 한다.

 

이벤트 발생 형태

• 애플리케이션 사용자가 발생시키는 이벤트
  예) 버튼 클릭, 키보드 입력 등
• 애플리케이션 스스로 발생시키는 이벤트
  예) 페이지 로드 등

---

 

자바스크립트 주요 이벤트

분류	이벤트명	발생 타이밍	주 대상 요소
읽기	abort	이미지의 로딩이 중단되었을 때	img
	load	페이지, 이미지의 로딩 완료 시	body, img
	unload	다른 페이지로 이동할 때	body
마우스	click	마우스 클릭 시	-
	dbclick	더블클릭 시	-
	mousedown	마우스 버튼을 눌렀을 때	-
	mousemove	마우스 포인터가 이동했을 때	-
	mouseout	요소에서 마우스 포인터가 떨어졌을 때
	mouseover	요소에 마우스 포인터가 겹쳤을 때	-
	mouseup	마우스 버튼을 떼어 놓았을 때	-
	contextmenu	context menu가 표시되기 전	body
키	keydown	키를 눌렀을 때	-
	keypress	키를 누른 상태	-
	keyup	키를 떼어 놓았을 때	-
폼	change	내용이 변경되었을 때	input(text), select
	reset	리셋 버튼이 눌렸을 때	form
	submit	서브밋 버튼이 눌렸을 때	form
포커스	blur	요소로부터 포커스가 벗어났을 때	-
	focus	요소가 포커스되었을 때	-
그 외	resize	요소의 사이즈를 변경했을 때	-
	scroll	스크롤했을 때	body

 

주요 이벤트 핸들러

이벤트 핸들러	기능 설명
onAbort	사용자의 작업을 빠져나오는 이벤트
onBlur	입력 폼 양식을 다른 곳으로 이동하는 이벤트
onChange	입력 폼 양식을 변경해 주는 이벤트
onClick	입력 폼 양식을 마우스로 클릭해 주는 이벤트
onDbClick	마우스를 더블 클릭해 주는 이벤트
onDragDrop	마우스를 드래그하여 끌어주는 이벤트
onError	이미지나 윈도우를 읽는 도중 에러가 발생할 때 수행하는 메소드
onKeyDown	사용자가 키를 눌렀을 때 발생하는 이벤트
onKeyPress	사용자가 키를 눌렀다가 놓았을 때 발생하는 이벤트
onKeyUp	사용자가 키를 눌렀다가 떼었을 때 발생하는 이벤트
onLoad	이미지나 문서 프레임 등을 로드시키는 이벤트
onMouseDown	사용자가 마우스 버튼을 눌렀을 때 발생하느 ㄴ이벤트
onMouseMove	마우스를 이동시키는 이벤트
onMouseOut	링크나 클라이언트 측에서 마우스를 옮기는 이벤트
onMouseOver	마우스를 링크나 클라이언트 측으로 옮기는 이벤트
onMouseUp	사용자가 마우스를 놓는 이벤트
onMove	윈도우나 프레임을 옮기는 이벤트
onReset	폼을 리셋시키는 이벤트
onResize	윈도우나 프레임의 크기를 재조정하는 이벤트
onSelect	필드나 영역을 선택하는 이벤트
onSubmit	폼을 보내는 이벤트
onUnload	문서나 프레임 세트를 종료하는 이벤트
onFocus	문서나 윈도우, 폼 요소 등에 입력 포커스를 설정하는 이벤트

 

 

---

이벤트와 이벤트 핸들러 연결(이벤트 모델)

자바스크립트에서는 이벤트와 이벤트 핸들러를 연결하기 위한 2가지 방법을 제공한다.
(DOM Level 0, DOM Level 2)

 

DOM Level 0

인라인 이벤트 모델, 고전 이벤트 모델

 

인라인 모델, 고전 모델의 공통 적용 규칙

1. 각 요소에 이벤트 타입별로 하나의 이벤트 핸들러만 연결 가능
   
   
2. 이벤트 핸들러 내에서 이벤트 발생 객체를 사용하려면 this를 사용한다.
   
   
3. 이벤트 핸들러 내에서 발생된 이벤트의 정보를 담고 있는 이벤트 객체(event)를 사용하려면, 핸들러 함수의 파라미터로 전달받는다.
   (IE 8 이하는 window.event 사용)
   
   
4. 요소에 등록되어 있는 기본 이벤트 핸들러를 해제하려면 이벤트 핸들러 함수에서 마지막에 false를 리턴한다.
   
   
5. 고전 이벤트 모델은 요소에 연결된 이벤트 핸들러를 해제할 수 있지만, 인라인 이벤트 모델은 해제할 수 없다.

---

인라인 이벤트 모델

인라인 이벤트 모델은 스크립트 코드 내에 이벤트 발생 시 실행될 함수(이벤트 핸들러)를 구현하고,

body 태그 내에서 이벤트 발생 시 함수를 호출하는 코드를 적어준다.

<script>
function btn_onclick(){
	함수 구현;
}
</script>

<input type="button" value="다이얼로그 표시" onclick="btn_onclick()">
<!--onclick 이벤트 발생시 btn_onclick() 함수를 호출-->

 

 

 

• 인라인 이벤트 모델의 예

 

'클릭' 버튼을 누르면(onclick 이벤트 발생) xxx() 함수가 호출된다.

 

'클릭' 버튼에 마우스 커서를 올려 놓으면(onmouseover 이벤트 발생) yyy() 함수가 호출된다.

 

'클릭' 버튼에서 마우스 커서를 떼면(onmouseout) zzz() 함수 호출

 

input type에 값을 입력하면 onkeyup 이벤트 발생

-> kkk()함수 호출되어 id="userid"의 value값이 콘솔창에 출력된다.

 

'이벤트 정보' 버튼을 누르면 xyz() 함수가 호출되어 screen객체를 출력한다.

 

 

 

 

input type 유효성 검사하기 1

'로그인' 버튼을 누르면 alert 창이 뜨고, aleat창의 확인을 누르면

 

 

target.html로 이동한다.

 

input type에 입력한 아이디, 비밀번호 값이 주소창에 뜨는 get방식

안 뜨게 하는 건 post방식

 

• id, password 유효성 검사하기

  id를 세 자리 이하로 입력하면 alert창이 뜨게 설정

   

  ※ 이때, 호출하는 함수(xxx2()) 내에 return문을 반드시 작성해야 함!!!

  작성하지 않으면 id, passwd 규칙을 지키지 않아도 submit이 실행되어 target.html로 넘어가게 된다.

   

   

• if문으로 조건 넣어서 e.preventDefault() 사용하기

   

  ※주의: id 중복되지 않게 설정해 주기

 

 

 

 

input type 유효성 검사하기 2

(조건 충족하지 않을 경우 에러 메시지 출력)

사용자 입력값(value)이 조건을 만족하지 않을 경우 result 값을 false로 설정, 리턴해서 전송 막기

 

사용자 입력값(value)이 조건을 만족하지 않을 경우 result 값을 false로 설정, 리턴해서 전송 막기

 

함수 호출 시 event 객체 인자로 받아서 event.preventDefault()로 처리하기

 

 

 

---

고전 이벤트 모델

고전 이벤트 모델은 window.onload를 사용하여 화면이 다 로드되자마자 함수를 실행하도록 한다.

window.onload 뒤에 화면이 로드된 후 실행할 함수를 구현해 준다.

<script>
window.onload = function() {
	document.getElementById("id").onclick = function(){ //id가 "id"인 line 9에서
    	함수 구현				//onclick이벤트 발생 시 실행할 함수 구현
	};
};
</script>

<input id="id" type="button" value="다이얼로그 표시">

 

 

---

DOM Level 2

표준 이벤트 모델 방법

 

• 표준 이벤트 모델에서는 다음과 같은 이벤트 연결, 해제 메소드들을 모든 DOM 객체들이 지원한다.
  
  addEventListener(eventName, handler, *useCapture)  -> 이벤트 연결
  
  removeEventListener(eventName, handler)  -> 이벤트 연결 해제
  
  (IE 8까지는 attachEvent(eventProperty, eventHandler), detachEvent(eventProperty, eventHandler)를 지원한다.

* useCapture

- false: 기본값, 이벤트 버블링으로 이벤트 전파

- true: 이벤트 캡처링으로 이벤트 전파

 

 

표준 이벤트 모델 적용 규칙

1. 각 요소에 이벤트 타입별로 여러 개의 이벤트 핸들러를 연결할 수 있다.
2. 이벤트 핸들러 내에서 이벤트 발생 객체(event)를 사용하려면 this를 사용한다.
   (IE 8 이하에서는 window.srcElement 사용)
3. 이벤트 핸들러 내에서 발생된 이벤트의 정보를 담고 있는 이벤트 객체를 사용하려면 핸들러 함수의 파라미터로 전달받는다.
   (IE 8 이하는 window.event 사용)
4. 요소에 등록되어 있는 기본 이벤트 핸들러를 해제하려면 이벤트 객체의 preventDefault()를 호출한다.
   (IE 8 이하는 window.event.returnValue = false; 를 사용)

 

---

표준 이벤트 모델의 예

 

document.getElemetnById("id")로 변수 xxx 초기화,

xxx.addEventListener(이벤트, 실행할 함수, false)로 이벤트를 연결한다.

 

※ 고전, 인라인 모델과 달리 이벤트 이름에 접두사 on이 빠졌다는 점에 주의!!

 

방법 1) addEventListener뒤에 직접 함수를 구현

 

방법 2) 함수 yyy()를 외부에서 구현하고 addEventListener에서 호출

 

 

※ 주의!!

표준 이벤트 모델(이벤트 핸들러 연결) 사용 시 script 코드를 </body>태그 직전에 작성하는 것이 아니라면

반드시 'window.onload ='를 function 앞에 적어줘야 제대로 작동한다.

 

'window.onload ='를 적어주지 않으면 함수를 호출하지 않기 때문에, 프로그램이 동작하지 않는다.

 

또는 함수 호출부가 있더라도 화면이 로드되기 전에 함수가 호출되므로, 값이 null로 나타나 프로그램이 제대로 동작하지 않는다.

 

 

document.querySelector("#선택자").style = "스타일";을 통해 스타일을 변경, 적용할 수 있다.

 

 

 

 

 

 

 

---

DOM Level 2 이벤트 전파

 

• 이벤트가 처음 발생되면 DOM의 최상위 객체인 document 객체로 이벤트가 전달된다.
• 자바스크립트에서는 발생된 이벤트를 다음 과정을 거쳐 전파시킨다.
  • 이벤트 캡처(캡처링)
    document부터 아래로 내려가서 이벤트 발생 요소의 부모 객체까지 전달되는 것을 의미한다.
  • 이벤트 타겟
    이벤트 발생요소까지 전달
    
    
  • 이벤트 버블(버블링): JavaScript의 기본 처리 방식
                              이벤트 발생요소의 부모로부터 위로 document까지 거슬러 올라가는 것을 의미한다.

 

이벤트 전파를 막을 때는 event.stopPropagation();을 쓴다.