event 객체

DOM과 관련된 이벤트가 발생하면 관련 정보는 모두 event객체에 저장됩니다.
이벤트 발생 요소, 이벤트 타입, 이벤트 관련 데이터도 저장됩니다.

ex) 마우스 이벤트 -> 마우스의 위치정보 포함 등
키보드 이벤트 -> 누른 키의 키코드 등

모든 브라우저가 event 객체를 지원하지만, 세부 사항까지 같지는 않으니 주의하시기 바랍니다.

DOM event객체

event객체 예제를 봅시다.

var btn = document.getElementById("myBtn");
btn.onclick = function(event){
    console.log(event.type); //click
};

btn.addEventListener("click", function(event){
    console.log(event.type); //click
}, false);

DOM 표준을 준수하는 브라우저에서 이벤트 핸들러에 전달되는 매개변수는 event객체 하나뿐입니다.
DOM레벨과 상관없이 event객체가 전달되며 event객체에는 생성에 관여한 이벤트와 관련된 프로퍼티 및 메서드가 포함됩니다.

아래는 event객체에서 공통적으로 사용하는 이벤트를 정리했습니다.

프로퍼티/메서드 타입 R/W 설명
bubbles bool R 이벤트가 버블링되는지 나타냄
cancelable bool R 이벤트의 기본 동작 취소가능 여부
currentTarget element R 현재 이벤트를 처리중인 element
defaultPrevented bool R true면 preventDefault()호출상태
detail integer R 이벤트와 관련된 추가정보
eventPhase integer R 이벤트 핸들러가 호출된 단계(1:캡처링,2:타깃,3:버블링)
preventDefault()

Function

 R 이벤트의 기본행동 취소, cancelable가 true일때 기능함
stopImmediatePropagation() Function R 이벤트캡처링,이벤트버블링 모두 취소하며 다른 이벤트 핸들러 호출을 막음.
stopPropagation()

Function

 R 이벤트캡처링,이벤트버블링 모두 취소합니다. bubbles가 true일때 기능합니다.
target element R 이벤트 타깃
trusted bool R 브라우저에서 생성한 이벤트라면 true 개발자가 만든 자바스크립트 이벤트라면 false
type string R 발생한 이벤트 타입
view AbstractView R 이벤트와 연결된 추상화된 뷰입니다. 이벤트가 발생한 window객체와 일치

이벤트 핸들러 내부의 this는 항상 currentTarget와 값이 일치하며 target에는 이벤트의 실제 타깃만 포함됩니다.

아래 예제를 봅시다.

<body>
    <input type="button" id="myBtn" value="Click" Me/>
</body>

document.body.onclick = function(event){
    console.log(event.currentTarget === document.body); //true
    console.log(this === document.body); //true
    console.log(event.target === document.getElementById("myBtn"));//true
}

이벤트는 body에 추가했습니다. 그렇기 때문에 currentTarget나 this는 body요소를 가리키고 있습니다.
하지만 target은 현재 실제 타겟(클릭된) 요소를 가리키고 있습니다.
하지만 이벤트를 body에 할당했지 버튼에 할당한게 아니기 때문에 이벤트를 찾아서 document까지 거슬러 올라갑니다.

함수 하나에서 여러 이벤트 처리

var btn = document.getElementById("myBtn");
var handler = function(event){
    switch(event.type){
        case "click":
            //코드
            break;
        case "mouseover":
            //코드
            event.target.style.backgroundColor = "red";
            break;
        case "mouseout":
            //코드
            event.target.style.backgroundColor = "";
            break;
    }
};

btn.onclick = handler;
btn.onmouseover = handler;
btn.onmouseout = handler;

event.type을 이용해서 handler함수 하나에서 세가지 이벤트를 처리 하게 하는 코드입니다.

이벤트 타입

웹브라우저에서 발생하는 수많은 이벤트들과 그 타입에 대해서 알아보겠습니다.

DOM 레벨 3 이벤트는 이벤트를 아래와 같이 분류합니다.

  • UI이벤트는 일반적인 이벤트이며 BOM과의 상호작용이 포함될 수 있다.
  • 포커스 이벤트는 요소가 포커스를 얻거나 잃을 때
  • 마우스 이벤트는 마우스로 동작을 취할 떄
  • 휠 이벤트는 휠이나 비슷한 장치 사용 시
  • 텍스트 이벤트는 문서에 텍스트 입력 시
  • 키보드 이벤트는 키보드로 동작을 취할 때
  • 구성(composition) 이벤트는 입력방법에디터(IME)를 통해 문자를 입력 할 떄
  • 변경(mutation)이벤트는 DOM구조가 변경될 떄

