@7/27/2022
document.querySelector('input').addEventListener('input', function() { // input 요소에 입력 시 함수 실행
console.log('글자 입력');
});
document.querySelector('button').addEventListener('click', function() { // button 클릭 이벤트 발생 시 함수 실행
console.log('버튼 클릭');
});
JavaScript
복사
콘솔창 결과
태그.addEventListener('이벤트 이름', 리스너함수);
JavaScript
복사
코드 기본 사용법
콜백함수란?
⇒ 어떤 동작이 실행되고 난 후 연이어 실행되는 함수
const onclick = () => {
console.log('버튼 클릭');
}
document.querySelector('button').addEventListener('click', onClick); // (문자열, 함수명)
JavaScript
복사
•
맨 위 함수는 콜백함수이자, 익명함수(1회성)
•
다시 사용할 함수는 이처럼 변수명을 지어서 호출하도록 한다.
event.target.value 사용 시 입력 값 출력이 가능하다
const onInput = (e) => {
console.log('글자 입력', e.target.value); // 사용자의 입력 값 출력
};
document.querySelector('input').addEventListener('input', onInput);
JavaScript
복사
콘솔창 결과
