이벤트 : 웹 페이지에서 발생하는 대부분의 일(사건)들 ex) 버튼 클릭, 스크롤, 키보드 입력, ...
이벤트 핸들링 : 자바스크립트를 통해 이벤트를 다루는 일
이벤트 핸들러 : 이벤트가 발생했을 때 일어나야하는 구체적인 동작들을 표현한 코드. 이벤트 리스너(Event Listener)라고도 함.
[이벤트 핸들러를 등록하는 2가지 방법]
1. 자바스크립트로 해당 DOM 객체의 onclick 프로퍼티에 등록
const btn = document.querySelector('#myBtn');
btn.onclick = function() {
console.log('Hello Codeit!');
};
2. HTML 태그의 onclick 속성에 바로 표시 (권장되지 않음)
<button id="myBtn" onclick="console.log('Hello Codeit!')">클릭!</button>
예) 1의 버튼클릭 이벤트
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>버튼 클릭 이벤트</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h2 id="title">정답일까?</h2>
<button id="grade">
채점
</button>
<script src="index.js"></script>
</body>
</html> const btn = document.querySelector('#grade'); // 변수 지정, 태그 선택
btn.onclick = function(){ // 클릭 이벤트 함수
alert('정답입니다!👏🏻');
}
'JavaScript > Interactive JavaScript' 카테고리의 다른 글
| [JavaScript] HTML 속성 (0) | 2023.01.20 |
|---|---|
| [JavaScript] 요소 노드 추가 / 이동 / 삭제 (0) | 2023.01.18 |
| [JavaScript] DOM 트리 (0) | 2023.01.18 |
| [JavaScript] 태그 선택하기 (0) | 2023.01.17 |
| [JavaScript] 다양한 이벤트 (0) | 2023.01.16 |