UI 이벤트

load 이벤트

load 이벤트는 이미지나 자바스크립트 파일, CSS 파일 같은 외부 자원은 포함해 페이지를 완전히 불러왔을 때 img요소나 object요소에서 발생합니다.

<body onload="myFunction()">
<img src="smile.gif" onload="alert('Image Loaded')">
</body>

위 예제는 이미지를 예제로 들었습니다.
자바스크립트에서 load이벤트를 할당하거나 위 예제처럼 직접 onload에 자바스크립트 코드를 넣어 주면, 이미지를 불러온 시점을 알 수 있습니다.

unload 이벤트

load이벤트와 반대로 문서를 완전히 닫을 때 발생합니다.
일반적으로 다른페이지로 이동할 때 각종 참조를 제거하여 메모리 누수방지를 목적으로 많이 사용합니다.

<body onunload="myFunction()">

object.addEventListener("unload", myScript);

자바스크립트에서 unload이벤트를 할당하거나 위 예제처럼 직접 onunload에 자바스크립트 코드를 넣어 주면, 이미지를 불러온 시점을 알 수 있습니다.

unload의 경우 모든 것이 해체될 때 발생하므로 DOM 노드의 위치나 외형을 조작하려 하면 에러가 발생할 수 있습니다.

resize 이벤트

브라우저 창의 높이나 너비가 바뀔때 발생하는 이벤트입니다.

<element onresize="myScript">

object.addEventListener("resize", myScript);

특징이라면 다른 브라우저는 창크기 조절하는 동안 계속 이벤트가 발생하며, 파이어폭스는 크기조절이 멈추는 시점에 발생합니다.

scroll 이벤트

<div onscroll="myFunction()">

object.addEventListener("scroll", myScript);

scrollLeft와 scrollTop을 통해 얼마나 스크롤한지 알 수 있습니다.

이 이벤트는 문서를 스크롤하는동안 반복실행됩니다.

Focus 이벤트

포커스 이벤트는 요소가 포커스를 받거나 잃을 때 발생합니다.

  • blur : 포커스를 잃을때 발생
  • focus : 포커스 받을때 발생
  • focusin : 포커스 받을때 발생, 버블링 버전입니다.
  • focusout : 포커스 잃을때 발생, 버블링 버전입니다.

DOMFocusIn, DOMFocusOut은 사용권장하지 않기 때문에 제외하였습니다.

마우스 이벤트, 휠 이벤트

  • click : 사용자가 클릭하거나 엔터키를 누를때 발생
  • dblclick : 더블클릭 때 발생합니다.
  • mousedown : 마우스 버튼을 누를때 발생합니다. 키보드에서는 발생하지 않습니다.
  • mouseenter : 마우스 커서가 요소 밖에서 안으로 이동할때 발생
  • mouseleave : 마우스 커서가 요소 안에서 밖으로 이동할때 발생
  • mousemove : 마우스 커서가 요소 위에서 이동하는 동안 계속 발생.
  • mouseout : 마우스 커서가 요소 위에 있다가 다른 요소 위로 이동할때 발생
  • mouseover : 마우스 커서가 요소 밖에 있다가 요소경계안으로 이동할때 발생
  • mouseup : 사용자가 마우스 버튼을 누르고 있다가 놓을 때 발생.

모든요소는 마우스 이벤트를 지원합니다.

클라이언트 좌표

clientX, clientY

이벤트가 발생한 커서 위치는 event 객체의 clientX, clientY 프로퍼티에 저장됩니다.
스크롤은 고려되지 않은 위치입니다.

pageX, pageY

뷰포트 기준으로 좌표를 반환합니다.
하지만 IE8 이전 버전에서는 지원하지 않기 때문에 clientX 와 scrollLeft값을 더해서 구할 수 있습니다.

screenX, screenY

현재 모니터에 보이는 화면 전체 해상도에 대한 커서 좌표를 반환합니다.

터치장치 지원 관련

iOS나 안드로이드 디바이스는 아래와 같은 문제가 있습니다.

  • dblclick이벤트는 지원되지 않습니다(확대 축소되므로)
  • 클릭 가능한 요소를 탭하면 mousemove이벤트가 발생합니다. 그후 mousedown, mouseup, click이벤트가 순서대로 실행됩니다.
  • mousemove이벤트도 mouseover와 mouseout이벤트를 발생 시킵니다.
  • mousewheel과 scroll이벤트는 화면에 두 손가락을 올릴 때 발생합니다.

