HTML5 이벤트(Event) 개념 정리

웹 페이지에서 사용자의 마우스나 키보드에 의한 입력과 이미지나 문서의 로딩 등, 문서나 브라우저에 변화가 생길 경우 이벤트(Event)가 발생한다. 또한 이벤트를 처리하기 위해 작성된 자바스크립트 코드를 이벤트 리스너(Event Listener)라고 한다. 

---

<이벤트 리스너 작성>

 

첫 번째로 간단하게 HTML 태그 내에 이벤트 리스너를 작성할 수 있다. 코드가 짧을 경우 주로 사용한다.

<button onclick="document.getElementById("demo").innerHTML = 'Hello World'">
Click me
</button>

---

두 번째로는 DOM객체의 이벤트 리스너 속성을 이용하여 작성하는 방법이다.

function mover() {
// 마우스를 올렸을 경우 동작할 내용
}

var p = document.getElementById("p");
p.onmouseover = mover;

---

세 번째로 DOM객체의 addEventListener() 메소드를 활용하는 방법이다.

 

addEventListener(eventname, listner, useCapture)

• useCapture : true면 캡쳐단계에서 실행, false면 버블단계에서 실행, default 는 false

p.addEventListener("mouseover",mover);

---

다음은 몇 가지 이벤트 리스너를 나타낸 것이다. 

이벤트 리스너	설명
onclick	사용자가 객체를 클릭할 때
ondbclick	객체가 더블 클릭 될 때
onmouseover	마우스 커서가 객체 영역으로 들어올 때
onerror	문서나 이미지 로딩 시 오류가 발생할 때
onload	문서나 이미지의 로딩이 완료된 직후
onfocus	객체가 포커스를 가지게 되었을 때
onblur	객체가 포커스를 잃을 때
onkeydown	사용자가 아무 키를 눌렀을 때
onkeyup	사용자가 누른 키를 놓을 때

표준 이벤트 리스너는 약 70가지 정도가 있다. 

---

이벤트가 발생하면, 발생한 이벤트에 관한 정보를 담은 이벤트 객체가 발생한다. 이벤트 객체는 발생한 이벤트에 관한 정보를 가지고 있다. 

 

다음은 이벤트 객체들의 공통 멤버이다.

Property / Method	Description
type	발생한 이벤트의 종류를 나타내는 문자열
target	이벤트를 발생시킨 객체
curretTarget	현재 이벤트 리스너를 실행하고 있는 DOM객체
defaultPrevented	이벤트의 디폴트 행동이 취소되었는지를 나타내는 true/false 값
preventDefault	이벤트의 디폴트 행동을 취소시키는 메소드

---

< 이벤트 흐름 >

또한 이벤트가 발생하면 최상위의 window 객체로 부터 target 객체까지 이벤트 객체가 전파되고, 이 단계를 Capturing phase라고 한다. 그리고 다시 target 객체로 부터 다시 window 객체로 까지 이벤트 객체가 순서대로 전달 되는데 이 과정을 bubbling phase라고 한다. 이벤트 객체가 전달되는 동안 이벤트 리스너를 만나면 순서대로 실행된다. 

---