Javascript Event - Codeit(Javascript로 배우는 '인터랙티브 웹')

Event (이벤트)

HTML 요소들에게 일어날 수 있는 일들

사용자가 요소를 클릭한다

마우스가 요소 위로 올라온다.

마우스가 요소 밖으로 나간다.

페이지 로딩이 끝난다.

사용자가 키보드를 누른다. 

 

이런 이벤트가 일어났을 때 어떤 동작들이 일어나도록 할 수 있는데, 이런 동작을 가능하게 하는 것이 Event Handling 이다. 

 

 

 

사용예시1

 

 

 

사용예시2

 

 

 

HTML 부분에는 Javascript 코드를 최대한 적게 넣어야 코드가 깔끔해보인다. 

사용예시의 코드들을 아래처럼 작성하면 좀 더 깔끔해보인다.

 

 

 

 

 

jQuery vs 순수 자바스크립트

이벤트를 등록하는 jQuery 코드의 예시는 아래와 같다.

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

만약 위 코드를 순수 자바스크립트 (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);

 

 

키보드 이벤트

 

 

jquery의 파라미터가 document 이면 페이지 전체를 의미한다. 

즉, 위 코드는 해당 페이지에서 키보드를 누르면 processKeyEvent 함수를 실행한다.

 

 

key에는 어떤 키를 눌렀는지에 대한 정보가 들어가는데, 이를 활용하여 어떤 키를 누르냐에 따라 각기 다른 함수를 호출할 수 있다.