[JavaScript] 이벤트와 이벤트 처리기

신입 개발자가 되기 위해 공부했던 독학 자료들/JavaScript&jQuery

[JavaScript] 이벤트와 이벤트 처리기

Seojoo21 2022. 2. 22. 10:25

*출처: Do it! 한권으로 끝내는 웹 기본 교과서 HTML+CSS+자바스크립트 웹 표준의 정석, 고경희, 이지스퍼블리싱

- 대부분의 함수는 사용자가 화면에서 버튼을 클릭하거나 항목을 선택했을 때 실행된다. 이처럼 버튼을 클릭하거나 항목을 선택하는 것을 '이벤트'라고 한다. 그리고 이벤트가 발생했을 때 실행하는 함수를 '이벤트 처리기'라고 한다.

1. 자바스크립트의 주요 이벤트

http://developer.mozilla.org/en-US/docs/Web/Events

Event reference | MDN

Events are fired to notify code of "interesting changes" that may affect code execution. These can arise from user interactions such as using a mouse or resizing a window, changes in the state of the underlying environment (e.g. low battery or media events

developer.mozilla.org

1) 마우스 이벤트

종류	설명
click	사용자가 HTML 요소를 클릭할 때 이벤트가 발생한다.
dbclick	사용자가 HTML 요소를 더블클릭할 때 이벤트가 발생한다.
mousedown	사용자가 요소 위에서 마우스 버튼을 눌렀을 때 이벤트가 발생한다.
mousemove	사용자가 요소 위에서 마우스 포인터를 움직일 때 이벤트가 발생한다.
mouseover	마우스 포인터가 요소 위로 옮겨질 때 이벤트가 발생한다.
mouseout	마우스 포인터가 요소를 벗어날 때 이벤트가 발생한다.
mouseup	사용자가 요소 위에 놓인 마우스 버튼에서 손을 뗄 때 이벤트가 발생한다.

2) 키보드 이벤트

종류	설명
keydown	사용자가 키를 누르는 동안 이벤트가 발생한다.
keypress	사용자가 키를 눌렀을 때 이벤트가 발생한다.
keyup	사용자가 키에서 손을 뗄 때 이벤트가 발생한다.

3) 문서 로딩 이벤트

종류	설명
abort	문서가 완전히 로딩되기 전에 불러오기를 멈췄을 때 이벤트가 발생한다.
error	문서가 정확히 로딩되지 않았을 때 이벤트가 발생한다.
load	문서 로딩이 끝나면 이벤트가 발생한다.
resize	문서 화면 크기가 바뀌었을 때 이벤트가 발생한다.
scroll	문서 화면이 스크롤되었을 때 이벤트가 발생한다.
unload	문서에서 벗어날 때 이벤트가 발생한다.

4) 폼 이벤트

- 폼은 로그인, 검색, 게시판, 설문 조사처럼 사용자가 입력하는 모든 요소를 가리킨다. 아래 표는 폼 요소에 내용을 입력하면서 발생하는 이벤트이다.

종류	설명
blur	폼 요소에 포커스를 잃었을 때 이벤트가 발생한다.
change	목록이나 체크 상태 등이 변경되면 이벤트가 발생한다. <input>, <select>, <textarea> 태그에서 사용한다.
focus	폼 요소에 포커스가 놓였을 때 이벤트가 발생한다. <label>, <select>, <textarea>, <button> 태그에서 사용한다.
reset	폼이 리셋되었을 때 이벤트가 발생한다.
submit	submit 버튼을 클릭했을 때 이벤트가 발생한다.

2. 이벤트 처리기 알아보기

1) 이벤트 처리기의 기본 형식

- HTML 태그안에서 'on' 다음에 '이벤트명'을 붙여서 속성 이름을 만들고, 그 다음에 실행할 이벤트 처리기의 함수명을 작성한다.

<태그 on이벤트명 = "함수명">

- 예를 들어 마우스로 클릭했을 때의 이벤트 이름은 click이다. <a> 태그 안에 onclick 속성을 만들고 실행할 함수를 연결한다.

..
<body>
	<ul>
		<li><a href="#" onclick="alert('버튼을 클릭했습니다.')">Green</a></li>
		<li><a href="#" onclick="alert('버튼을 클릭했습니다.')">Orange</a></li>
		<li><a href="#" onclick="alert('버튼을 클릭했습니다.')">Purple</a></li>
	</ul>

