[이벤트] 1. 이벤트

1. 이벤트

 

이벤트 개요

- 이벤트(Event) : 마우스 클릭, 키보드 입력, 이미지나 HTML 문서의 로딩, 타임 아웃 등 사용자의 입력 행위, 문서나 브라우저의 상태 변화를 브라우저가 자바스크립트 코드에게 알리는 통지

- 이벤트 리스너(Event Listener) : 발생한 이벤트에 적절히 대처하기 위해 작성된 자바스크립트 코드

 

이벤트 종류

HTML5 표준 이벤트는 70개 남짓하다

이벤트 리스너의 이름은 이벤트 이름 앞에 on 을 붙인다. ex) mousedown 이벤트의 리스너는 onmousedown

이벤트 리스너	이벤트가 발생하는 경우
onkeydown	사용자가 아무 키가 누르는 순간
onkeyup	사용자가 누른 키를 놓는 순간
ondbclick	객체에 더블 클릭될 때
onclick	사용자가 객체에 클릭할 때
oncontextmenu	객체에 오른쪽 마우스가 클릭될 때, 컨텍스트 메뉴를 출력하고자 할 때
onmousedown	객체에 마우스 버튼이 눌러지는 순간
onmouseenter	마우스 커서가 객체 영역 안으로 들어가는 순간
onmouseleave	마우스 커서가 객체 영역에서 벗어나는 순간
onmousemove	객체 위에서 마우스가 움직이는 동안 계속 발생
onmouseover	마우스 커서가 객체 영역(자식들도 포함) 안으로 들어가는 순간
onmouseout	마우스 커서가 객체 영역(자식들도 포함)에서 벗어나는 순간
onwheel	마우스 휠을 굴리는 매 순간
onabort	이미지나 문서 로딩이 중단된 경우
onerror	문서나 이미지, 리소스 로딩 시 오류가 발생할 때
onload	문서나 이미지의 로딩이 완료된 직 후
onresize	윈도우,프레임 혹은 객체의 크기가 변경될 때
onfocus	객체가 포커스를 가지게 되었을 때
onblur	객체가 포커스를 잃을 때
onchange	<input> <keygen> <select> <textarea> 의 텍스트나 선택된 내용, 체크 상태 등이 변할 때
onreset	사용자가 폼의 reset 버튼을 누르거나 자바스크립트 코드로 폼을 리셋시켰을 때, 폼의 모든 요소들이 초기 상태로 리셋될 때
onsearch	<input type ="search">에 검색 텍스트를 입력하고 <enter>키를 누를 때
onselect	<textarea>나 <input type = "text|password">에 입력된 텍스트를 사용자가 선택할 때 (예를 들어 마우스로 긁어 선택하는 경우)
onsubmit	사용자가 submit 버튼을 클릭하여 폼을 전송할 때, 자바스크립트 코드로 form 객체의 submit() 메소드를 호출할 때는 이벤트 발생 않음

 

이벤트 리스너 만들기

<자바스크립트 코드로 이벤트 리스너를 작성하는 방법 3가지>

1) HTML 태그 내에 작성

- 리스너 코드가 짧은 경우 적합함

<p onmouseover="this.style.backgroundColor='orchid'"
	onmouseout="this.style.backgroundColor='white'">마우스 올리면 orchid 색으로 변경
</p>

2) DOM 객체의 이벤트 리스너 프로퍼티에 작성

- 다음과 같이 <p> 태그가 있다고 하자,

<p id="p">마우스 올리면 orchid 색으로 변경</p>

 

- 함수 over()를 다음과 같이 작성하고,

function over(){
 	...
}

- over() 함수를 객체 p의 onmouseover 리스너로 등록한다.

const p = document.getElementById("p");
p.onmouseover = over; //p.onmouseover=over();는 잘못된 코드!!!

★★★ 이 때 주의할 점은, 함수의 이름만 등록한다는 것이다. ()를 쓰지 않도록 주의한다.

 

3) DOM 객체의 addEventListener() 메소드 이용

p.addEventListener("mouseover",over);
					//on없이 이벤트 이름만 사용, over라는 함수 등록

- addEventListener()를 사용하여 함수 over()를 객체 p의 onmouseover 리스너로 등록하는 코드

- 다른 방법과 달리 addEventListener()를 사용하면 등록한 리스너를 removeEventListener()를 이용하여 제거할 수 있음

- 동일한 이벤트 리스너에 여러 함수를 중복하여 등록할 수 있다.

 

 

***2,3번과 같은 경우 코드가 짧거나 한 곳에서만 사용하는 경우 익명함수를 이용하여 코드를 한 번에 작성할 수 있다

p.onmouseover = function() {
				this.style.backgroundColor = "orchid";
                };

p.addEventListener("mouseover", function(){
								this.style.backgroundColor = "orchid";
                                });