이벤트 핸들러(Event Handler) 써보자!

Javascript 이론

이벤트 핸들러(Event Handler) 써보자!

윤태영(Coding) 2022. 7. 29. 16:25

Javascript에서 Event Handler란 일상생활에서 비유해 보자면, 음.. 보통 운전을 할 때, Handle을 통해서 차를 조종하지 않는가? 그런 것처럼, 언어에서도 조종하는 것이 있다! 여기서는 HTML을 조종할 수 있다고 생각하면 된다.

Button을 눌렀을 때, 클릭 이벤트가 나오게 한다 던가, 에러 처리를 할 수 있다 던가, 조금 더 나아가면 비동기 처리 등 다양한 작업들을 조종할 수 있다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>JS with Codeit</title>
</head>
<body>
  <div id="content" class="btns">
    <button id="myBtn">JS Click!</button>
    <button onclick="console.log('Hello Codeit!')">HTML Click!</button>
  </div>
  <script src="index.js"></script>
</body>

</html>

Id 가 myBtn인 값을 Js파일로 옮겨서 해보자.

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



function eventgood() {
 console.log('Hi taeyoung')
 }
 
 btn.addEventListener('click', eventgood)

위의 코드를 설명 해보자면, myBtn인 아이디 값을 Btn "변수"라는 바구니에 담았다. 이제, 기능을 만들어서, 'Hi taeyoun'을 나오게 하는 기능을 만들어주고, btn을 '클릭'하면 그 기능이 나오게 해주는 것이다. 이제 button을 클릭할 때마다, 'Hi taeyoung'이 콘솔 창에 찍힌다. 정말 멋지지 않은가?😊