이벤트
HTML DOM에서 지원하는 스크립트 이벤트 종류는 웹 페이지에서 다양한 사용자 상호작용과 브라우저 동작을 처리하기 위해 사용됩니다. 주요 이벤트는 다음과 같은 그룹으로 나눌 수 있습니다.
1. 마우스 이벤트
- onclick: 요소를 클릭했을 때 발생
- ondblclick: 요소를 더블 클릭했을 때 발생
- onmousedown: 마우스 버튼을 눌렀을 때 발생
- onmouseup: 마우스 버튼을 뗐을 때 발생
- onmousemove: 마우스가 요소 위에서 움직일 때 발생
- onmouseover: 마우스가 요소 위로 들어갈 때 발생
- onmouseout: 마우스가 요소를 벗어날 때 발생
- onmouseenter: 마우스가 요소 위로 들어갈 때 (버블링 없음)
- onmouseleave: 마우스가 요소를 벗어날 때 (버블링 없음)
<button id="myButton">Click me!</button>
<script>
const button = document.getElementById('myButton');
button.onclick = function () {
alert('Button was clicked!');
};
</script>2. 키보드 이벤트
- onkeydown: 키를 눌렀을 때 발생
- onkeypress: 키를 눌렀을 때 (현재는 onkeydown으로 대체되는 추세)
- onkeyup: 키를 뗐을 때 발생
<input type="text" id="textInput" placeholder="Type something" />
<script>
const input = document.getElementById('textInput');
input.onkeydown = function (event) {
console.log(`Key down: ${event.key}`);
};
input.onkeyup = function (event) {
console.log(`Key up: ${event.key}`);
};
</script>3. 포커스 및 폼 이벤트
- onfocus: 요소가 포커스를 받을 때 발생
- onblur: 요소가 포커스를 잃을 때 발생
- onchange: 입력 요소의 값이 변경되고 포커스를 잃었을 때 발생
- oninput: 사용자가 입력을 할 때마다 발생
- onsubmit: 폼을 제출할 때 발생
- onreset: 폼이 리셋될 때 발생
- onselect: 텍스트가 선택되었을 때 발생
<form id="myForm">
<input type="text" placeholder="Enter your name" required />
<button type="submit">Submit</button>
</form>
<script>
const form = document.getElementById('myForm');
form.onsubmit = function (event) {
event.preventDefault(); // 기본 동작(페이지 새로고침)을 막음
alert('Form submitted!');
};
</script>
4. 드래그 & 드롭 이벤트
- ondrag: 요소가 드래그될 때 발생
- ondragstart: 드래그가 시작될 때 발생
- ondragend: 드래그가 끝났을 때 발생
- ondragover: 드래그된 요소가 다른 요소 위에 있을 때 발생
- ondragenter: 드래그된 요소가 특정 요소에 들어갈 때 발생
- ondragleave: 드래그된 요소가 특정 요소를 벗어날 때 발생
- ondrop: 드래그된 요소가 드롭될 때 발생
<div id="dragBox" draggable="true" style="width: 100px; height: 100px; background-color: coral;">
Drag me
</div>
<div id="dropZone" style="width: 200px; height: 100px; background-color: lightgrey; margin-top: 20px;">
Drop here
</div>
<script>
const dragBox = document.getElementById('dragBox');
const dropZone = document.getElementById('dropZone');
dragBox.ondragstart = function () {
console.log('Dragging started');
};
dropZone.ondragover = function (event) {
event.preventDefault(); // 드롭을 허용
dropZone.style.backgroundColor = 'lightgreen';
};
dropZone.ondrop = function () {
dropZone.style.backgroundColor = 'lightgrey';
dropZone.textContent = 'Dropped!';
};
</script>5. 클립보드 이벤트
- oncopy: 사용자가 콘텐츠를 복사할 때 발생
- oncut: 사용자가 콘텐츠를 잘라낼 때 발생
- onpaste: 사용자가 콘텐츠를 붙여넣을 때 발생
<div>
<textarea id="clipboardArea" placeholder="Try copying, cutting, or pasting here"></textarea>
</div>
<script>
const textArea = document.getElementById('clipboardArea');
// 복사 이벤트
textArea.addEventListener('copy', (event) => {
alert('Text copied!');
console.log('Copied text:', window.getSelection().toString());
});
// 잘라내기 이벤트
textArea.addEventListener('cut', (event) => {
alert('Text cut!');
console.log('Cut text:', window.getSelection().toString());
});
// 붙여넣기 이벤트
textArea.addEventListener('paste', (event) => {
alert('Text pasted!');
const pastedData = event.clipboardData.getData('text');
console.log('Pasted text:', pastedData);
});
</script>6. 미디어 이벤트
- onplay: 미디어가 재생을 시작했을 때 발생
- onpause: 미디어가 일시 정지되었을 때 발생
- onended: 미디어 재생이 끝났을 때 발생
- onvolumechange: 볼륨이 변경될 때 발생
- onseeked: 사용자가 특정 위치로 이동한 후 발생
- onwaiting: 미디어가 다음 데이터를 기다리는 중일 때 발생
<audio id="audioPlayer" controls>
<source src="example.mp3" type="audio/mpeg" />
Your browser does not support the audio element.
</audio>
<div id="mediaStatus">Status: Paused</div>
<script>
const audio = document.getElementById('audioPlayer');
const status = document.getElementById('mediaStatus');
// 재생 이벤트
audio.addEventListener('play', () => {
status.textContent = 'Status: Playing';
console.log('Audio is playing');
});
// 일시 정지 이벤트
audio.addEventListener('pause', () => {
status.textContent = 'Status: Paused';
console.log('Audio is paused');
});
// 종료 이벤트
audio.addEventListener('ended', () => {
status.textContent = 'Status: Ended';
console.log('Audio playback ended');
});
// 볼륨 변경 이벤트
audio.addEventListener('volumechange', () => {
console.log('Volume changed:', audio.volume);
});
</script>7. 윈도우 이벤트
- onload: 페이지가 로드되었을 때 발생
- onunload: 페이지가 언로드될 때 발생
- onresize: 윈도우 크기가 변경되었을 때 발생
- onscroll: 사용자가 스크롤했을 때 발생
- onerror: 에러가 발생했을 때 발생
<script>
// 윈도우 크기변경
window.addEventListener('resize', () => {
console.log(`Window size: ${window.innerWidth}x${window.innerHeight}`);
});
</script>
<div style="height: 2000px; padding: 10px;">
Scroll the page to see the event in action!
</div>
<script>
// 페이지 스크롤
window.addEventListener('scroll', () => {
console.log('Page scrolled! Scroll position:', window.scrollY);
});
</script>
<script>
// 페이지 로드
window.addEventListener('load', () => {
console.log('Page fully loaded!');
});
</script>8. 터치 이벤트 (모바일 전용)
- ontouchstart: 화면을 터치했을 때 발생
- ontouchmove: 터치한 상태로 움직일 때 발생
- ontouchend: 터치가 끝났을 때 발생
- ontouchcancel: 터치가 취소되었을 때 발생
<div id="touchBox" style="width: 200px; height: 200px; background-color: lightblue; text-align: center; line-height: 200px;">
Touch me!
</div>
<script>
const touchBox = document.getElementById('touchBox');
// 터치 시작 이벤트
touchBox.addEventListener('touchstart', (event) => {
console.log('Touch started');
touchBox.style.backgroundColor = 'lightgreen';
});
// 터치 이동 이벤트
touchBox.addEventListener('touchmove', (event) => {
console.log('Touch moving at:', event.touches[0].clientX, event.touches[0].clientY);
});
// 터치 종료 이벤트
touchBox.addEventListener('touchend', () => {
console.log('Touch ended');
touchBox.style.backgroundColor = 'lightblue';
});
// 터치 취소 이벤트
touchBox.addEventListener('touchcancel', () => {
console.log('Touch canceled');
touchBox.style.backgroundColor = 'red';
});
</script>9. 기타 이벤트
- onwheel: 마우스 휠을 굴렸을 때 발생
- oncontextmenu: 우클릭 메뉴가 열릴 때 발생
- onprogress: 파일 다운로드나 업로드 진행 상황이 업데이트될 때 발생
<div id="scrollableDiv" style="width: 300px; height: 300px; overflow: auto; border: 1px solid black;">
<div style="height: 1000px; padding: 10px;">
Scroll inside this box using your mouse wheel.
</div>
</div>
<p id="scrollInfo">Scroll direction: </p>
<script>
const scrollableDiv = document.getElementById('scrollableDiv');
const scrollInfo = document.getElementById('scrollInfo');
scrollableDiv.addEventListener('wheel', (event) => {
event.preventDefault();
const direction = event.deltaY > 0 ? 'down' : 'up';
scrollInfo.textContent = `Scroll direction: ${direction}`;
console.log(`Mouse wheel moved: ${event.deltaY}`);
});
</script>
선택자
**선택자(Selectors)**는 HTML 문서 내의 특정 요소를 찾고 조작하기 위해 사용됩니다. JavaScript에서 DOM 요소를 선택하는 방법은 여러 가지가 있으며, 이를 통해 동적으로 페이지를 제어할 수 있습니다.
1. ID 선택자
- 특정 ID를 가진 요소를 선택할 때 사용합니다.
- 메서드: document.getElementById()
const element = document.getElementById('myId');
console.log(element);
2. 클래스 선택자
- 특정 클래스를 가진 요소를 선택합니다.
- 메서드: document.getElementsByClassName()
- 특징: HTMLCollection(유사 배열)로 반환됩니다.
const elements = document.getElementsByClassName('myClass');
console.log(elements); // HTMLCollection
3. 태그 이름 선택자
- 특정 태그 이름을 가진 요소를 선택합니다.
- 메서드: document.getElementsByTagName()
- 특징: HTMLCollection으로 반환됩니다.
const elements = document.getElementsByTagName('p');
console.log(elements); // 모든 <p> 요소
4. CSS 선택자
- CSS 스타일과 동일한 방식으로 요소를 선택합니다.
- 메서드:
- 단일 요소 선택: document.querySelector()
- 여러 요소 선택: document.querySelectorAll()
- 특징:
- querySelector: 첫 번째로 매칭되는 요소를 반환
- querySelectorAll: NodeList(유사 배열)로 반환
// 단일 요소 선택
const singleElement = document.querySelector('.myClass');
console.log(singleElement);
// 여러 요소 선택
const allElements = document.querySelectorAll('.myClass');
console.log(allElements); // NodeList
5. 이름 속성 선택자
- name 속성을 가진 요소를 선택합니다.
- 메서드: document.getElementsByName()
const elements = document.getElementsByName('username');
console.log(elements); // 모든 name="username" 요소
6. 복합 선택자
- 여러 선택자를 조합하여 요소를 선택합니다.
- CSS 선택자와 유사하게 작동:
- 자식 요소 선택: parent > child
- 후손 요소 선택: ancestor descendant
- 클래스 및 ID 조합: #id.class
// 특정 ID의 자식 요소 선택
const child = document.querySelector('#parent > .child');
console.log(child);
// 여러 조건을 가진 요소 선택
const special = document.querySelectorAll('.class1.class2');
console.log(special);
7. 속성 선택자
- 특정 속성을 가진 요소를 선택합니다.
- CSS 속성 선택자와 동일:
- [attribute]: 속성을 가진 요소
- [attribute="value"]: 특정 값을 가진 속성
- [attribute^="value"]: 특정 값으로 시작하는 속성
- [attribute$="value"]: 특정 값으로 끝나는 속성
// 'data-test' 속성을 가진 요소 선택
const elements = document.querySelectorAll('[data-test]');
console.log(elements);
// 'href' 속성이 'https'로 시작하는 요소 선택
const links = document.querySelectorAll('a[href^="https"]');
console.log(links);
8. 전체 문서 선택
- HTML 문서 전체를 선택하거나 특별한 경우 루트 요소를 선택합니다.
- 메서드:
- document.documentElement: <html> 요소를 반환
- document.body: <body> 요소를 반환
console.log(document.documentElement); // <html>
console.log(document.body); // <body>
728x90