키보드와 텍스트 이벤트

  • keydown : 사용자가 키를 처음 누를 때 발생, 누르고 있는 동안은 계속 발생
  • keypress : 키를 누른 결과로 문자가 입력될 때 발생, 누르고 있는 동안은 계속 발생, DOM 레벨 3에서는 keypress가 삭제되고 대신 textInput 사용권장
  • keyup : 사용자가 키에서 손을 떼면 발생

위 이벤트들은 모든 요소가 지원하지만 보통 텍스트박스에서 많이 사용됩니다.

KeyCode프로퍼티를 가지고 있으며 아래 주소에서 확인 가능합니다.

KeyCode 확인 - 바로가기

조합 이벤트

DOM 레벨 3에서 처음 도입된 이벤트입니다.
IME에서 언어 입력시 동시에 눌러 문자 하나를 입력하는 일이 흔하기 때문에 생긴 이벤트입니다.

  • compositionstart : IME텍스트 조합 시스템이 열리면 발생
  • compositionupdate : 입력 필드에 새 문자가 삽입
  • compositionend : 텍스트 조합시스템이 닫힐 때

matation 이벤트

DOM의 일부가 바뀌었을 때 알리는 변경 이벤트입니다.
XML, HTML 모두 동작합니다.

  • DOMNodeRemoved : 노드 제거시 발생
  • DomNodeInserted : 노드 삽입시 발생

HTML5 이벤트

HTML5중에서 브라우저에서 잘 지원하는 몇가지 이벤트에 대해서만 간단한 설명위주로 알아보겠습니다.

contextmenu 이벤트

마우스 오른쪽클릭 할때 나오는 contextmenu에 대한 이벤트 입니다.
개발자가 기본 컨텍스트 메뉴를 취소하고 커스텀 메뉴를 대신 표기할 수 있습니다.

beforeunload 이벤트

개발자에게 페이지에서 떠나지 못하게 막을 방법을 제공합니다.
이 이벤트는 취소할 수 없습니다. 강제로 못떠나게 되버리기 때문입니다.
대신 페이지를 닫으려함을 알리고 사용자에게 페이지를 정말 닫을지 머무를지 확인하여 닫을 수 있습니다.

DOMContentLoaded 이벤트

window의 load이벤트는 페이지를 완전히 불러와야 발생하니 외부 자원이 많이 포함된 페이지에서는 시간이 걸릴 수 있습니다.
하지만 이 이벤트는 DOM트리가 완전히 구성되는 즉시 발생합니다.

load이벤트보다 먼저 이벤트 핸들러를 등록할 수 있기때문에 사용자에게도 더 일찍 반응합니다.

readystatechange 이벤트

문서나 요소를 불러오는 상황정보를 제공합니다.
uninitialized, loading, loaded, interactive, complete라는 상태를 가지고있습니다.

pageshow, pagehide 이벤트

페이지가 표시될 때 발생합니다.
load이벤트보다 늦게 발생합니다.

hashchange 이벤트

URL해시(URL에서 # 기호 다음 전부)가 변경될 때 발생합니다.
oldURL, newURL 프로퍼티가 추가되며 이들은 변경 전후의 URL을 들고있습니다.

장치 이벤트

장치별로 지원되는 이벤트가 늘어났고 장치 이벤트에 대한 초안이 만들어졌습니다.

orientationchange

장치의 방향이 바뀔때 마다 (가로모드, 세로모드) 이벤트가 발생합니다.

MozOrientation 이벤트

장치 방향을 감지하는 이벤트입니다.
장치는 가속계가 부착된 장치에서 지원됩니다.

deviceorientation

움직임이 아닌 목적과 방향을 감지하는 메서드입니다.

devicemotion 이벤트

이 이벤트는 장치가 실제 움직이고 있을 때 발생합니다.
누군가 장치를 들고 걸고 있는지 판단할 때 유용합니다.

마치며

중요한 주제중 하나이므로 각 이벤트가 어떻게 동작하는지 알아 두시면 편하실겁니다.
수고하셨습니다.

​


이 포스트는 프론트엔드 개발자를 위한 자바스크립트(인사이트)에서 발췌한 내용이 포함되어 있습니다.
내용 전문이 아니기 때문에 자세하게 알고싶으신 분은 프론트엔드 개발자를 위한 자바스크립트(인사이트) 서적을 참고 하시길 바랍니다.


저작자표시