이벤트
이벤트는 키보드를 이용해 버튼을 입력하거나 마우스 클릭과 같이 다른것에 영향을 미치는 것을 의미한다.
자바스크립트에는 다음과 같은 이벤트가 있다.
˙ 마우스 이벤트
˙ 키보드 이벤트
˙ HTML 프레임 이벤트
˙ HTML 입력 양식 이벤트
˙ 유저 인터페이스 이벤트
˙ 구조 변화 이벤트
˙ 터치 이벤트
이벤트는 애플리케이션 사용자가 발생시킬 수도 있고 애플리케이션이 스스로 발생시킬 수도 있다.
이전 포스팅들 에서 DOM객체를 관리하고 컨트롤할 때 다음과같은 코드를 사용해왔다.
window.onload = function () {
};
window객체의 onload속성에 함수자료형을 할당하는 것을 "이벤트를 연결한다" 라고 한다.
이때 load를 이벤트 이름 또는 이벤트 타입 (EventType) 이라고 하며 onload를 이벤트 속성이라고 한다.
이벤트에 연결된 function 함수를 이벤트 리스너 (Event Listener) 또는 이벤트 핸들러(Event Handler) 라고 한다.
window.onload = function () {
var header = document.getElementById('header');
function whenClick() {alert('click');}
header.onclick = whenClick;
};위 코드에서는 두가지 이벤트를 연결했다.
window객체는 이전과 같고 header 객체의 이벤트 이름은 click, 이벤트 속성은 onclick, 이벤트 리스너는 whenClick( ) 함수이다.
이벤트 모델은 다음과 같이 DOM Level 단계 다시말해 문서객체모델 단계에 따라 두 가지로 분류할 수 있고 그 안에서 다시 두가지로 나뉜다.
따라서 총 네 가지 방법으로 이벤트를 연결할 수 있다.
˙ DOM Level 0
˙ 인라인 이벤트 모델
˙ 기본 이벤트 모델
˙ DOM Level 2
˙ 마이크로소프트 인터넷 익스플로러 이벤트 모델
˙ 표준 이벤트 모델
고전 이벤트 모델
고전이벤트 모델은 자바스크립트에서 문서 객체의 이벤트 속성으로 이벤트를 연결하는 방법이다.
고전 이벤트 모델로 이벤트를 연결하고 제거하는 방법을 알아본다.
html태그를 다음과 같이 구성한다.
<body>
<h1 id="header">Click</h1>
</body>다음은 이벤트를 연결하는 코드이다.
window.onload = function () {
var header = document.getElementById('header');
header.onclick = function () {
alert('클릭');
}
}코드를 실행하고 h1태그의 Click 텍스트노드를 클릭하면 이벤트가 발생하고 경고창이 출력된다.(텍스트노드가 아닌 h1요소노드에 클릭이벤트가 발생됨.)
이벤트 리스너를 제거할 때는 아래 코드와같이 문서 객체의 이벤트 속성에 null을 넣어준다.
window.onload = function () {
var header = document.getElementById('header');
header.onclick = function () {
alert('클릭');
header.onclick = null;
}
}이벤트 리스너가 한 번 실행된 이후에 이벤트를 제거하므로, 두 번째 클릭부터는 이벤트가 발생하지 않는다.
고전 이벤트 모델은 이벤트 하나에 이벤트 리스너 하나만 연결할 수 있다.
이벤트 발생 객체와 이벤트 객체
이벤트 발생 객체
이벤트 리스너 안에서 this 키워드를 사용하면 이벤트가 발생한 객체를 찾을 수 있다.
<head>
<script>
window.onload = function () {
var header = document.getElementById('header');
header.onclick = function () {
alert(this);
}
}
</script>
</head>
<body>
<h1 id="header">Click</h1>
</body>
코드를 실행하고 Click 문자열 텍스트노드가 연결된 h1노드를 클릭하면 경고창에 [object HTMLHeadingElement] 문구가 출력된다.
이것은 이벤트가 발생한 객체이다.
console.log로 찍어보면 다음과 같이 이벤트가 발생된 태그를 출력한다.
아래 코드를 작성해본다.
window.onload = function () {
document.getElementById('header').onclick = function () {
this.style.color = 'orange';
this.style.backgroundColor = 'red';
};
};this 키워드의 스타일을 바꾸는 것은 이벤트가 발생한 객체의 스타일을 변경하는 것이다.
코드를 실행하고 h1태그를 클릭하면 이벤트가 발생한 객체의 스타일이 변경된다.
이벤트 객체
이벤트의 '누가' 와 관련된 정보 이외의 정보또한 이벤트 객체 안에 들어있다.
window.onload = function () {
document.getElementById('header').onclick = function(e) {
console.log(e);
}
}
코드를 실행하면 콘솔창에 다음과 같은 이벤트와 관련된 모든 내용을 출력해준다.
window.onload = function () {
document.getElementById('header').onclick = function(e) {
var event = e||window.event;
document.body.innerHTML = '';
for(var key in event){
document.body.innerHTML += '<p>' + key + ': ' + event[key] + '</p>'
}
};
};위의 코드와 같이 인터넷 창에 출력이 가능하다.
var event = e||window.event;e가 존재하면 e를 event변수에 저장하고, e가 undefined이면 window.event 속성을 변수 event에 저장하는 짧은 조건문이다.
인터넷 익스플로러 8 이하의 버전은 이벤트가 발생할 때 이벤트 객체를 window.event 속성으로 전달하기 때문에 인터넷 익스플로러 8 이하의 버전을 사용한다면 위와 같은 로직을 구현해야 실행된 이벤트 객체가 확인이 가능하다.
이벤트 강제 실행
이벤트를 강제로 실행하는 기술은 자주 사용되지 않는다.
하지만, 적절한 부분에 사용하면 코드의 길이를 대폭 줄일 수 있다.
이벤트 속성도 속성이고 함수 자료형을 넣으므로 메서드이기 때문에 메서드를 호출하는 것처럼 이벤트 속성을 호출하면 이벤트가 강제로 실행된다.
다음과 같이 body태그를 구성한다.
<body>
<button id="button-a">BUTTON A</button>
<button id="button-b">BUTTON B</button>
<h1>BUTTON A - <span id="counter-a">0</span></h1>
<h1>BUTTON B - <span id="counter-b">0</span></h1>
</body>아래 코드를 작성하고 실행하면 각 태그에 이벤트가 발생할 때 대응하는 횟수를 증가시킨다.
window.onload = function () {
var buttonA = document.getElementById('button-a');
var buttonB = document.getElementById('button-b');
var CounterA = document.getElementById('counter-a');
var CounterB = document.getElementById('counter-b');
buttonA.onclick = function () {
CounterA.innerHTML = Number(counterA.innerHTML) + 1;
}
buttonB.onclick = function () {
CounterB.innerHTML = Number(counterB.innerHTML) + 1;
}
}각 태그의 버튼을 클릭할 경우 span태그의 텍스트노드를 숫자로 바꾼 후 1을 더하는 로직이다.
buttonA.onclick = function () {
CounterA.innerHTML = Number(counterA.innerHTML) + 1;
}
buttonB.onclick = function () {
CounterA.innerHTML = Number(counterA.innerHTML) + 1;
CounterB.innerHTML = Number(counterB.innerHTML) + 1;
}버튼 B를 클릭했을 경우 CounterA의 숫자를 함께 증가하는 코드이다.
이것은 이벤트를 강제로 실행했다고 볼 수 없다.
이벤트를 강제로 실행하기 위해서는 이벤트리스너 내부에서 강제로 실행할 이벤트 함수를 호출하는것이다.
다음과 같이 코드를 작성한다.
buttonA.onclick = function () {
CounterA.innerHTML = Number(counterA.innerHTML) + 1;
}
buttonB.onclick = function () {
CounterA.innerHTML = Number(counterA.innerHTML) + 1;
buttonA.onclick();
}