생활코딩 javascript 정리 - jQuery 이벤트 vs 자바스크립트 이벤트

40. jQuery 이벤트 vs 자바스크립트 이벤트

jQuery는 이벤트와 관련해서 편리한 기능을 제공한다.  아래 예제는 직접 이벤트 프로그래밍을 하는 것과 jQuery를 이용하는 것의 차이점을 보여준다. (실행)

<input type="button" id="pure" value="pure"/>

<input type="button" id="jquery" value="jQuery" />

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

<script>

    // 순수하게 구현했을 때

    var target = document.getElementById('pure');

    if(target.addEventListener){

        target.addEventListener('click', function(event){

            alert('pure');

        });

    } else {

        target.attachEvent('onclick', function(event){

            alert('pure');

        });

    }

 

    // jQuery를 사용했을 때

    $('#jquery').on('click', function(event){

        alert('jQuery');

    })

</script>

코드 분량에 큰차이가 있다. jQuery는 크로스 브라우징을 알아서 처리해주고, 이벤트를 보다 적은 코드로 구현할 수 있도록 해준다. 이런 이유 때문에 jQuery와 같은 라이브러리를 사용하는 것이다. 

출처  : https://opentutorials.org/course/1375/6862