Q. Button의 onclick 이벤트 발생 시,
onclick_button() 이라는 이벤트 핸들러가 수행되도록 설정하려면 어떻게 해야할까?
: 객체의 이벤트리스너에 이벤트핸들러를 등록한다.
* 이벤트 핸들러 == 이벤트 처리기, 이벤트 발생 시 수행되는 함수
* 이벤트 리스너 == 이벤트 발생 인지기, 이벤트 발생을 인지하고, 수행할 함수들을 알고 있다.
1,2번은 간편하게 사용되는 등록방법이고,
3번에서 제시되는 등록방법과 삭제방법을 모두 사용하면 이벤트 처리과정을 상세하게 다룰 수 있다.
1. HTML 태그에서 등록
|
형 식 |
사 용 예 |
| event = "eventHandler()" | <input type="button" onclick="onclick_button()"> |
* 이벤트핸들러에 ""와 ()를 꼭 사용
2. javascript에서 등록
|
형 식 |
사 용 예 |
| object.event = eventHandler; |
var btn = document.getElementById("btn"); btn.onclick = onclick_button; |
3. 이벤트 리스너에 등록 / 삭제 (이벤트에 ""를 사용)
3.1 등록
case #1. - InternetExplorer (이하 IE)
|
형 식 |
사 용 예 |
| obj.attachEvent("event", eventHandler) |
var btn = document.getElementById("btn"); btn.attachEvent("onclick", onclick_button); |
case #2. - FireFox 및 기타 브라우저 (이하 FF)
|
형 식 |
사 용 예 |
| obj.addEventListener("event", eventHandler, bool) |
var btn = document.getElementById("btn"); btn.addEventListener("click", onclick_button, false); |
* "event" 이름 앞의 on 빠지는 것에 주의 (IE: onclick <--> FF: click)
* bool: capture 여부
자세한 사항은 W3C의 HTML 이벤트처리 권고안 또는 이벤트 처리 상세내용(DOM 레벨1) 참고
case #3. - 크로스 브라우저 (IE, FF 등 모든 브라우저에서 사용할 수 있도록)
|
형 식 |
사 용 예 |
|
각 브라우저가 제공하는 이벤트리스너를 확인 if (obj.attachListener) { // IE obj.attachEvent("event", eventHandler); } else if (obj.addEventListener) { // FF obj.addEventListener("event", eventHandler, bool); } |
var btn = document.getElementById("btn"); if (btn.attachListener) { // IE btn.attachEvent("onclick", onclick_button); } else if (btn.addEventListener) { // FF btn.addEventListener("click", onclick_button, false); } |
* IE 7.0 이상에서는 if (window.ActiveXObject)를 사용하여 IE 브라우저임을 확인 (XMLHttpRequest 참조)
3.2 삭제 (3.1 case #3.에 대응)
|
형 식 |
사 용 예 |
|
각 브라우저가 제공하는 이벤트리스너를 확인
if (obj.attachListener) { // IE obj.detachEvent("event", eventHandler); } else if (obj.addEventListener) { // FF obj.removeEventListener("event", eventHandler, bool); } |
var btn = document.getElementById("btn");
if (btn.attachListener) { // IE btn.detachEvent("onclick", onclick_button); } else if (btn.addEventListener) { // FF btn.removeEventListener("click", onclick_button, false); } |
* detachEvent 및 removeEventListener의 사용 시 인수들의 순서는
attachEvent 와 addEventListener와 동일하다. (3.1 참조)
<예제> 1. "크기 바꾸는 스타일 적용" 버튼을 누르면, 텍스트상자의 크기가 변하고, <-- changeHeight() 함수 호출
2. "새 버튼 생성" 버튼을 누르면, 새 버튼이 생성되어 화면에 추가된다. <-- createButton() 함수 호출
3. "메시지 창 띄우기" 버튼을 누르면, 메시지 창이 화면에 나타난다. <-- alertButton_click() 함수 호출
1. HTML 태그에 직접 / 2. javascript에서 직접 / 3. javascript에서 이벤트 리스너에
각각 이벤트 핸들러 함수를 등록하여, 이벤트가 발생했을 때 수행되도록 작성했다. " " 및 ( ) 표시에 주의!
{
var obj = document.getElementById("log");
if(obj.style.height == "200px") {
obj.style.height = "100px";
obj.style.height = "200px";
}
obj.value += "변경된 크기: " + obj.style.height + "\n";
}
{
var obj = document.getElementById("log");
obj.value += "log의 객체 태그이름: " + document.all.log.nodeName + "\n";
obj.value += "info의 HTML 문자열: " + document.all.info.innerHTML + "\n";
var btn = document.getElementById("createBtn");
btn.onclick=createButton;
var al = document.getElementById("alertBtn");
if (al.attachListener) { // IE * IE 7.0 이상에서는 (window.ActiveXObject)를 사용
al.attachEvent("onclick", alertButton_click);
} else if (al.addEventListener) { // FF
al.addEventListener("click", alertButton_click, false);
}
}
{
var panel = document.getElementById("myDiv");
var newObj = document.createElement("INPUT");
newObj.type = "button";
newObj.value = "New Button";
panel.appendChild(newObj);
}
function alertButton_click()
{
alert("메시지 창 띄우기 버튼을 클릭했습니다.");
}
// 1. HTML 태그에서 직접등록
<input id="heightBtn" type="button" value="크기 바꾸는 스타일 적용" onclick="changeHeight()"></input>
<input id="createBtn" type="button" value="새 버튼 생성"></input>
<input id="alertBtn" type="button" value="메시지 창 띄우기"></input>
<br>
<textarea id="log" style="width:100%; height:200px;"></textarea>
<br>
<div id="myDiv"></div>
