JS, 이벤트 바인딩(Event Binding)

바인딩이란 서로 묶어서 연결해 준다는 뜻

이벤트 바인딩이란 발생하는 이벤트와 그 후에 어떤 일이 벌어질지 알려주는 함수(콜백함수)와 묶어서 연결해준다는 뜻

예를 들어 어떤 버튼을 사용자가 클릭하게 되면 클릭 이벤트가 발생하게 되고 그 이벤트가 발생했을때 콜백함수가 실행하게 됨 이때 이 콜백함수를 이벤트 핸들러라고 함

 

이벤트 바인딩의 대표적 3가지 방식

▶ HTML 이벤트 핸들러

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

<button onclick="clickBtn()">Click me</button>

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

HTML과 JS가 혼용되서 사용되는 방식. 현재 이 방식을 사용하지도 않고 사용해서도 안됨

 

HTML 이벤트 핸들러 내부의 this

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

<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>
}

▶ 전통적인 DOM 이벤트 핸들러

장점과 단점

• 장점
  • HTML과 JS가 혼용되는 문제 해결
• 단점
  • 이벤트 핸들러에 하나의 함수만을 바인딩할 수 있음
  • 함수에 인자를 전달할 수 없음
  • 바인딩된 핸들러가 2개 이상일 경우 제일 마지막에 추가된 코드의 바인딩된 이벤트 핸들러만 실행됨

<button id="myBtn">Click me</button>

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

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

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

 

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

전통적인 DOM 이벤트 핸들러 방식에서 이벤트 핸들러 내부의 this는 이벤트에 바인딩된 요소를 가리킴

이것은 이벤트 객체의 currentTarget 프로퍼티와 같음

<button id="myButton">Click me!!!</button>

let 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
};

 

▶ Event Listener를 이용한 이벤트 핸들러

위의 HTML 이벤트 핸들러와 전통적인 DOM 이벤트 핸들러의 단점을 보완한 방식

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

target.addEventListener(type, listener[, useCapture]);

let 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 요소에 대해 동작

<label for='email'>Your Email</label>
<input type='text' id='email'>

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

 

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

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

<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
});