addEventListener
이벤트를 달 때 사용하는 메서드
addEventListener 사용법
태그.addEventListener('이벤트 이름', 리스너함수);
예시
document.querySelector("button").addEventListener("click", function () {
console.log("버튼 클릭");
});위의 코드에서는 태그를 document.querySelector("button")으로 선택했다. 이 태그에 addEventListener를 붙여 이벤트를 연결할 수 있다. 클릭 이벤트의 이름은 click이다. 버튼을 클릭하면 onClickButton 함수가 실행된다. 이때 onClickButton 대신 onClickButton()를 넣으면 안된다. ()를 붙이면 클릭과 상관 없이 함수가 실행된다. 함수 자체를 넣어야 하고, ()를 붙여 함수를 실행해서는 안된다는 점에 주의하자.
이때 onClickButton 같은 함수를 콜백 함수(callback function)라고 한다. 콜백 함수는 동작이 실행되고 난 뒤에 추가로 실행되는 함수를 의미한다. 버튼을 클릭한 후에 onClickButton이 추가적으로 실행되므로 콜백 함수라고 볼 수 있다.
위의 코드를 아래와 같이 화살표 함수로 표현할 수도 있다.
document.querySelector("button").addEventListener("click", () => {
console.log("버튼 클릭");
});event.target.value
예시
document.querySelector("input").addEventListener("input", () => {
console.log("글자 입력");
});이때, event.target.value로 input 태그에 입력한 값을 알아낼 수 있다.
document.querySelector("input").addEventListener("input", (event) => {
console.log("글자 입력",event.targer.value);
});참고로 event는 매개변수이므로 다른 이름으로 지어도 된다. 아래처럼 e로 해도 되고 전혀 관련없는 hello로 지어도 된다. 다만 hello와 같이 지으면 코드를 보는 사람들이 맥락을 유추할 수 없기 때문에 보통 event나 e로 짓는다.
사용법
const onInput = (e) => {
console.log('글자 입력', e.target.value);
}위와 같이 작성한 HTML을 실행해 입력창에 글자를 입력하면 콘솔 창에 기록된다.
참고
removeEventListener는 event를 지울 때 사용하는 메서드
