[Web] javaScript - Event Driven

🎈 Event Driven

Event 발생 시 만들어둔 Script가 동작되게 하는 방식

🎈 이벤트 관련 용어 정리

• 콜백(callback) 함수

  1. 다른 코드의 인자(Argument)로 함수 이름을 넘겨주는 함수
  2. 소스코드의 직접 호출이 아닌, 이벤트로 인해 호출되는 함수

• 이벤트 핸들러

  • 이벤트 발생 시 호출되는 함수
  • "콜백 함수" 중 용도를 더 명확하게 나타낸 용어이다.

• 이벤트 리스너

  이벤트가 발생하는지 감지하여, 예약된 이벤트 핸들러를 호출해주는 객체

🎈 이벤트 발생 동작 원리

• 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){}) : 키를 땠을 때 반응하는 이벤트