Event 발생 시 만들어둔 Script가 동작되게 하는 방식
콜백(callback) 함수
- 다른 코드의 인자(Argument)로 함수 이름을 넘겨주는 함수
- 소스코드의 직접 호출이 아닌, 이벤트로 인해 호출되는 함수
이벤트 핸들러
- 이벤트 발생 시 호출되는 함수
- "콜백 함수" 중 용도를 더 명확하게 나타낸 용어이다.
이벤트 리스너
이벤트가 발생하는지 감지하여, 예약된 이벤트 핸들러를 호출해주는 객체
- addEventListner : 이벤트 핸들러 등록
- addEventListener('이벤트이름', '핸들러이름');
<button id="btn"> 고고 </button>
<script>
const btn = document.querySelector("#btn");
btn.addEventListener("click", gogo);
function gogo() {
alert("GOGO");
}
</script>
※ onclick 속성을 이용한 inline 방식은 간단하지만 js와 HTML의 완전 분리가 되지 않아서 유지보수가 좋지 않다.
- addEventListener('change', function(e){}) : input에서 값이 바뀔 때 발생하는 이벤트
- addEventListener('keydown', function(e){}) : 키를 눌렀을 때 반응하는 이벤트
- addEventListener('keyup', function(e){}) : 키를 땠을 때 반응하는 이벤트