바닐라스크립트에서 이벤트리스너 (addEventListener)

애초에 자바스크립트는 html css를 조작목적 보다는 

이벤트를 받으려고 만들어졌다. 

실제로 많은 사람들이 

이벤트를 받으려면 JQuery를 사용해야하고 

이벤트리스너 자체를 JQuery와 함께 배우다 보니 

순수 자바스크립트로는 기능구현을 못한다는 생각들을 많이한다. 

하지만 바닐라스크립트 즉 아무런 라이브러리를 사용하지 

않고도 이벤트리스너를 만들수 있다.

이벤트 종류는 

(click, resize, submit, inputchange, load)등이 있다

자바스크립트에선 이런것들을 JQuery를 사용하지 않아도 

이벤트리스너를 만들수 있다. 

ex) 버튼1 JQuery를 사용한 이벤트 리스너

<script src="//code.jquery.com/jquery.min.js"></script>  
<input type="button" id="button1" value="버튼1">

<script>
$("#button1").click(function() {
alert("버튼1을 누르셨습니다.");
});
</script>

ex) 버튼2 순수 자바스크립트를 이용한 이벤트 리스너(addEventListener)

<input type="button" id="button2" value="버튼2">

<script>
function clickEvent() {
alert("버튼2을 누르셨습니다.");
}

const button = document.getElementById("button2");
button.addEventListener("click", clickEvent);
</script>

코드가 실제로 JQuery를 사용하는것보다 조금더 길어지긴 했으나 

실제 성능차이는 많이 난다고 한다. 

물론 이런 작은규모 수준에서는 아니지만 

추후 각종 이벤트들로 스크립트파일 하나가 몇천줄이되는 순간 

많은 성능차이가 발생하게 될것이다. 

추가로 document.get~를하면 JQuery와 같이 다양한 방법으로 타겟을

잡을수 있다.