이벤트(Event)란?

그대로 직역하자면 어떤 사건으로 유저가 UI의 어떤 버튼을 클릭하거나, 스크롤을 하거나 등을 의미한다.

이벤트 흐름

이벤트가 전달되는 순서를 의미한다.

1. 이벤트 버블링

어떤 이벤트가 발생을 하면 가장 깊은 곳(가장 하위)부터 거슬러 올라가는 방식을 말한다.
만약 HTML의 구성이 document HTML BODY div로 되어있다면,
가장 깊은 곳인 div - BODY - HTML - document로 거슬로 올라가는 방식이다.

2. 이벤트 캡처링

이벤트 버블링방식과는 반대로 최상위 노드에서 이벤트가 발생하여
document - HTML - BODY - div 순서로 이벤트가 발생한다.

이벤트 핸들러

• 유저로 인해 브라우저에 있는 이벤트(click, scroll, hover 등)가 호출되는 함수이다.
• 이벤트 핸들러는 속성값을 감싸는 함수가 생성되며, event라는 특별한 로컬변수를 사용할 수 있다.

1. 가장 기본이 되는 이벤트 핸들러

// 예시
var btn = document.getElementById("myBtn");
btn.onClick = function() {
  alert("버튼이 클릭됨");
};

2. this 이용

• 여기서 this는 요소자체(엘리먼트)를 가리킨다.

// 예시
var btn = document.getElementById("myBtn");
btn.onClick = function() {
  alert(this.id); //myBtn
};

3. 이벤트 메서드 이용

• addEventListener(이벤트이름, 이벤트핸들러 함수, 캡처링 혹은 버블링)
• 세 번째 인자는 이벤트 캡쳐 혹은 이벤트 버블링 중 어느것을 호출할지 Boolean으로 나타내는 값
• 이벤트 캡쳐링는 true, 이벤트 버블링은 false로 나타낸다.

// 예시 1
var btn = document.getElementById("myBtn");
btn.addEventListener("click", function() {alert("버튼이 클릭됨")}, false);

// 예시 2
var btn = document.getElementById("myBtn");
btn.addEventListener("click", function() {alert(this.id)}, false);

이벤트 객체

• DOM과 관련된 이벤트가 발생하면 모두 event객체에 저장된다.
• 어떤 이벤트를 다루고 있는지, 좌표는 어디있는지 등 이벤트(event)의 여러가지 정보를 파악한다.
• 브라우저에서 이벤트가 발생하면 발생된 이벤트와 관련된 정보들을 이벤트 객체(event)에 담긴다.

// 예시 1
var btn = document.getElementById("myBtn");
btn.onClick = function(event) { //event가 이벤트 객체
  alert(event.type); //click
}

// 예시 2
var btn = document.getElementById("myBtn");
btn.addEventListener("click", function(event) { //event가 이벤트 객체
  alert(event.type); //click
}, false);