[JavaScript] 이벤트 바인딩

이벤트 바인딩 (Event Binding)

: 발생하는 이벤트와 그 후에 어떤 일이 벌어질지 알려주는 함수(콜백함수)를 묶어서 연결해 주는 것

이벤트 바인딩에는 3가지 방식이 존재한다.

1. HTML 이벤트 핸들러
: HTML 요소의 이벤트 속성에서 이벤트 핸들러를 대응
: HTML과 JS의 혼용문제 발생

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

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

 

2. 전통적인 DOM 이벤트 핸들러
: HTML 이벤트 핸들러의 문제점이었던 HTML, JS 혼용 문제 해결
: 이벤트 핸들러에 하나의 함수만을 바인딩할 수 있다.(마지막에 선언된 함수로 바인딩된다)
: 함수에 인자를 전달할 수 없다.

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

 

3. Event Listener를 이용한 이벤트 핸들러
: addEventListener함수를 이용하여 대상 요소에 이벤트를 바인딩하고, 해당 이벤트가 실행될 콜백함수를 지정
: 하나의 이벤트에 다수의 핸들러를 추가할 수 있다.
: 캡쳐링과 버블링을 지원한다.
: HTML뿐만 아니라 DOM요소에도 동작한다

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

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

 

참고
: https://cheonmro.github.io/2018/09/03/event-binding-and-event-handler/