1. 이벤트란?
2. 폼(form) 이벤트
3. 마우스(mouse) 이벤트
4. 문서 로딩 이벤트
1. 이벤트란?
🔑 브라우저에서의 이벤트란
- 클릭을 하거나
- 양식을 입력하고 제출하거나
- 마우스의 커서를 올리고 내리는 등
특정 동작이 발생했을 때를 의미합니다.
🔑 이벤트 관련 용어
- 이벤트 타겟(target): 이벤트가 일어날 객체를 의미합니다.
- 이벤트 타입(type): 이벤트의 종류를 의미합니다.
- 이벤트 핸들러(handler): 이벤트가 발생했을 때 실행될 코드를 의미합니다.
<input type="checkbox" onmouseover="alert('선택할 수 없습니다.')">
<!--
이벤트 타겟: checkbox
이벤트 타입: onmouseover(마우스 커서를 타겟 위에 올렸을 때)
이벤트 핸들러: alert('선택할 수 없습니다.')
-->아래에서 대표적인 브라우저 이벤트 타입들에 대해서 살펴보겠습니다.
2. 폼(form) 이벤트
🔑 submit : 폼의 정보를 서버로 전송(submit)할 때 발생하는 이벤트 타입입니다.
<body>
<form id="target" action="submit_result.html">
<label for="book">희망도서</label>
<input id="book" type="name">
<input type="submit">
</form>
<script>
let t = document.getElementById('target');
t.addEventListener('submit', function(event){
if(document.getElementById('book').value.length === 0){
alert('희망도서를 입력하세요.');
event.preventDefault(); // 폼의 action이 실행되는 것을 방지
}
});
</script>
</body> -
폼에 희망도서를 기입하여 제출(submit) 버튼을 눌렀을 때,
- 입력된 데이터가 "submit_result.html"로 전송됨 -
폼에 아무것도 기입하지 않고 제출 버튼을 눌렀을 때,
- "희망도서를 입력하세요." 라는 경고창이 뜨면서, 폼의 action이 실행되지 않음
🔑 이외에도 폼 이벤트로는 reset, change, blur, focus 등이 있습니다.
🔑 폼 관련 이벤트는 사용자가 입력한 데이터의 유효성을 파악하는데 주로 활용됩니다.
3. 마우스(mouse) 이벤트
🔑 click(dblclick): 마우스 왼쪽 버튼을 눌렀을 때(더블클릭 했을 때) 발생하는 이벤트 타입입니다.
🔑 contextmenu: 마우스 오른쪽 버튼을 눌렀을 때 발생하는 이벤트 타입입니다.
<body>
<input type="button" id="hider" value="on/off" />
<div id="text">감추기 버튼을 좌클릭하면 문장이 사라지고, 우클릭하면 다시 나타납니다.</div>
<script>
let h = document.getElementById('hider');
h.addEventListener('click', function(event) {
document.getElementById('text').hidden = true;
});
h.addEventListener('contextmenu', function(event) {
document.getElementById('text').hidden = false;
event.preventDefault();
});
</script>🔑 이외에도 마우스 이벤트로는 mousedown/up, mouseover/mouseout, mousemove, wheel 등이 있습니다.
4. 문서 로딩 이벤트
🔑 load: 웹페이지의 모든 요소에 대한 처리가 끝났을 때 발생하는 이벤트 타입입니다.
<script>
window.addEventListener('load', function(event) {
alert("페이지 로딩이 완료되었습니다.")
});
</script>- 웹페이지에 출력될 스타일, 이미지 등의 리소스들이 모두 로드되었을 때 이벤트 핸들러가 실행됩니다.
🔑 이외에도 DOMContentLoaded, beforeunload/unload, error 등이 있습니다.
- 참고자료
- MDN 이벤트 참조, https://developer.mozilla.org/ko/docs/Web/Events
- 생활코딩 이벤트 타입, https://opentutorials.org/course/1375/6764
- 모던 JavaScript 튜토리얼
https://ko.javascript.info/
"작성 내용 중 오류나 오타가 있다면, 댓글로 알려주시면 감사하겠습니다. 주니어 개발자에게 남겨주시는 작은 피드백이 큰 도움이 될 것 같습니다. 고맙습니다 :)"
Obtainment Of The Day