Vanilla JS 기초 연습 - 버튼 클릭하면 alert 띄우기

 

다음의 jQuery 예시를 Vanilla JS로 변경해 보자

<button id="btn1">클릭하세요!</button>
<script>
	$('#btn1').click(function(){
    	alert("안녕하세요!");
    });
</script>

 

 

 

---

 

 

Vanilla JS - 버튼 클릭하면 alert 띄우기

<button id="btn1">클릭하세요!</button>
<script>
 	document.querySelector("#btn1").addEventListener("click", function(){alert("안녕하세요!");})
</script>

 

 

 

- Document.querySeector() - 제공한 선택자 또는 선택자 뭉치와 일치하는 문서 내 첫 번째 Element를 반환, 일치하는 요소가 없으면 null을 반환

document.querySelector(selectors);

 

※선택자를 만족하는 모든 요소의 목록이 필요하다면 querySelectorAll()을 대신 사용한다.

 

 

- EventTarget,addEventListener() - 지정한 유형의 이벤트를 대상이 수신할 때마다 호출할 함수를 설정한다.

addEventListener(type, listener);
addEventListener(type, listener, options);
addEventListener(type, listener, useCapture);

 

 

 

 

참조 : mdn web docs