Event Object(이벤트 객체)

Javascript

Event Object(이벤트 객체)란 무엇인가?

이벤트 객체란, 이벤트를 발생시킨 요소와 발생한 이벤트에 대한 정보를 제공하는 것을 말한다. 이벤트가 발생하면, 이벤트 객체는 동적으로 생성되어, 이벤트 핸들러에 인자로 암묵적으로 전달된다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// HTML
<div class="parent">
  <button id="btn1">button 1</button>
  <button id="btn2">button 2</button>
</div>


// Javascript
  function getColor(e) {
  e.target.style.color = 'red';
}

var parent = document.querySelector('.parent');
parent.addEventListener('click', getColor);

위 코드에서 ‘e’가 이벤트 객체인데, 위 코드처럼 이벤트 핸들러를 선언할 때, 이벤트 객체를 전달받을 첫번째 매개변수를 명시적으로 선언해야 한다. 그 이름은 위와 같이 ‘e’가 되든, ‘event’가 되든 상관이 없다.

이벤트도 객체이기 때문에, 프로퍼티와 메소드를 가진다.


Event Property

Event.target && Event.currentTarget

  • Event.target: 실제로 이벤트를 발생시킨 요소
  • Event.currentTarget: 이벤트에 바인딩된 DOM 요소(addEventListener 메소드 앞에 기술된 객체)

버튼 2개를 자식요소로 가지고 있는 parent 요소가 있다고 해보자.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// HTML
<div class="parent">
  <button id="btn1">button 1</button>
  <button id="btn2">button 2</button>
</div>


// Javascript
function getEventTarget(e) {
  console.log(e.target); // <button id="btn1">button 1</button>
  console.log(e.currentTarget); // <div class="parent">...<div>
  console.log(this); // <div class="parent">...<div>
  console.log(e.currentTarget === this); // true
}

var parent = document.querySelector('.parent');
parent.addEventListener('click', getEventTarget);

만약 첫번째 버튼(button 1)을 클릭하게 되면 결과는 위와 같이 나온다. e.target은 실제로 이벤트를 발생시킨 요소로, 첫번째 버튼(button 1)이 된다. 그러나, e.currentTarget은 이벤트에 바인딩된 DOM 요소(addEventListener 메소드 앞에 기술된 객체)로, 이벤트가 발생된 곳은 첫번째 버튼이지만, 이벤트에 바인딩된 DOM 요소는 parent(부모요소)이기 때문에, e.currentTarget은 parent 요소가 된다. 또한, addEventListener 함수에서 지정한 이벤트 핸들러 내부의 this는 Event Listener에 바인딩된 요소(parent)를 가리킨다. 이것은 이벤트 객체의 currentTarget 프로퍼티와 같다.


Event.type && Event.keyCode

  • Event.type: 발생한 이벤트의 종류
  • Event.keyCode: 발생한 이벤트의 키보드 번호
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// HTML
<div class="parent">
  <input type="text" class="val">
  <button id="btn">button</button>
</div>


// Javascript
function getEventType(e) {
  console.log(e.type); // keyup
  console.log(e.keyCode); // 13
}

var inputBox = document.querySelector('.val');
inputBox.addEventListener('keyup', getEventType);

어떤 알파벳 하나를 입력하고, 키보드에서 ‘enter’를 입력하게 되면 e.type은 ‘keyup’이 되고, e.keyCode는 13이 된다. 즉, 발생한 이벤트의 타입은 ‘keyup’이고, 발생한 이벤트의 키보드 번호(enter의 키보드 번호)는 13이다.


Event.preventDefault() && Event.stopPropagation()

  • Event.preventDefault(): 이벤트의 기본 동작을 중단
  • Event.stopPropagation(): 이벤트의 전파(버블링/캡처링)를 중단


Event.preventDefault()

1
2
3
4
5
6
7
8
9
10
11
12
13
// HTML
 <a href="https://cheonmro.github.io/">블로그로 이동</a>


// Javascript
var elem = document.querySelector('a');

  elem.addEventListener('click', function (e) {
  console.log(e.cancelable); // true

  // 이벤트의 기본 동작을 중단
  e.preventDefault();
});

원래는 ‘a’태그를 클릭하면 블로그로 이동을 해야하지만, 위와 같이 e.preventDefault()를 사용하게 되면, 이벤트의 기본 동작을 중단할 수 있다. 단, Event.cancelable가 true일 경우만 가능하다. Event.cancelable는 이벤트 객체의 프로퍼티로, 요소의 기본 동작을 중단할 수 있는지에 대한 여부(true/false)를 나타낸다.


Event.stopPropagation()

어느 한 요소를 이용하여 이벤트를 처리한 후, 이벤트가 부모 요소로 이벤트가 전파되는 것을 중단하기 위해 사용되는 메소드이다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// HTML
<div id="divBox">
  <p id="paraBox">블로그
    <a id="linkBox" href="https://cheonmro.github.io/">클릭</a>
  </p>
</div>


// Javascript
document.getElementById("divBox").addEventListener("click", clickDiv);
document.getElementById("paraBox").addEventListener("click", clickPara);
document.getElementById("linkBox").addEventListener("click", clickLink);

function clickDiv(event) {
  console.log('Event for div');
}
function clickPara(event) {
  console.log('Event for p');
}
function clickLink(event) {
  event.stopPropagation();	// 이벤트의 전파를 중단함.
  console.log('Stop Propagation!')
}

위 코드에서 paraBox 요소를 클릭하게 되면, 부모요소로 이벤트가 전파된다. 그러나, linkBox 요소를 클릭하게 되면, 이벤트는 부모요소로 전파되지 않는다.