Javascript 이벤트

Aug 5, 2013

이벤트란?

웹페이지에서 사용자가 클릭하거나 키보드 입력과 같은 상호작용을 하게 되는데, 클릭이나 키 입력과 같이 발생하는 것을 이벤트라고 한다. 창 크기를 조절하거나 스크롤을 내리거나 올릴 때도 이벤트는 발생하고, 이벤트가 발생했을 때 실행되는 메소드를 이벤트 핸들러라고 한다.

IE에서 이벤트 추가하기

element.attachEvent(event, callback);

표준 브라우저에서 이벤트 추가하기

element.addEventListener(event, callback, useCapture);

이벤트 추가하는 함수

IE와 표준브라우저에서 사용할 수 있는 함수를 만들겠다.

function addEvent(ele,evt,callback, useCapture) {   
    if(ele.addEventListener) {
        ele.addEventListener(evt,callback, useCapture);
    } else if(ele.attachEvent) {
        ele.attachEvent("on"+evt, callback);
    }
}

IE와 표준 브라우저의 이벤트에 대한 차이점

  • 이벤트를 등록, 해제하는 메소드가 다르다.
    • IE : attachEvent, detachEvent
    • 표준 브라우저 : addEventListener, removeEventListener
  • 이벤트 지정 문자열이 다르다. IE의 경우는 앞에 on이 붙음.
  • 이벤트 객체를 받는 방법이 다르다.
    • IE : window.event 객체로 전달받음.
    • 표준 브라우저 : callback 함수에서 인자로 전달받음.
  • 기본 이벤트의 실행 방지 방법이 다르다.
    • IE : return 값에 의해서 결정된다.
    • 표준 브라우저 : preventDefault 메소드를 사용해서 결정한다.

자주 사용하는 이벤트 리스트

  • click : 마우스 클릭
  • mouseover : 마우스 오버
  • mouseout : 마우스 아웃
  • change : 셀렉트박스의 값이 달라졌을 때
  • scroll : 스크롤 되었을 때
  • resize : 크기가 변경되었을 때
  • keyup : 키가 눌린 후 뗄 때
  • focus : 포커스
  • blur : 포커스 해제되었을 때

캡처와 버블링

이벤트는 최상위 엘리먼트로부터 이벤트가 발생한 엘리먼트까지 찾아 들어간 후 다시 최상위 요소까지 올라가며 이벤트를 발생한다. 여기서 이벤트가 발생한 엘리먼트까지 들어가는 과정을 이벤트 캡처라 하고, 최상위 요소까지 다시 올라가는 과정을 이벤트 버블링이라고 한다.

예제

지금까지 얘기한 이벤트를 실제 사용한 예제를 만들겠다.

HTML

<h1>Event Test</h1>
<div id="wrap">
    <div id="wrap2">
        <button id="test_btn">click</button>
    </div>
</div>
  
<h1>DEBUG <button id="clear">clear</button></h1>
<div id="console"></div>

CSS

#wrap {border:1px solid #000000;padding:10px;margin-bottom:10px;}
#wrap2 {border:1px solid #E2E2E2;padding:10px;margin-bottom:10px;}
#console {height:400px;overflow-y:scroll;border:1px solid #E2E2E2;padding:10px;}

Javascript

<!-- 스크립트 영역 -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script type="text/javascript">
// HTML 엘리먼트를 자바스크립트 변수로 저장
var wrap = document.getElementById("wrap"); // 감싸는 레이어
var wrap2 = document.getElementById("wrap2"); // 감싸는 레이어2
var clear_btn = document.getElementById("clear"); // 클리어 버튼
var test_btn = document.getElementById("test_btn"); // 클릭 버튼
var consol_div = document.getElementById("console"); // 콘솔창
  
// 카운트 변수 정의
var logCnt = 1;
  
// 로그를 출력하기 위한 함수
function logConsole(msg) {
    consol_div.innerHTML = logCnt+" : "+msg+"<br />"+consol_div.innerHTML;
    logCnt++;
}
  
// 로그 초기화 함수
function clearConsole() {
    consol_div.innerHTML = "";
    logCnt = 1;
}
  
// 이벤트 등록을 위한 브라우저 호환을 위한 함수 정의
function addEvent(ele,evt,callback, useCapture) {   
    if(ele.addEventListener) {
        ele.addEventListener(evt,callback, useCapture);
    } else if(ele.attachEvent) {
        ele.attachEvent("on"+evt, callback);
    }
}
  
/*** 구현 ***/
  
// 로그 clear 버튼 클릭 이벤트 걸기
addEvent(clear_btn,"click", function(e) {
    clearConsole();
},false);
  
// 감싸는 레이어 클릭 이벤트 걸기
addEvent(wrap,"click", function(e) {
    logConsole("wrap click");
},false);
  
//감싸는 레이어2 클릭 이벤트 걸기
addEvent(wrap2,"click", function(e) {
    logConsole("wrap2 click");
},false);
  
// 버튼 클릭 이벤트 걸기
addEvent(test_btn,"click", function(e) {
    // 표준 브라우저일 경우
    if(typeof(e.stopPropagation) == "function") {
         e.stopPropagation();       
    } else { // IE 일 경우           
        window.event.cancelBubble = true;       
    } 
  
    logConsole("button click");
},false);
</script>
See Also