[js] 바닐라스크립트에서 이벤트 걸기

이벤트를 받고 함수를 기재할 때마다 jquery를 사용하며 작업을 해왔고 이것이 너무 익숙하다.

때문에 바닐라스크립트 즉, 순수 자바스크립트로 이벤트 거는 법이 궁금해 검색해봤다.

 

 

 

결과물 : 버튼을 클릭하면 알럿창이 뜬다

 

기존의 방식

(jquery 라이브러리를 이용한 코드)

<script src="//code.jquery.com/jquery.min.js"></script>  

<input type="button" id="button1" value="버튼1">



<script>

$("#button1").click(function() {

alert("버튼1을 누르셨습니다.");

});

</script>

 

 

순수 자바스크립트를 이용한 방식

 

<input type="button" id="button1" >

<script>
    function clickE(){
    	alert('버튼 클릭');
    }
    const button = document.getElementById("button1");
    button.addEventListener("click", clickE);
</script>

 

이런 작은 테스트에선 별 차이가 없지만 큰 규모로 갈수록, 코드가 쌓이고 쌓이면

많은 성능 차이가 발생하게 된다고 한다.

작은 코드부터 습관을 바꿔보도록 하자.