이벤트 설정하기
문서객체.addEventListener(이벤트 이름, 콜백 함수);
이벤트가 발생할 때 실행할 함수는 addEventListener()메소드를 사용해서 콜백 함수로 등록
이벤트가 발생할 때 실행할 함수(콜백함수)를
이벤트 리스너 event listener 또는 이벤트 핸들러 event handler 라고 부름
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
/*
*/
document.addEventListener('DOMContentLoaded', () => {
let counter = 0;
const h1 = document.querySelector('h1');
h1.addEventListener('click', (event) => { // h1 태그에 click 이벤트가 발생할 때 실행할 함수
counter++;
h1.textContent = `클릭 횟수 : ${counter}`;
// 더 깔끔하게 하고 싶으면 0을 따로 span으로 묶어줘서 span만 따로 빼내면 됨
});
});
</script>
<style>
h1 {
/* 클릭을 여러 번 했을 때 글자가 선택되는 것을 막기 위한 스타일, 드래그가 안됨 */
user-select: none;
cursor: pointer;
}
</style>
</head>
<body>
<h1>클릭 횟수 : 0</h1>
</body>
</html>
