Event Binding(이벤트 바인딩)과 Event Handler(이벤트 핸들러)

Javascript

Event Binding

바인딩이란, 서로 묶어서 연결해 준다는 뜻이다. 이벤트 바인딩이란, 발생하는 이벤트와 그 후에 어떤 일이 벌어질지 알려주는 함수(콜백함수)와 묶어서 연결해 준다는 뜻이다. 예를 들어, 어떤 버튼을 사용자가 클릭하게 되면, 클릭(‘click’)이벤트가 발생하게 되고, 그 이벤트가 발생했을 때 어떤 일이 벌어진다는 것을 알려주는 콜백함수를 실행하게 된다. 이때, 이 콜백함수를 이벤트 핸들러라고 한다.

이벤트 바인딩에는 대표적으로 3가지 방식이 있다.

  1. HTML 이벤트 핸들러
  2. 전통적인 DOM 이벤트 핸들러
  3. Event Listener를 이용한 이벤트 핸들러

1~2번의 단점을 보완한 방식이 Event Listener를 이용한 이벤트 핸들러 방식이다.


1. HTML 이벤트 핸들러

HTML 요소의 이벤트 Attribute에 이벤트 핸들러를 대응시키는 방법이다.

1
2
3
4
5
<button onclick="clickBtn()">Click me</button>

function clickBtn() {
  alert('Button clicked!');
}

옛날 코드를 보게 되면 위와 같은 방식을 사용한 코드가 있다. 그래서 혹시 모를 상황에 대비해 알아둘 필요는 있지만, 현재 이 방식은 사용되지 않고, 사용해서도 안된다. 또한, 이렇게 되면 HTML과 Javascript가 혼용이 되는데, 이 둘은 관심사가 다르기 때문에 같이 사용하는 것을 피해야 한다.


HTML 이벤트 핸들러 내부의 this

HTML 이벤트 핸들러 방식의 경우, 이벤트 핸들러 내부의 this는 window를 가리킨다.

1
2
3
4
5
6
7
<button onclick="clickBtn()">Click me</button>

function clickBtn() {
  alert('Button clicked!');
  console.log(this); // window
  console.log(event.currentTarget); // <button onclick="clickBtn()">Click me</button>
}


2. 전통적인 DOM 이벤트 핸들러

HTML Event Handler의 보완점:

  • HTML과 Javascript가 혼용되는 문제는 해결

단점:

  • 이벤트 핸들러에 하나의 함수만을 바인딩할 수 있다.
  • 함수에 인수를 전달할 수 없다.
  • 바인딩된 이벤트 핸들러가 2개 이상일 경우, 제일 마지막에 추가된 코드의 바인딩된 이벤트 핸들러만 실행된다.
1
2
3
4
5
6
7
8
9
10
11
12
13
<button id="myBtn">Click me</button>

var myBtn = document.getElementById('myBtn');

// 첫번째 바인딩된 이벤트 핸들러 => 실행되지 않는다.
myBtn.onclick = function () {
  alert('Button clicked 1');
};

// 두번째 바인딩된 이벤트 핸들러
myBtn.onclick = function () {
  alert('Button clicked 2');
};


전통적인 DOM 이벤트 핸들러 내부의 this

전통적인 DOM 이벤트 핸들러 방식에서 이벤트 핸들러 내부의 this는 이벤트에 바인딩된 요소를 가리킨다. 이것은 이벤트 객체의 currentTarget 프로퍼티와 같다.

1
2
3
4
5
6
7
8
<button id="myButton">Click me!!!</button>

var myBtn = document.getElementById('myButton');
myBtn.onclick = function() {
  console.log(this); // <button id="myButton">Click me!!!</button>
  console.log(event.currentTarget); // <button id="myButton">Click me!!!</button>
  console.log(this === event.currentTarget); // true
};

myButton이란 id를 가진 button 요소(myBtn)가 이벤트에 바인딩된 요소를 말한다. 이것은 이벤트 객체의 currentTarget 프로퍼티와 같다.


3. Event Listener를 이용한 이벤트 핸들러

addEventListener 함수를 이용하여 대상 요소(Event Target)에 이벤트를 바인딩하고, 해당 이벤트가 발생했을 때 실행될 콜백 함수를 지정한다.

1
2
3
4
target.addEventListener(type, listener[, useCapture]);

var el = document.getElementById("outside");
el.addEventListener("click", function(){modifyText("four")}, false);

addEventListener 함수의 인수:

  • type: 이벤트 타입
  • listener: 이벤트 핸들러, 즉 이벤트가 발생했을 때, 실행될 콜백함수
  • useCapture: true면 Capturing, false면 Bubbling(Default: false)

Event Listener를 이용한 이벤트 핸들러의 장점

  • 하나의 이벤트에 대해 하나 이상의 핸들러를 추가할 수 있다.
  • 캡처링(Capturing)과 버블링(Bubbling)을 지원한다.
  • HTML 요소뿐만아니라 모든 DOM 요소에 대해 동작한다.
1
2
3
4
5
6
7
<label for='email'>Your Email</label>
<input type='text' id='email'>

var elem = document.getElementById('email');
elem.addEventListener('blur', function() {
  alert('Your Email!');
});

참고로, addEventListener 함수는 IE 9 이상에서 동작한다. IE 8 이하에서는 attachEvent 함수를 사용한다.

만약 addEventListener 함수 앞에 대상요소(elem)를 지정하지 않으면, blur 이벤트는 전역객체 window에 바인딩된다.


Event Listener를 이용한 이벤트 핸들러 내부의 this

addEventListener 함수에서 지정한 이벤트 핸들러 내부의 this는 Event Listener에 바인딩된 요소(currentTarget)를 가리킨다. 이것은 이벤트 객체의 currentTarget 프로퍼티와 같다.

1
2
3
4
5
6
7
8
<button id="myBtn">Click me!!!</button>

var myBtn = document.getElementById('myBtn');
myBtn.addEventListener('click', function (event) {
  console.log(this); // <button id="myBtn">Click me!!!</button>
  console.log(event.currentTarget); // <button id="myBtn">Click me!!!</button>
  console.log(this === event.currentTarget); // true
});