[Javascript]DOM Script 이벤트와 선택자

이벤트

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>