자바스크립트 이벤트와 처리기

*제 개인적인 정리이기 때문에 다소 설명이 모호할 수 있습니다.
또한 "html,css,자바스크립트 do it" 책에 내용이 다소 포함되어 있습니다.

이벤트와 이벤트 처리기

버튼을 클릭하거나 선택하는 것을 이벤트, 그 이벤트를 실행시키는 함수를 이벤트 처리기라 한다.
이벤트는 다양한 방법으로 발생되게 된다.

마우스 이벤트

종류	설명
click	사용자가 버튼 요소를 클릭할 때 발생
dbclick	더블클릭할 때 발생
mousedown	사용자가 요소 위에서 마우스 버튼을 눌렀을 때
mousemove	요소 위에서 마우스 포인터를 움직일 때
mouseover	마우스 포인터가 요소 위로 옮겨질 때
mouseout	마우스 포인터가 요서를 내려갈 때
mouseup	마우스 버튼에서 손을 땔 때

 

키보드 이벤트

종류	설명
keydown	키를 누르고 있는 동안
keypress	키를 눌렀을 때
keyup	키에서 손을 땔 때

 

문서 로딩 이벤트

종류	설명
abort	문서가 로딩 전 불러오기를 멈췄을 때
error	정확히 로딩되지 않았을 때
load	로딩이 끝났을 때
resize	화면 크기가 변했을 때
scroll	화면이 스크롤 되었을 때
unload	문서를 나갈 때

 

폼 이벤트

종류	설명
blur	폼 요소에서 포커스를 잃었을 때
change	목록이나 체크 상태가 변했을 때
focus	포커스가 놓였을 때
reset	리셋이 되었을 때
submit	submit버튼을 클릭했을 때

---

이 밖에 다양한 이벤트들이 존재한다.

 

이벤트 처리기

이벤트 처리기는 이벤트가 발생하면 실행하는 함수라고 얘기했다.
이벤트 처리기를 적용하는 방법은 요소에 직접 연결하는 것과 자바스크립트에서 연결하는 방법 두 가지가 있다.

html 태그에 직접 연결

가장 기본적인 방법이자 예전부터 많이 사용하는 방법이다.
<태그 on이벤트명 = "함수명"> 을 사용한다.

<li><a href="#" onclick= "alert('클릭했습니다')"> button</a></li>

이처럼 태그 요소 안에 on이벤트명을 붙여 이벤트가 발생했을 때 실행할 함수를 연결한다.
기본적으로 제공되는 함수도 연결하지만 명령이 많다면 직접 함수를 선언하여 작성할 수 있다.

자바스크립트에서 연결

html 태그에 직접 연결할 경우 간편하지만 크기가 커질 수록 자바스크립트와 html이 섞여 수정하기 어렵다는 단점이 있다. 자바스크립트에서 연결한다면 소스를 분리할 수 있기 때문에 보기 좋아질 수 있다.
기본형 웹 요소.이벤트 명 = 함수; 를 사용한다.


자바스크립트에서는 웹 요소를 가져올 수 있는 방법이 다양하다. 그 중에 querySelector()함수를 이용해 가져오는 것이 쉽다. 괄호 안에는 클래스나 id 이름 또는 여러 선택자를 작성한다.

    <button id="change">button</button>
    <p>글자 색을 바꿔보자</p>
<script>
    var changeBt = document.querySelector(#change);
    changeBt.onclick = changeColor;
        function changeColor() {
    document.querySelector("p").style.color = "#f00" ; 
}</script>

위 소스는 button을 눌렀을 때 changeColor 함수가 실행되어 <p>태그에 글자 색이 변하게 했다.
함수 선언에 방법은 여기서도 적용할 수 있기 때문에
요소를 가져온 값을 변수에 할당할 필요없이 작성할 수 있고,
한 번만 실행한다면 함수를 따로 정의하지 않고 바로 작성 할 수 있다.