1/25 실강 - DOM, Event

document.querySelector('ol>li:nth-child(2)>a');
이렇게하면 ol 밑에 2번째 li 밑에 있는 a 태그를 선택 할 수 있음

• Event

• inline 방식

<input type = "button" value = "hi" onclick = "alert(event.target.value);
                                               alert(this.value);"> // 둘 다 똑같이 동작
// event라는 약속된 이름의 변수를 통해서 event가 실행되는 맥락을 가져올 수 있음.
// event객체에서 target이라고 하면 배치되어있는 태그의 엘리먼트 오브젝트
// 그것의 value값을 가져옴

//아니면
alert(document.querySelector("input").value)

• addEventListener

<input type = "button" id = "addEvent" value = "addEventListener">
<script>
	function clickHandler(evt){
  	alert(evt.target.value);
  }
  	document.querySelector('#addEvent').addEventListener('click', clickHandler);
</script>
//이벤트가 발생했을 때 어떤 일이 처리되어야 하는가를 핸들링 하는 함수를 이벤트 핸들러라고 함
//여기서 addEventListener는 이벤트 핸들러가 click일 때 동작하도록 이 태그에 add 시켜주는 메서드