제이쿼리(jQuery)와 자바스크립트(Vanilla JS) 이벤트 핸들링 차이

 

HTML 태그에 이벤트를 직접 명시해두지 않고 깔끔하게 함수로 분리하기 위해

같은 코드를 제이쿼리(jQuery)와 바닐라 자바스크립트(Vanilla JavaScript)로 작성해 보았다

아래 두 코드의 의미는 동일하다

 

제이쿼리 (jQuery) 코드

$('#home').on('click', clickHome);
$('#seoul').on('click', clickSeoul);
$('#tokyo').on('click', clickTokyo);
$('#paris').on('click', clickParis);
$('#photo').on('mouseenter', mouseEnterPhoto);

$('#photo').attr('src', 'images/home.png');
$('#home').css('font-weight', 'bold');

 

순수 자바스크립트 (Vanilla JavaScript) 코드

document.getElementById('home').addEventListener('click', clickHome);
document.getElementById('seoul').addEventListener('click', clickSeoul);
document.getElementById('tokyo').addEventListener('click', clickTokyo);
document.getElementById('paris').addEventListener('click', clickParis);
document.getElementById('photo').addEventListener('mouseenter', mouseEnterPhoto);

document.getElementById('photo').src = 'images/Home.png';
document.getElementById('home').style.fontWeight = 'bold';