- 이벤트가 발생한 후에 여러 가지 명령을 실행해야 한다면, 그 명령을 묶어서 하나의 자바스크립트 함수로 만드는 것이 좋다. 그리고 이벤트가 발생할 때 함수 이름과 인수를 지정하여 실행한다.

- 다음은 웹 요소의 배경색을 바꾸는 changeBg(color) 함수를 미리 만들어서 실행하는 예제이다. 항목을 클릭할 때마다 green 이나 orange, purple의 색상값을 인수로 넘겨서 changeBg(color) 함수를 실행한다.

..
<body>
	<ul>
	  <li><a href="#" onclick="changeBg('Green')">Green</a></li>
	  <li><a href="#" onclick="changeBg('Orange')"">Orange</a></li>
	  <li><a href="#" onclick="changeBg('Purple')">Purple</a></li>
	</ul>		
	<div id="result"></div>
</body>

<script>
    function changeBg(color){
        var result = document.querySelector('#result');
        result.style.backgroundColor = color;
}
</script>

3. DOM을 이용한 이벤트 처리기

- 위의 2번에서 살펴본 것처럼 HTML 요소에 이벤트 처리기를 지정하면 태그 속성과 자바스크립트 소스가 섞인다. 그래서 자바스크립트를 수정하려면 HTML의 태그와 속성을 하나씩 찾아봐야한다.

- 하지만 DOM(문서 객체 모델)을 이용하여 이벤트 처리기를 지정하면 태그와 자바스크립트 소스를 분리해서 보기 좋게 사용할 수 있다.

- 예를 들어 웹 요소를 클릭했을 때 실행할 함수를 연결하려면 다음과 같은 기본 형식으로 사용한다.

웹 요소.onclick = 함수;

- 자바스크립트에서는 웹 요소를 여러 방법으로 가져올 수 있는데 그중에서 함수 querySelector() 를 사용하여 가져오는 것이 쉽다.

- querySelector()의 괄호 안에는 클래스 이름이나 id 이름 또는 다양한 선택자를 넣을 수 있다.

- 다음은 id="change"인 버튼을 클릭했을 때 글자색을 바꾸는 예제이다. querySelector()를 사용해 버튼 요소를 가져오고 변수 changeBttn에 저장한다. 그리고 changeBttn에 onclick을 사용해 changeColor() 함수를 연결한다. 이때 주의할 점은 함수의 이름만 사용하고 괄호는 붙이지 않아야 한다는 것이다.

<body>
	<button id="change">글자색 바꾸기</button>	
	<p>내용</p>
	
	<script>
         // 방법 1 : 웹 요소를 변수로 지정 & 미리 만든 함수 사용
        var changeBttn = document.querySelector('#change'); 
        // querySelector의 괄호 () 안에 들어간 '#change'가 작동할 버튼의 id값이다.
        changeBttn.onclick = changeColor; // 함수 이름 뒤에 괄호()가 없다. 

        function changeColor() {
            document.querySelector("p").style.color = "#f00";
        }

	</script>
</body>

- 위의 스크립트 코드는 조금 다르게 표현할 수도 이다. 웹 요소를 프로그램 안에서 여러번 사용하지 않는다면 다음과 같이 변수에 할당하지 않고 직접 사용해도 된다.

<body>
	<button id="change">글자색 바꾸기</button>	
	<p>내용</p>
	
	<script>
         // 방법 2 : 웹 요소를 따로 변수로 만들지 않고 사용
        document.querySelector('#change').onclick = changeColor; // 함수 이름 뒤에 괄호()가 없다. 

        function changeColor() {
            document.querySelector("p").style.color = "#f00";
        }

	</script>
</body>

- 또는 함수를 딱 한번만 사용한다면 위 코드에서 changeColor라는 함수 이름이 들어갔던 자리에 직접 함수를 선언해도 된다.

<body>
	<button id="change">글자색 바꾸기</button>	
	<p>내용</p>
	
	<script>
         // 방법 3 : 함수를 직접 선언 
        document.querySelector('#change').onclick =  function() {
            document.querySelector("p").style.color = "#f00";
        }
	</script>
</body>