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'이 콘솔 창에 찍힌다. 정말 멋지지 않은가?😊
'Javascript 이론' 카테고리의 다른 글
| Falsy 값과 Truthy 값은 무엇일까? (0) | 2022.08.01 |
|---|---|
| Boolean 불 대수에 대해 알아보자! (0) | 2022.08.01 |
| 배열 인덱싱과 반복문(FOR,FOR IN 간단 설명) (0) | 2022.07.29 |
| 객체 지향 프로그래밍은 뭐에요?OOP(Object-Oriented Programming) (0) | 2022.07.28 |
| 절차적 지향 프로그래밍 이란 무엇일까?(Procedural Programing)절차적적 지향 프로그래밍 언어 vs객체 지향 프로그래밍 언어 (0) | 2022.07.28 |