이벤트 (Event)

* 이벤트란?

- 브라우저에서 방문객이 취하는 모든 동작을 이벤트라고 함.

- 이벤트가 발생했을 때 자바스크립트 실행문을 실행하는 것을 이벤트 핸들러라고 함.

- 즉, 이벤트 발생 시 자바스크립트 코드가 실행됨.

- 이벤트 종류

종류		설명
마우스 이벤트	onmouseover	마우스가 지정한 요소에 올라갔을 때 발생함.
	onmouseout	마우스가 지정한 요소에서 벗어났을 때 발생함.
	onmousemove	마우스가 지정한 요소 영역에서 움직일 때 발생함.
	onclick	마우스가 지정한 요소를 클릭했을 때 발생함.
	ondblclick	마우스가 지정한 요소를 연속 두 번 클릭했을 때 발생함.
키보드 이벤트	onkeypress	지정한 요소에서 키보드가 눌렸을 때 발생함.
	onkeydown	지정한 요소에서 키보드를 눌렀을 때 발생함.
	onkeyup	지정한 요소에서 키보드를 눌렀다 떼었을 때 발생함.
기타 이벤트	onfocus	지정한 요소에 포커스가 갔을 때 발생함.
	onblur	지정한 요소의 포커스가 다른 요소로 이동되어 잃었을 때 발생함.
	onchange	지정한 요소의 value 속성값이 바뀌고 포커스가 이동되었을 때 발생함.
	onload	지정한 요소의 하위 요소를 모두 로딩했을 때 발생함.
	onunload	문서를 닫거나 다른 문서로 이동했을 때 발생함.
	onsubmit	폼 요소의 전송 버튼을 눌렀을 때 발생함.
	onreset	폼 요소의 취소 버튼을 눌렀을 때 발생함.
	onresize	지정된 요소의 크기가 변경되었을 때 발생함.
	onerror	문서 객체가 로드되는 동안 문제가 발생되었을 때 발생함.

 

- 지정한 요소에 이벤트를 적용하는 방법

1) 요소에 직접 이벤트를 등록하는 방법

2) 요소에 이벤트 등록 속성을 빼고 문서 객체 구조(DOM)를 이용하여 지정된 요소에 이벤트를 등록하는 방법

 

예) 버튼 요소에 클릭(click) 이벤트를 등록하여 'Event'라는 경고 창을 띄우는 기본형.

 

(직접 요소 이벤트 등록 방식)

<button id="btn"onclick="alert('Event')">버튼</button>

 

(DOM을 이용한 이벤트 등록 방식)

<button id="btn">버튼</button>    document.getElementById("btn").onclick=function(){  alert('Event');  }

 

 

* 키보드 접근성

- 요소에 마우스 이벤트를 등록할 경우에는 마우스가 없어도 접근(작동)할 수 있도록 해야 하는데, 이것을 키보드 접근성이라 함.

- 마우스 이벤트가 등록되었을 때는 반드시 키보드로 작동할 수 있게 대응 이벤트를 함께 작성해야 함.

 

마우스 이벤트	키보드 대응 이벤트
onmouseover	onfocus
onmouseout	onblur

 

- 그 외에 onclick의 경우는 Enter 키를 누르면 발생함.

 

 

* 이벤트 중복 등록 해결법

 

[한 요소에 같은 이벤트를 중복으로 등록하는 잘못된 사례]

 

<button id="btn">버튼</button>

 

1. 위의 문단 태그에 직접 한 요소에 클릭(click) 이벤트를 중복으로 등록하였을 경우

<button id="btn" onclick="alert('실행문1');" onclick="alert('실행문2');">버튼</button>  // 두 번째 경고 창인 alert('실행문2')만 실행됨.

 

2. DOM을 이용하여 한 요소에 클릭(click) 이벤트를 중복으로 등록하였을 경우

document.getElementById("btn").onclick=function(){  // 실행 안 됨.  alert('실행문1');  }  document.getElementById("btn").onclick=function(){  // 실행 됨.  alert('실행문2');  }

 

- 이런 중복 이벤트 문제를 해결하기 위해 W3C(World Wide Web Consortium)에서 새로운 이벤트 등록 메서드를 개발하여 내놓았는데, 이 때 마이크로소프트(Microsoft) 사는 W3C 개발에 동참하지 않고 독자적으로 이벤트 등록 메서드를 개발하였음.

- 그래서 W3C의 개발에 동참했던 파이어폭스, 크롬, 사파리, 오페라 브라우저와 마이크로소프트 사에 IE 8 이하 브라우저 간에 이벤트 등록 메서드가 서로 다르다 보니 호환성 문제가 나타나게 됨.

- 하지만 제이쿼리에서는 이런 이벤트 등록 메서드의 호환성 문제들을 모두 해결함.

 

 

[한 요소에 같은 이벤트를 중복으로 등록하는 방법]

 

- 한 요소에 동일한 이벤트를 중복 등록해야 할 경우 브라우저별로 이벤트를 등록하는 메서드의 종류

브라우저 구분	방법
IE 8 이하 외의 브라우저 (파이어폭스, 사파리, 크롬, 오페라)	요소 선택.addEventListener("이벤트 종류".함수명 또는 익명 함수, false(표준 캡처 방식));
IE 8 이하	요소 선택.attachEvent("on이벤트 종류".함수명 또는 익명 함수);

 

1. IE 8 이하 외의 브라우저(파이어폭스, 크롬, 사파리 등) 이벤트 등록 방법

document.getElementById("btn").addEventListener("click",function(){  alert('실행문1');  },false);  document.getElementById("btn").addEventListener("click",function(){  alert('실행문2);  },false);

 

2. IE 8 이하 브라우저 이벤트 등록 방법

document.getElementById("btn").attachEvent("onclick",function(){  alert('실행문1');  },false);  document.getElementById("btn").attachEvent("onclick",function(){  alert('실행문2);  },false);

 

 

* this 키워드

- 방문자가 사이트에 방문하여 이벤트를 등록한 요소에서 이벤트를 발생시킬 때마다 익명 함수 내에 실행문이 실행될 것임.

- 이때 이 실행문에 포함되어 있는 this라는 키워드는 방문자가 이벤트를 발생한 요소를 가리킴.

- 가령, 클릭(click) 이벤트를 등록한 <a>의 요소가 8개 있는데 이때 방문자가 세 번째의 <a>를 클릭했다면, 이때 실행되는 일련의 함수 내의 this는 세 번째 <a>를 가리키는 것임.

<button onclick="alert(this.tagName)">버튼</button>

-> 여기서 this는 이벤트 발생할 때마다 이벤트가 발생한 버튼 <button> 요소를 가리킴.

-> 즉, 버튼을 클릭할 때마다 button의 태그명(button)이 출력되는 경고 창을 띄움.

 

 

 

내용 출처 : Do It! 자바스크립트+제이쿼리 입문 (정인용 지음, 이지스퍼블리싱)