02-7. Event Programming

이벤트 프로그래밍

이벤트 프로그래밍은 애플리케이션이 특정 이벤트가 발생했을 때 그에 대한 반응을 처리하는 방식입니다.

이벤트 종류

1. 브라우저 이벤트: 브라우저 자체에서 발생하는 이벤트입니다.
2. 사용자 이벤트: 사용자가 키보드나 마우스를 통해 발생시키는 이벤트로, 세 가지로 나눌 수 있습니다:
   • 마우스 이벤트: 클릭, 더블 클릭, 마우스 이동 등
   • 키 이벤트: 키보드 입력 관련 이벤트
   • HTML FORM 관련 이벤트: 폼 제출 등

이벤트 프로그래밍 구조

이벤트 프로그래밍에서 중요한 요소는 이벤트 소스, 이벤트 핸들러, 그리고 이 둘을 연결하는 리스너입니다.

• 이벤트 소스: 이벤트가 발생하는 객체 (예: 버튼)
• 이벤트 핸들러: 이벤트가 발생했을 때 실행할 코드
• 리스너: 이벤트 소스와 이벤트 핸들러를 연결하는 방법

이벤트 등록 방법

1) addEventListener() 사용: 자바스크립트에서 이벤트를 등록하는 기본적인 방법입니다.

window.addEventListener('load', () => {

  console.log('html 문서 로딩이 완료.. ')

})

 

2) DOM 노드에서 직접 등록: HTML 태그에 직접 이벤트 핸들러를 설정하는 방식입니다.

 

  <button onclick="myEventHandler()">button3</button>

 

 

3) onXXX 방식: 자바스크립트에서 이벤트를 "onXXX" 형식으로 등록합니다. 예를 들어, 클릭 이벤트는 onclick, 브라우저 로딩 이벤트는 onload를 사용합니다.

 

window.onload = () => {

  console.log('html 문서 로딩이 완료... 2')

}

이 세 가지 방법 중에서 상황에 맞는 방법을 선택하여 이벤트를 처리할 수 있습니다.

 

//addEventListener 메서드를 사용

let button1Node = document.getElementById('button1')

button1Node.addEventListener('click', () => {

  console.log('button 1 click')

})

//onclick 속성을 사용

let button2Node = document.getElementById('button2')

button2Node.onclick = () => {

  console.log('button 2 click')

}

=> 사용자가 'button1'을 클릭하면 "button 1 click"이, 'button2'를 클릭하면 "button 2 click"이 콘솔에 출력됩니다.

 

---

마우스 이벤트

모든 마우스 이벤트에는 MouseEvent 객체가 전달되며, 이를 통해 이벤트가 발생한 위치의 좌표를 얻을 수 있습니다.

• offsetX, offsetY: 이벤트가 발생한 DOM 노드 내에서의 좌표를 나타냅니다.
• pageX, pageY: 브라우저 창 기준에서의 좌표를 나타냅니다.

마우스 이벤트 종류

• mouseenter, mouseleave: 해당 DOM 노드에서만 이벤트 처리가 가능하며, 버블링이 발생하지 않습니다. 즉, 이벤트가 상위 노드로 전달되지 않습니다.
• mouseover, mouseout: 버블링이 발생하여 이벤트가 상위 노드로도 전파됩니다.

 

window.addEventListener('load', () => {

  //click, dblclick, down, up................

  let button = document.getElementById('button')//

//HTML 문서에서 ID가 button인 요소를 가져와 button 변수에 저장

  button.addEventListener('click', () => {//클릭

    console.log('mouse click')

  })

  button.addEventListener('dblclick', () => {//버튼이 더블 클릭될 때 실행될 함수를 정의

    console.log('mouse double click')

  })

  button.addEventListener('mousedown', () => {//버튼이 눌릴 때 실행될 함수를 정의

    console.log('mouse down')

  })

  button.addEventListener('mouseup', () => {//버튼에서 마우스 버튼이 떼어질 때 실행될 함수를 정의

    console.log('mouse up')

  })

 //mouse move..............................

  let area = document.getElementById('area')//ID가 area인 요소를 가져와 area 변수에 저장

  let result = document.getElementById('result')//ID가 result인 요소를 가져와 result 변수에 저장합

  area.addEventListener('mousemove', (e) => {//마우스가 area 요소 위에서 움직일 때 실행될 함수를 정의

    result.innerHTML = `offset(${e.offsetX},${e.offsetY}, page(${e.pageX},${e.pageY}))`

  })

  //마우스의 위치 정보를 result 요소의 내용으로 업데이트합니다.

  // offsetX와 offsetY는 요소 내에서의 좌표,

  //pageX와 pageY는 페이지 전체에서의 좌표입니다.

 

  //enter, over..................

  let outer = document.getElementById('outer')//ID가 outer인 요소를 가져와 outer 변수에 저장

  let inner = document.getElementById('inner')//ID가 inner인 요소를 가져와 inner 변수에 저장

  outer.addEventListener('mouseenter', () => {//마우스가 outer 요소에 들어갈 때 실행될 함수를 정의

    console.log('outer mouseenter')

  })

  inner.addEventListener('mouseenter', () => {//마우스가 inner 요소에 들어갈 때 실행될 함수를 정의

    console.log('inner mouseenter')

  })

  outer.addEventListener('mouseover', () => {//마우스가 outer 요소 위에 있을 때 실행될 함수를 정의

    console.log('outer mouseover')

  })

  inner.addEventListener('mouseover', () => {//마우스가 inner 요소 위에 있을 때 실행될 함수를 정의

    console.log('inner mouseover')

  })

})

---

 

window 이벤트

브라우저에서 HTML 문서가 출력되는 브라우저 창을 지칭하는 객체는 Window입니다.

• resize 이벤트는 브라우저 창의 크기가 변경될 때 발생하는 이벤트입니다.
• 이 이벤트 처리 함수에서는 innerWidth와 innerHeight 속성을 통해 현재 브라우저 창의 가로, 세로 크기를 확인할 수 있습니다.

 

---

Form 관련 이벤트

Form 관련 이벤트는 HTML 문서에서 사용자가 데이터를 입력할 때 발생하며, <form> 태그와 입력 요소에서 각각 다르게 처리됩니다.

• <form> 태그는 여러 입력 태그(<input>, <textarea>, <select>)를 포함할 수 있습니다.
• 입력 요소에 관련된 주요 이벤트는 submit 이벤트와 reset 이벤트입니다.

1. submit 이벤트: 사용자가 폼을 제출할 때 발생하며, 주로 데이터를 서버로 전송하는 용도로 사용됩니다.
2. reset 이벤트: 폼 내 모든 입력 필드를 초기화할 때 발생하며, 입력된 데이터를 지우는 역할을 합니다.

또한, 각 입력 요소에서도 포커스 추가, 데이터 변경 등의 이벤트를 처리할 수 있습니다.