[인터랙티브 자바스크립트] 11. 이벤트와 버튼 클릭

웹 페이지에서 일어날 수 있는 대부분의 일들을 이벤트라고 부릅니다.

그래서 웹 페이지에는 정말 다양한 이벤트들이 있는데요. 우리가 그냥 마우스를 움직여도 이벤트고 키보드를 누르거나 페이지를 스크롤 하는 일도 모두 이벤트입니다. 그런데 이 중에서도 우리가 가장 자주 접할 수 있는 이벤트를 뽑으라면 아마 마우스 클릭이라고 할 수 있을 것 같은데요. 

click이라는 버튼이 하나 있고 지금은 클릭을 해도 아무런 변화가 일어나지 않습니다.

 

querySelector를 이용해서 이 버튼을 선택해 보겠습니다.

// 이벤트(Event)와 버튼 클릭
const btn = document.querySelector('#myBtn');

이렇게 변수를 하나 만들어서 querySelector 메소드를 이용해서 querySelector('#myBtn') 이렇게 작성해 줍니다.

HTML을 보면 이 버튼이 myBtn이라는 id를 가지고 있기 때문입니다.

 

// 이벤트(Event)와 버튼 클릭
const btn = document.querySelector('#myBtn');
btn.onclick = function () {
  console.log('Hello Codeit!!');
}

이 태그에 onclick이라는 프로퍼티에 함수를 할당해 주는 겁니다. 그래서 이대로 코드를 저장하고 실행해보면 이제는 버튼을 눌렀을 때 콘솔에 Hello Codeit!!이 출력되는 걸 확인할 수 있는데요.

갑자기 태그를 선택해서 프로퍼티에 어떤 함수를 할당하는 게 지금 당장은 어색할 수 있지만 아무튼 이런 식으로 onclick 프로터티에 함수를 할당해 주면 버튼에 대한 클릭 이벤트에 원하는 동작을 할 수 있게 되는 겁니다.

 

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

 

그리고 한 가지만 더 살펴보면 사실 이벤트 핸들링은 이렇게 JavaScript 파일에서뿐만 아니라 HTML 태그에 직접 작성할 수도 있습니다.

 

그러고 나서 여기 버튼 태그 안에 onclick 이라는 속성에 JavaScript 코드를 넣어주면 이전에 JavaScript 파일에서 작성한 것과 같이 똑같이 동작하는 모습을 확인할 수 있습니다.

 

웹 페이지의 구조를 결정하는 일은 HTML 파일에 그리고 동작을 담당하는 일은 JS파일에만 작성하는 것을 권장해드립니다.