<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ex03DOM+Event</title>
</head>
<body>
<div id = "text1"></div>
<button onclick="addText()">클릭해보기</button>
<script>
// 1. 내가 필요한 태그들이 어떤 것들이 있는가?
let div = document.getElementById('text1')
let btn = document.querySelector('button')
// 2. 버튼을 클릭했을 때(이벤트가 발생했을 때) 처리하기
// 이벤트 추가하는 방법
// - 요소.addEventListener('이벤트종류',함수)
btn.addEventListener('click',function(){
div.innerHTML += '이벤트 발생!<br>'
})
// 객체의 property를 활용해서 추가하는 방법
// btn.onclick = function(){
// div.innerHTML += '이벤트발생!2<br>'
// }
// onclick과 같이 property를 활용해서 추가하는 방법은
// 똑같은 property를 하단에서 다시 새롭게 정의해버리면
// 기존에 있었던 값이 덮어씌워져버린다
// 함수 선언문 사용해서 함수 하나 생성하기
function addText(){
div.innerHTML += '이벤트발생!3<br>'
}
</script>
</body>
</html>
