웹 페이지에서 일어날 수 있는 대부분의 일들을 이벤트라고 부른다.
마우스를 움직이거나 키보드를 누르거나 페이지를 스크롤 하는 일도 모두 이벤트이다.
// 이벤트(Event)와 버튼 클릭
const btn = document.querySelector('#myBtn');
// 이벤트 핸들링(Event Handing)
btn.onclick = function(){ // 이벤트 핸들러(Event Handler)
console.log('Hello Codeit!');
}
Hello Codeit!onclick 프로퍼티에 함수를 할당해 주면 버튼에 대한 클릭 이벤트에 원하는 동착을 할 수 있게 된다.
이벤트가 발생했을 때 어떤 특별한 동작을 하도록 이벤트를 다루는 것을 이벤트 핸들링이라고 부르고, 구체적인 동작들을 코드로 표현한 함수 부분을 이벤트 핸들러라고 부른다.
이벤트 핸들링은 JavaScript 파일에서뿐만 아니라 HTML 태그에 직접 작성할 수도 있다.
<button id="myBtn" onclick="console.log('Hello Codeit!')">Click!</button>*하지만 이 방법은 실제로 잘 사용되는 방법은 아니다. 우리가 실제로 동작시킬 대부분의 코드들은 이렇게 간단하지가 않아서 조금만 더 복잡한 코드인 경우에 이렇게 작성하게 되면 HTML파일 전체가 가독성이 좋아지지 않게 된다. 그리고 가장 큰 문제는 HTML 코드와 JavaScript 코드가 섞이게 되면서 코드의 일관성을 유지하기가 어려워진다. 이런 문제는 나중에 코드를 유지 보수하는데 큰 어려움을 주게 된다. 그래서 웹 페이지의 구조를 결정하는 일은 HTML 파일에 그리고 동작을 담당하는 일은 js파일에만 작성하는 것을 권장한다.
