이벤트 핸들러 : 이런한 이벤트를 처리해 주는 것.
이벤트 종류와 핸들러
이벤트의 종류는 마우스 클릭이라든지 마우스오버와 같은 것들이 있다. 그 예는 다음과 같다.
abort : 문서, 이미지 또는 URL을 읽어 들이는 도중에 중지할 때 발생
blur : 포커스를 읽어버렸을 때 발생
click : 마우스를 클릭할 때 발생
change : text, textarea, select의 값이 변화할 때 발생
focus : 포커스를 놓았을 때 발생
load : 문서 또는 URL을 읽을 때 발생
mouseout : 마우스 커서가 해당 영역을 벗어날 때 발생
mouseover : 마우스 커서가 해당 영역에 놓였을 때 발생
reset : reset버튼을 누를 때 발생, 입력 양식의 화면을 초기화함.
select : 해당 필드를 선택할 때 발생
submit : submit버튼을 누를 때 발생
unload : 해당 문서 또는 URL을 빠져나갈 때 발생
핸들러란 이러한 이벤트가 실행되었을 때 어떠한 기능적 처리를 해주는 함수라는 의미가 강하다. 즉 클릭을 했을 때 글자가 커지거나 새로운 페이지가 띄워지는 등의 이벤트 처리를 말한다.
브라우저 이벤트 모델 특징
- HTML 웹 페이지의 인터페이스는 비동기적이고 이벤트 주도방식이다.
- 따라서 사용자의 이벤트에 따른 이벤트 핸들러를 적절히 구현하여야한다.
- W3C가 발표한 DOM이벤트 레벨 2의 표준을 잘 따르는 브라우저와 그렇지 않은 브라우저간 차이점을 고려하여 이벤트를 처리해야만 한다.
객체에 이벤트를 연결하는 방식은 4가지가 있다.
1. 인라인 모델 방식
2. DOM Level 0 고전 이벤트 모델 방식
3. DOM Level 2 이벤트 모델 방식(리스너 방식)
4. Cross 이벤트 모델 방식
1. 인라인 이벤트 모델
HTML페이지의 가장 기본적인 이벤트 연결 방법
예)
<body>
<h1 onclick="alert('클릭')">Click</h1>
</body>
간단한 이벤트를 처리해주기는 좋으나 WEB의 표준에서 구조와 동작을 분리시키는 원칙에서벗어난다, 따라서 HTML태그의 이벤트 속성 안에 코드를 모두 쓰기보다는 script로 처리하는 방식을 많이 사용한다.
2. DOM Level 0 고전 이벤트 모델
자바스크립트에서 문서 객체의 이벤트 속성을 사용해 이벤트를 연결하는 방법
예)
<script>
window,onload = {
var hi= document.getElementById("hi");
hi.onclick = function(){
alert("클릭");
}
}
</script>
<body>
<h1 id="hi">Click</h>
</body>
이벤트를 제거하는 방법
단순히 이벤트 핸들러에 null을 넣으면 끝
window,onload = {
var hi= document.getElementById("hi");
hi.onclick = null;
}
고전 이벤트 모델은 이벤트 하나에 이벤트 핸들러 하나만 연결할 수 있다.
기본 이벤트 제거
HTML태그 중 이미 이벤트 핸들러를 가지고 있는 태그가 있다. 예를 들어 <a>가 가지고 있는 기본 이벤트는 <a>를 클릭하면 페이지 이동을 하는 이벤트가 걸려있다. 이를 기본 이벤트라 한다.
<a>뿐만 아니라 submit버튼에도 이벤트가 걸려있다. 기본 이벤트가 있음으로 좋은 점도 있지만 불편한 점도 있다. 이런 이유로 기본 이벤트를 제거하는 경우가 있다. 코드를 보자
예)
<script>
window.onload = function(){
document.getElementById("my_from").onsubmit = function(){
return false;
}
}
</script>
<body>에는 my_from이란 Id를 가진 submit버튼이 있다. 버튼을 누르면 자동으로 입력 양식을 서버로 보내고 페이지를 새로고친다. 이 기본 이벤트를 지우기 위해서는 간단히 이벤트 핸들러에 false를 리턴해주면 된다.
사용자는 입력양식(form)을 만나게 되면 자신이 원하는 데이터를 입력하게 된다. 그리고 submit버튼을 이용하여 그 데이터를 서버로 보낸다. 하지만 어떤 데이터를 입력했는지 확인 없이 서버에 무작정 보낼 수는 없다. 입력양식을 적절하게 구성했다는 것을 확인해야한다.
그렇다면 어떻게 입력양식의 데이터값을 검사할 수 있을까?
document.getElementById("sn").value;
이렇게 sn이라는 id를 가진 태그의 값을 가져와 유효성을 검사할 수 있다.
3. DOM Level 2 이벤트 모델(리스너 방식)
IE를 제외한 최신 브라우저에서 지원한다.
레벨 0 API와는 다른 고급 이벤트 처리가 가능하다.(중복 이벤트 연결)
표준 이벤트 핸들러 등록 함수
addEventListener(String eventType, function listener, boolean captures)
- eventType : 이벤트 이름의 문자열 (예 : "click", "mouseover")
- listener : 핸들러 함수명
- captures : true/false (버블과 캡쳐에 관한 인자)
예)
<script type="text/javascript">
function doProcess(){ alert("JavaScript"); } window.onload = function(){ var btn1 = document.getElementById("btn1"); btn1.addEventListener("click", doProcess, false); }
</script>
<body>
<input type="button" id="btn1">
<div id="result">result</div>
</body>
IE(인터넷 익스플로러)에서는 그 방식이 다르다. 예제를 보자
IE 이벤트 핸들러 등록 함수
attachEvent(String eventType, function listener)
- eventType : 이벤트 속성명(예: onClick, onmouseover)
- listener : 핸들러 함수명
예)
<script type="text/javascript">
function doProcess(){
alert("JavaScript");
}
window.onload = function(){
var btn1 = document.getElementById("btn1");
btn1.attachEvent("onclick", doProcess);
}
</script>
</head>
<body>
<input type="button" id="btn1">
<div id="result">result</div>
</body>
4. 크로스 이벤트 모델 방식
위의 DOM Level 2 이벤트 모델 방식일 경우 항상 표준 브라우저와 IE브라우저를 고려해야 하며 따라서 항상 같은 이벤트를 두번씩 정의해야하는 번거로움이 있다. 이런 과정을 줄이기 위해 새로운 js파일에 사용자 정의 객체를 만들어줌으로써 표준 브라우저와 IE브라우저의 이벤트를 한번에 등록할 수 있다.
예)
var cross = {};
cross.Event = {};
cross.Event.addListener = function(element, name, handler, capture){//사용자 정의 함수(crossEvent브라우저를 지원할 함수)
capture = capture || false;
//표준브라우저인지 IE인지 구분
if(element.addEventListener){
//표준브라우저 일때
element.addEventListener(name, handler, capture);
}else{
//표준브라우저가 아닐때, 즉 IE일 경우
element.attachEvent("on" + name, handler);
}
};
html파일이 있는 곳에 js폴더를 하나 만들어 js파일에 위와 같이 입력한다. 의미는 cross 객체안에 Event를 처리할 객체를 하나더 만들어줬다. 이렇게 만든 이유는 패키지라는 개념이로 이해하면 좋다. 이렇게 함으로써 최대한 속성이나 함수의 이름이 중복되는 것을 막기 위함이다.
cross.Event.addListener()는 사용자 정의 함수로써 표준 브라우저와 IE 브라우저 각각에 이벤트를 동시에 연결하도록 정의하였다.
---------------------------------------------------------------------------------
마지막으로 표준 이벤트 연결 방식에 대해 유의점을 언급하겠다.
IE에서는 핸들러에서 this키워드를 사용하면 window을 가르킨다. 핸들러 안에서 객체를 받기 위해 this를 사용하면 안될 것이다. 대신에 srcElement라는 속성을 이용해야만 객체를 가져올 수 있다.
그러나 표준 브라우저에서는 핸들러에서 this를 사용하여 쉽게 객체를 가져올 수 있다.
이 차이점이 IE와 표준 브라우저간의 큰 차이점임으로 꼭 기억하도록 하자.
댓글 없음:
댓글 쓰기