📚 브라우저 이벤트

---

모든 DOM 노드는 이벤트를 만들어 낸다.

💡 이벤트 핸들러

---

이벤트에 반응하려면 이벤트가 발생했을 때 실행되는 함수인 핸들러를 할당해야 한다.

➖ 핸들러 할당 방법

<input value="click!" onclick="alert('click!')" type="button">
<input id="elem" type="button" value="click!">

<script>
	elem.onclick = function() {
    	alert('hello');
    }
</script>

1. HTML 속성
   브라우저는 속성값을 이용해 새로운 함수를 만들고 DOM 프로퍼티에 할당한다.

2. DOM 프로퍼티

📢 onclick 프로퍼티는 단 하나밖에 없기 때문에, 복수의 이벤트 핸들러를 할당할 수 없다. (덮어씌워짐)

📢 setAttribute로 핸들러를 할당할 수 없다. 속성은 항상 문자열이므로, 함수가 문자열이 되어버린다.

➖ this

---

핸들러 내부에 쓰인 this의 값은 핸들러가 할당된 element이다.

<button onclick='alert(this.innerHTML)'>클릭해 주세요.</button>
// 버튼 안의 콘텐츠가 출력된다.

💡 addEventListener

---

HTML 속성과 DOM 프로퍼티를 이용하면 하나의 이벤트에 복수의 핸들러를 할당할 수 없다는 문제가 있다.

핸들러를 관리하는 특별한 메서드인 addEventListener와 removeEventListener를 사용하면 핸들러 여러 개를 할당할 수 있다.