[자바스크립트] Event

• 웹 브라우저나 사용자가 실행하는 어떤 동작
• 사용자가 웹 문서 영역을 벗어나서 클릭하는 행위는 이벤트가 아님 (예시 : 브라우저 창의 제목 표시줄 등)

 

문서 로딩과 관련된 이벤트

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

 

---

마우스와 관련된 이벤트

• 마우스 버튼이나 휠 버튼을 조작할 때 발생하는 이벤트

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

 

---

키보드와 관련된 이벤트

• 키보드에서 특정 키를 조작할 때 발생하는 이벤트

이벤트	설명
keydown	키를 누르는 동안 이벤트가 발생
keypress	키를 눌렀을 때 이벤트가 발생
keyup	키에서 손을 뗄 때 이벤트가 발생

 

---

폼과 관련된 이벤트

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

 

---

이벤트 처리하기

• 이벤트가 발생하면 그에 따른 연결 동작이 있어야 함
• 이렇게 이벤트를 처리하는 것을 이벤트 처리기또는 이벤트 핸들러(event handler)라고 함

 

1. HTML 태그에 연결하기 

• 이벤트가 발생한 HTML 태그에 직접 함수를 연결
• HTML 태그에 스크립트를 함께 사용하는 것이기 때문에, 스크립트 소스에서 함수이름이 바뀌거나 수정이 일어나면 HTML에서도 수정을 해주어야 함 (귀찮!)

<태그 on 이벤트명 = "함수명">
<button onclick = "alert('클릭!')">Click</button>

 

2. 웹 요소에 직접 함수 연결하기

• 스크립트 소스를 변경해도 HTML 마크업에는 영향을 주지 않게 하려면 이벤트 처리기도 스크립트 소스에서 처리하는 것이 좋음

요소.on 이벤트명 = 함수

const button = document.querySelector("button");
button.onclick = function() {
	document.body.style.backgroundColor = "green";
}

// 함수를 미리 만들어 두었다면 그 함수를 지정해도 된다. 
// 이때 실행할 함수 이름 뒤에 중괄호(( ))를 사용하지 않는다.
 function changeBackground() {
 	document.body.style.backgroundColor = "green";
 }
 const button = document.querySelector("button");
 button.onclick = changeBackground;

 

3. addEventListner()사용하기

• 이벤트 리스너는 어떤 DOM 요소에 대해서든 사용할 수 있음
• addEventListener 함수를 사용

요소.addEventListener(이벤트, 함수, 캡처 여부);

• 요소 : 이벤트가 발생한 요소
• 이벤트 : 이벤트 유형. 단, 여기에서는 이벤트 이름 앞에 on을 붙이지 않고 click이나 keypress처럼 이벤트 이름을 그대로 사용
• 함수 : 이벤트가 발생했을 때 실행할 함수. 기존 함수를 사용해도 되고 직접 익명 함수를 작성해도 됨. 익명 함수로 실행할 때는 event 객체를 사용해서 다양한 것들을 처리할 수 있음
• 캡처 여부: 이벤트를 캡처링하는지의 여부(선택 사항이며 기본값은 false) - true : 캡처링 / false : 버블링

function changeBackground() {
	document.body.style.backgroundColor = "green";
}
const button = document.querySelector("button");
button.onclick = changeBackground;

function changeBackground() {
	document.body.style.backgroundColor = "green";
}
const button = document.querySelector("button");
button.addEventListener(“click”, changeBackground);

const button = document.querySelector("button");

// 익명함수 사용
button.addEventListener("click", function() { 
	document.body.style.backgroundColor = "green"; 
)};

const button = document.querySelector("button");
// 화살표 함수 사용
button.addEventListener("click", () => { 
	document.body.style.backgroundColor = "green"; 
)};

 

---

이벤트 객체

• 이벤트가 발생하면 자동으로 만들어지는 객체

 

event 객체의 메서드

메서드	설명
preventDefault	(취소할 수 있을 경우) 기본 동작을 취소함

 

event 객체의 프로퍼티

프로퍼티	설명
altKey	이벨트가 발생했을 때 Alt키를 누르고 있었는지 여부를 확인하고 Boolean 값 반환
button	마우스 키를 반환
charCode	keypress 이벤트가 발생했을 때 어떤 키가 눌렸는지 유니코드 값으로 반환
clientX	이벤트가 발생한 가로 위치를 반환
clientY	이벤트가 발생한 세로 위치를 반환
ctrlKey	이벤트가 발생했을 때 Ctrl키를 누르고 있었는지의 여부를 확인하고 Boolean 값을 반환
pageX	현재 문서를 기준으로 이벤트가 발생한 가로 위치를 반환함
pageY	현재 문서를 기준으로 이벤트가 발생한 세로 위치를 반환함
screenX	현재 화면을 기준으로 이벤트가 발생한 가로 위치를 반환함
screenY	현재 화면을 기준으로 이벤트가 발생한 세로 위치를 반환함
shiftKey	이벤트가 발생했을 때 Shift키를 누르고 있었는지의 여부를 확인하고 Boolean 값을 반환함
target	이벤트가 발생한 대상을 반환함
timeStamp	이벤트가 발생한 시간을 밀리초 단위로 반환함
type	발생한 이벤트 이름을 반환함
which	키보드와 관련된 이벤트가 발생했을 때 키의 유니코드 값을 반환함

 

* page와 client의 차이
- page : 문서 전체 (스크롤 등이 생겨 화면에 다 안나오고 있을 수 있음)
- client : 지금 보이고있는 화면

 

---

이벤트 전파

•  웹 요소에서 이벤트가 발생했을 때 해당 요소에서만 이벤트가 처리되는 것이 아니라 해당 요소를 감싸고 있는 부모 요소, 그리고 그 요소의 부모 요소에서도 똑같이 이벤트가 처리됨
• ‘이벤트 버블링’과 ‘ 이벤트 캡처링’, 두 가지 형태가 있음

 

이벤트 버블링

• 이벤트 발생 요소로부터 부모요소로 → 그리고 그 부모요소로 이벤트 전달
• 모든 브라우저에서 대부분의 이벤트는 버블링됨

 

이벤트 캡처링

• 웹 요소에서 이벤트가 발생하면 일단 최상위 요소에서 시작해서 이벤트가 발생한 요소까지 차례로 이벤트가 전파되는 방식

 

이벤트 전파와 관련된 프로퍼티

• 이벤트가 발생하면 해당 이벤트와 관련된 정보는 event 객체에 담겨짐

프로퍼티	설명
target	이벤트가 처음 발생한 요소
currentTarget	이벤트가 전파된 현재 요소

 

---

이벤트 리스너에서 함수 안에 있는 this

• this는 이벤트가 발생한 노드를 가리킴
• 화살표 함수에서의 this는 최상위 객체인 window를 가리킴

→ 화살표 함수를 사용할 경우 클릭한 요소를 찾을 때 this를 사용할 수 없음
→ 이벤트가 발생한 요소를 this로 사용하려면 function() { } 를 사용함

item.addEventListener("click", function () {  
	this.parentNode.removeChild(this);  
});