Event

이벤트 발생 객체와 이벤트 객체

1. 이벤트 핸들러 안에서의 this 키워드

						window.onload = function  () {
							document.getElementById("header").onclick = function  () {
								alert(this);
							}
						};
						


2. 이벤트 발생 객체의 스타일 변경

						window.onload = function  () {
							document.getElementById("test02").onclick = function  () {
								this.style.background = "Orange"
								this.style.color = "Red";
							}
						};
						


3. 이벤트 객체

						window.onload = function  () {
							document.getElementById("test03").onclick = function  (e) {
									// 이벤트 객체를 설정함.
									var event = e || window.event;

								var tb = document.getElementById("testBoard");
								for (var key in event) {
									tb.innerHTML += "

"+key+ ": " +event[key]+"

" } } };


var event = e || window.event;
e가 존재하면 e를 변수 event에 넣고(할당하고), e가 undefined이면 window.event 속성을 변수 event에 넣는 짧은 조건문입니다.
인터넷 익스플로러 8 이하의 버전은 이벤트가 발생할 때 이벤트 객체를 window.event 속성으로 전달하지만, 다른 브라우저는 이벤트 핸들러의 매개 변수로 전달하므로 이렇게 처리하는 것입니다.

4. 이벤트 강제 발생

아래와 같은 예제 구성



Button A -0

Button B -0



5. 기본 이벤트 제거







							window.onload = function  () {
								// 이벤트를 연결합니다.
								document.getElementById("my_form").onsubmit = function  () {
									// 변수를 선언합니다.
									var pass = document.getElementById('pass').value();
									var pass_check = document.getElementById('pass_check').value();

									// 비밀번호가 같은지 확인합니다.
									if (pass == pass_check) {
										alert("성공");
									}else {
										alert('다시 입력해 주세요.');
										return false;
									}
								};						
							};
						


6. 이벤트 전달

- 이벤트 전달 방식

어떠한 이벤트가 먼저 발생해 어떤 순서로 발생하는지 정하는 것을 이벤트 전달이라고 합니다.
일반적으로 자바스크립트의 이벤트 전달 순서는 이벤트 버블링 방식을 따릅니다. 이벤트 버블링은 자식 노드에서 부모 노드 순으로 이벤트를 실행하는 것을 의미합니다.
이와 반대 개념으로 이벤트 캡쳐링이 있습니다. 이벤트 캡쳐링은 이벤트가 부모 노드에서 자식 노드 순으로 실행되는 것입니다.

Paragraph


						

Paragraph

- 이벤트 전달을 막는 방법

Paragraph

						

Paragraph

							window.onload = function  () {
								// 이벤트를 연결합니다.
								document.getElementById("hdr").onclick = function  () {
									alert('header');
								};
								document.getElementById('para').onclick = function  (e) {									
									alert('paragraph');
								};
							};	
						

이벤트이 연결되고, 이벤트 전달을 막기전 상태
p 태그를 클릭하면, 이벤트 버블링이 일어나면서 para -> hdr 순으로 경고창이 출력됩니다.

							window.onload = function  () {
								// 이벤트를 연결합니다.
								document.getElementById("hdr").onclick = function  () {
									alert('header');
								};
								document.getElementById('para').onclick = function  (e) {
									// 이벤트 객체를 처리합니다.
									var event = e || window.event;	
									
									// 이벤트 발생을 알립니다.
									alert('paragraph');

									// 이벤트 전달을 제거합니다.
									event.cancelBubble = true;
									if (event.stopPropagation) {
										event.stopPropagation();
									}
								};
							};	
						

이벤트 전달을 막은 상태
인터넷 익스플로러와 그외 브라우저가 이벤트 전달을 막는 방법은 다릅니다.
* 인터넷 익스플로러: 이벤트 객체의 cancelBubble 속성을 true로 변경합니다.
* 그 외의 브라우저: 이벤트 객체의 stopPropagation() 메서드를 사용합니다.

인터넷 익스플로러는 이벤트 객체에 stopPropagation() 메서드가 없으므로 조건문을 사용해 웹페이지 오류를 방지합니다.

이벤트 모델

- 인터넷 익스플로러 이벤트 모델

인터넷 익스플로러 이벤트 모델은 아래의 두가지 메서드를 사용해 이벤트를 연결하거나 제거할 수 있습니다.

attachEvent(eventProperty, eventHandler);

detachEvent(eventProperty, eventHandler);

window 객체에 attachEvent() 메서드를 사용해 load 이벤트를 연결한 상태

							window.attachEvent('onload', function() {
								
							});
						

인터넷 익스플로러 이벤트 모델을 여러개의 이벤트에 연결한 경우

								
							

Click

인터넷 익스플로러 이벤트 모델 - 이벤트 제거

익명함수를 이벤트 핸들러로 사용한 이벤트는 제거할 수 없습니다. 이벤트를 제거할 때 사용하는 detachEvent() 메서드는 어떤 이벤트 핸들러를 제거할 지 명확하게 알려주어야 하기 때문입니다.

								
							

Click

참고로 인터넷 익스플로러 이벤트 모델에서 이벤트 핸들러의 this 키워드는 이벤트 발생 객체를 의미하지 않습니다. 이벤트 핸들러에서 this 키워드는 window 객체를 나타냅니다. 이벤트 발생 객체를 사용하려면 이벤트 객체의 srcElement 속성을 사용해야 합니다. attachEvent() 메서드는 인터넷 익스플로러만 가지고 있으므로 다른 브라우저에서는 에러가 발생합니다. 따라서 아래와 같이 조건문을 사용해 다른 브라우저면 해당 내용을 실행하지 않게 합니다.

								
							

Click

- 표준 이벤트 모델

표준 이벤트 모델은 웹 표준을 만드는 단체인 W3C에서 공식적으로 지정한 DOM Level2 이벤트 모델입니다. 인터넷 익스플로러 이벤트 모델과 마찬가지로 한 번에 여러 가지의 이벤트 핸들러를 추가할 수 있으며, 인터넷 익스플로러 이벤트 모델과 달리 이벤트 캡쳐링을 지원합니다. 하지만, 캡쳐링은 사실상 사용하지 않으므로 다루지 않겠습니다. 참고로 인터넷 익스플로러는 표준 이벤트 모델을 인터넷 익스플로러 9버전 부터 지원합니다.

표준 이벤트 모델은 이벤트를 연결할 때, 아래와 같은 메서드를 이용합니다. 인터넷 익스플로러 이벤트 모델과 달리 이벤트 이름을 매배 변수로 입력한다는 점에 주의하세요.

addEventListener(eventName, handler, useCapture)

removeEventListener(eventName, handler);

매개 변수 useCapture는 입력하지 않으면 자동으로 false를 입력합니다. 매개 변수 useCapture를 제외하면 인터넷 익스플로러 이벤트 모델과 사용 방법이 유사합니다.

							window.onload = function() {
								var header = document.getElementById('myHeader');
								
								header.addEventListener('click', function() {
									this.innerHTML += '+';
								});
							};
						

표준 이벤트 모델은 이벤트 핸들러 안에서 this 키워드가 이벤트 발생 객체를 의미합니다. 인터넷 익스플로러 이벤트 모델과의 결정적인 차이입니다.

- 이벤트 모델의 통합적 사용

							window.onload = function  () {
								var header = document.getElementById("myHeader");
								if (header.attachEvent) {
									// 인터넷 익스플로러면 실행.
									var handler = function  () {
										window.event.srcElement.style.color = 'red';
										window.event.srcElement.detachEvent('onclick', handler);
									};
									header.attachEvent('onclick', handler);
								}else {
									// 그 이외의 브라우저에서 실행.
									var handler = function  () {
										this.style.color = 'red';
										this.removeEventListener('click', handler);
									};
									header.addEventListener('click', handler);
								}
							};
						

** 참고 **

이벤트 활성화 객체를 가져오는 함수

							
						

통합형 이벤트 모델의 다른 버전