이벤트(Event)와 버튼 클릭

웹페이지에서 일어날 수 있는 다양한 일들을 이벤트라고 한다.

const btn = document.querySelector('#myBtn');

// 이벤트 핸들링 (Event Handling)
btn.onclick = function () { // 이벤트 핸들러 (Event Handler) or 이벤트 리스너 (Event Listener)
  console.log('Hello Codeit');
}

onclick property에 함수를 할당해주면 버튼에 대한 클릭 이벤트에 원하는 동작을 수행할 수 있게 한다.

이벤트가 발생했을 때 특별한 동작을 하도록 이벤트를 다루는 것을 이벤트 핸들링이라고 부르고, 구체적인 동작들을 코드로 표현한 함수부분을 이벤트 핸들러라고 부른다.

📕 참고사항

이벤트 핸들링은 자바스크립트 뿐만 아니라 HTML 코드에서도 작성할 수 있다. 하지만 잘 사용하는 방법은 아니다. 간단한 자바스크립트 코드는 간결해보일 수 있지만 실제로 동작시킬 코드들은 복잡하기 때문에 HTML 코드 가독성이 떨어진다. 가장 큰 문제는 HTML코드와 자바스크립트의 코드가 섞이게 되면서 추후 유지보수가 어려워진다.