Event Binding에 대한 내용입니다.
이벤트 바인딩은 웹 개발에서 일반적으로 사용되고 있으며, 특히 자바스크립트를 사용할 때 HTML 요소에 이벤트 리스너를 부착하여 사용자 상호 작용을 처리하고 이벤트에 응답하는 것을 포함합니다. 이는 대화형 및 동적 웹 애플리케이션을 구축하기 위한 기본 개념입니다.
이벤트 바인딩을 사용하면 버튼 클릭이나 양식 제출과 같은 요소에서 특정 이벤트가 발생했을 때 발생할 작업을 지정할 수 있습니다.
이벤트 바인딩의 주요 내용
- 이벤트 리스너( Event Listener ): 이벤트 리스너는 버튼이나 입력 필드와 같은 HTML 요소의 이벤트를 수신하는 자바스크립트 함수입니다. 이벤트가 발생할 때까지 기다린 다음 콜백 함수와 같은 지정된 코드 조각을 실행합니다.
- 이벤트 유형( Event Type ): 이벤트는 click, submit, keypress, mouseover등 다양한 유형이 될 수 있습니다. 각 유형은 특정 사용자 작업에 해당하며 이벤트 리스너를 요소에 연결하여 이러한 작업에 응답할 수 있습니다.
- 이벤트 대상( Event Target ): 이벤트 대상은 이벤트 리스너를 연결하는 HTML 요소입니다. 이 요소에서 지정된 이벤트가 발생하면 연관된 이벤트 리스너가 트리거 됩니다.
- 콜백 함수 ( Callback Function ): 콜백 함수는 이벤트가 발생했을 때 실행되는 코드입니다. 이는 애플리케이션이 이벤트에 응답하는 방법을 정의합니다. 사용자 정의 자바스크립트 함수를 이벤트 핸들러로 작성하여 사용자 인터페이스 업데이트 또는 서버에 데이터 전송과 같은 작업을 수행할 수 있습니다.
메서드를 사용하는 자바스크립트의 이벤트 바인딩에 대한 예제
const myButton = document.getElementById("myButton");
function handleClick() {
alert("버튼 클릭");
};
myButton.addEventListener("click", handleClick);
위 내용은 아래와 같습니다.
- getElementById 메서드로 HTML 버튼 요소를 선택하여 myButton 변수에 할당합니다.
- handleClick 버튼을 클릭할 때 호출될 함수를 정의합니다. 이 경우 경고가 표시됩니다.
- addEventListener 메서드를 사용하여 클릭 이벤트 리스너를 클릭하여 콜백 기능 핸들 클릭을 지정합니다. 버튼을 클릭하면 해당 기능이 실행됩니다.
이벤트 바인딩은 대화형 웹 응용 프로글매을 만드는데 중요합니다. 이를 통해 사용자 입력에 응답하고, 특정 이벤트에 대한 응답으로 작업을 트리거하고, 동적 사용자 인터페이스를 구축할 수 있습니다. button, form, input field 등과 같은 다양한 DOM 요소와 함께 이벤트 바인딩을 사용하여 반응성이 뛰어나고 매력적인 웹 애플리케이션을 만들 수 있습니다.
추가내용
이벤트 바인딩에 대표적 3가지 방식
- HTML 이벤트 핸들러
- 적통적인 DOM 이벤트 핸들러
- Event Listener를 이용한 이벤트 핸들러
1. HTML 이벤트 핸들러
HTML 요소에 이벤트 Attribute에 이벤트 핸들러를 대응시키는 방법입니다.
// HTML
<button onclick="clickBtn()">클릭</button>
// JS
function clickBtn() {
alert("경고창");
};
옛날 코드들을 보게되면 위같은 방식을 사용한 코드들이 있습니다. 그래서 알아둘 필요는 있지만, 현재는 사용하지 않는 방식입니다.
위처럼 사용하게 되면 HTML과 자바스크립트가 혼용이 되기 때문에 사용하는 것을 피해야 합니다.
HTML 이벤트 핸들러의 this
// HTML
<button onclick="clickBtn()">클릭</button>
// JS
function clickBtn() {
alert("경고창");
console.log(this); // window
console.log(event.currentTarget); // clickBtn
};
2. 전통적인 DOM 이벤트 핸들러
HTML 이벤트 핸들러의 혼용되는 문제는 해결이 되었습니다. 하지만 이벤트 핸들러에 하나의 함수만 바인딩 할 수 있다는 것과 함수에 인수를 전달 할 수 없는 점, 그리고 바인딩된 이벤트 핸들러가 2개 이상일 경우 제일 마지막에 추가된 코드의 바인딩된 이벤트 핸들러만 실행된다는 단점이 있습니다.
// HTML
<button id="clickBtn">클릭</button>
// JS
let myBtn = document.getElementById("clickBtn");
// 첫번쨰 바인딩 ( 실행되지 않음 )
myBtn.onclick = function() {
alert("경고");
};
// 두번째 바인딩
myBtn.onclick = function() {
alert("두번째 경고");
}
전통적인 DOM 이벤트 핸들러의 this
// HTML
<button id="clickBtn">클릭</button>
// JS
let myBtn = document.getElementById("clickBtn");
myBtn.onclick = function() {
alert("경고");
console.log(this); // clickBtn
console.log(event.currentTarget); // clickBtn
console.log(this === event.currentTarget); // true
};
3. Event Listener를 이용한 이벤트 핸들러
addEventListener 함수를 이용해서 대상 요소( Event Target )에 이벤트를 바인딩 하고, 해당 이벤트가 발생했을 때 실행될 콜백 함수를 지정합니다.
<button id="clickBtn">클릭</button>
let el = document.getElementById("clickBtn");
el.addEventListener("click", function() {
alert("경고");
}, false)
target.addEventListener(type, listener[, useCapture]);
addEventListener 함수의 인수
- type: 이벤트 타입
- listener: 이벤트 핸들러. 이벤트가 발생했을 때 실행될 콜백함수
- useCapture: true면 Capturing, false면 Bubbling ( Default: false )
addEventListener를 이용한 이벤트 핸들러는 하나의 이벤트에 대해 하나 이상의 핸들러를 추가할 수 있으며, 캡처링과 버블링을 지원하며, HTML 요소뿐 아니라 모든 DOM 요소에 대해 동작한다는 장점이 있습니다.
// HTML
<input type="text" id="nick" />
// JS
let el = document.getElementById("nick");
el.addEventListener("blur", function() {
alert("포커스");
});
addEventListener 함수 앞에 대상요소인 el을 지정하지 않으면 blur 이벤트는 전역객체인 window에 바인딩됩니다.
:: ) addEventListener 함수는 IE 9이상에서 동작하며, IE 8 이하에서는 attachEvent함수를 사용합니다.
EventListener를 이용한 이벤트 핸들러의 this
// HTML
<button id="clickBtn"></button>
// JS
let myBtn = document.getElementById("clickBtn");
myBtn.addEventListener("click", function(e) {
console.log(this); // clickBtn
console.log(event.currentTarget); // clickBtn
console.log(this === event.currentTarget); // true
});
