자주 사용되는 자바스크립트 이벤트

SMALL

자바스크립트에서는 다양한 이벤트 종류가 발생할 수 있습니다. 이벤트는 사용자의 상호 작용, 브라우저의 상태 변경, 혹은 특정 조건의 충족 등에 의해 발생합니다.
일반적으로 자주 사용되는 몇 가지 자바스크립트 이벤트의 종류와 콜백함수에 대해 설명하도록 하겠습니다.

1. 자바스크립 이벤트

(1) Mouse 이벤트

click: 마우스 왼쪽 버튼을 클릭할 때 발생
dblclick: 마우스 왼쪽 버튼을 빠르게 두 번 클릭할 때 발생
mousedown: 마우스 버튼을 누를 때 발생
mouseup: 마우스 버튼을 눌렀다 놓을 때 발생
mousemove: 마우스를 움직일 때 발생

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>마우스 이벤트 예제</title>
  <style>
    #myButton {
      width: 100px;
      height: 50px;
      background-color: lightblue;
      border: 1px solid darkblue;
    }
  </style>
</head>
<body>

<!-- 클릭, 더블클릭, 마우스 다운, 마우스 업, 마우스 이동 이벤트 예제 -->
<button id="myButton">클릭하세요</button>

<script>
document.addEventListener('DOMContentLoaded', function () {
  var myButton = document.getElementById('myButton');

  // 클릭 이벤트 예제
  myButton.addEventListener('click', function() {
    console.log('클릭 이벤트가 발생했습니다.');
  });

  // 더블클릭 이벤트 예제
  myButton.addEventListener('dblclick', function() {
    console.log('더블클릭 이벤트가 발생했습니다.');
  });

  // 마우스 다운 이벤트 예제
  myButton.addEventListener('mousedown', function() {
    console.log('마우스 다운 이벤트가 발생했습니다.');
  });

  // 마우스 업 이벤트 예제
  myButton.addEventListener('mouseup', function() {
    console.log('마우스 업 이벤트가 발생했습니다.');
  });

  // 마우스 이동 이벤트 예제
  myButton.addEventListener('mousemove', function() {
    console.log('마우스 이동 이벤트가 발생했습니다.');
  });
});
</script>

</body>
</html>

(2) Keyboard 이벤트

keydown: 키를 누를 때 발생
keyup: 키를 눌렀다 놓을 때 발생
keypress: 키를 누를 때 발생 (좀 더 구체적인 문자 정보를 포함)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>키보드 이벤트 예제</title>
</head>
<body>

<!-- keydown, keyup, keypress 이벤트 예제 -->
<input type="text" id="keyboardInput" placeholder="여기에 키를 눌러보세요">

<script>
document.addEventListener('DOMContentLoaded', function () {
  var keyboardInput = document.getElementById('keyboardInput');

  // keydown 이벤트 예제
  keyboardInput.addEventListener('keydown', function(event) {
    console.log('keydown 이벤트가 발생했습니다. 키 코드:', event.key);
  });

  // keyup 이벤트 예제
  keyboardInput.addEventListener('keyup', function(event) {
    console.log('keyup 이벤트가 발생했습니다. 키 코드:', event.key);
  });

  // keypress 이벤트 예제
  keyboardInput.addEventListener('keypress', function(event) {
    console.log('keypress 이벤트가 발생했습니다. 문자:', String.fromCharCode(event.key));
  });
});
</script>

</body>
</html>

(3) 폼 이벤트
submit: 폼을 제출할 때 발생
change: 입력 필드의 값이 변경될 때 발생
input: 입력 필드에 입력이 들어올 때 발생
focus: 요소에 포커스가 맞춰질 때 발생
blur: 요소에서 포커스가 빠져나갈 때 발생

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>폼 이벤트 예제</title>
</head>
<body>

<!-- submit 이벤트 예제 -->
<form id="myForm">
  <input type="text" name="username" placeholder="사용자명">

<!-- change 이벤트 예제 -->
  <input type="text" id="changeInput" placeholder="값을 입력하세요">

<!-- input 이벤트 예제 -->
  <input type="text" id="inputInput" placeholder="값을 입력하세요">

<!-- focus 이벤트 예제 -->
  <input type="text" id="focusInput" placeholder="값을 입력하세요">

<!-- blur 이벤트 예제 -->
  <input type="text" id="blurInput" placeholder="값을 입력하세요">

  <button type="submit">제출</button>
</form>



<script>
document.addEventListener('DOMContentLoaded', function () {

  // submit 이벤트 예제
  document.getElementById('myForm').addEventListener('submit', function(event) {
    event.preventDefault(); // 폼 제출 동작을 막음
    console.log('폼이 제출되었습니다.');
  });

  // change 이벤트 예제
  document.getElementById('changeInput').addEventListener('change', function() {
    console.log('값이 변경되었습니다.');
  });

  // input 이벤트 예제
  document.getElementById('inputInput').addEventListener('input', function() {
    console.log('입력이 감지되었습니다.');
  });

  // focus 이벤트 예제
  document.getElementById('focusInput').addEventListener('focus', function() {
    console.log('포커스가 요소에 맞춰졌습니다.');
  });

  // blur 이벤트 예제
  document.getElementById('blurInput').addEventListener('blur', function() {
    console.log('포커스가 요소에서 빠져나갔습니다.');
  });

});
</script>

</body>
</html>

(4) 윈도우 이벤트
load: 문서 또는 리소스가 로드될 때 발생
resize: 브라우저 창의 크기가 변경될 때 발생
scroll: 페이지를 스크롤할 때 발생
unload: 문서가 언로드될 때 발생

(5) 기타 이벤트
DOMContentLoaded: HTML 문서의 초기 렌더링이 완료되었을 때 발생
error: 자바스크립트 실행 중 오류가 발생했을 때 발생
hashchange: URL의 해시가 변경될 때 발생

이외에도 다양한 이벤트가 있으며, 개발자는 이벤트를 적절히 활용하여 사용자와 상호 작용하거나 웹 페이지의 동적인 부분을 관리할 수 있습니다. 이벤트 리스너를 사용하여 특정 이벤트에 대한 콜백 함수를 등록하고, 해당 이벤트가 발생할 때마다 콜백 함수가 실행되도록 할 수 있습니다.

2. 콜백 함수

마우스 클릭 이벤트에 대한 콜백 함수를 작성하는 간단한 예제를 아래에 제시합니다. 이 예제에서는 HTML 문서에서 버튼 엘리먼트를 선택하고, 해당 버튼을 클릭할 때마다 콜백 함수가 실행되도록 합니다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>마우스 클릭 이벤트 예제</title>
</head>
<body>

<button id="myButton">클릭하세요</button>

<script src="script.js"></script>
</body>
</html>

JavaScript (script.js)

// HTML 문서가 로드된 후 실행될 코드
document.addEventListener('DOMContentLoaded', function () {
  // 버튼 엘리먼트를 가져오기
  var myButton = document.getElementById('myButton');

  // 버튼에 대한 클릭 이벤트 리스너 등록  // 클릭 이벤트가 발생했을 때 실행될 콜백 함수
  myButton.addEventListener('click', function (event) {   
    alert('버튼이 클릭되었습니다!');
    console.log('마우스 클릭 이벤트가 발생했습니다.');
  });
});

이 예제에서는 HTML 문서에 버튼을 만들고, 해당 버튼에 대한 클릭 이벤트 리스너를 등록하였습니다. 버튼이 클릭되면 alert 창이 표시되고 콘솔에 로그가 출력됩니다. 개발자 도구(F12)의 콘솔을 확인하면 로그를 확인할 수 있습니다.

'#IT 개발노트' 카테고리의 다른 글

JavaScript(자바스크립트) 브라우저 객체 2탄 (0)	2024.02.02
JavaScript(자바스크립트) 브라우저 객체 1탄 (0)	2024.02.02
가장 많이 사용하는 HTML Tag (0)	2024.01.17
데이터베이스 설계 방법 (0)	2024.01.14
RESTful API 구현 방법 소개 (0)	2024.01.04

꾸미라기 Daily Record

자주 사용되는 자바스크립트 이벤트

1. 자바스크립 이벤트

2. 콜백 함수

'#IT 개발노트' 카테고리의 다른 글

티스토리툴바

자주 사용되는 자바스크립트 이벤트

1. 자바스크립 이벤트

2. 콜백 함수

'#IT 개발노트' 카테고리의 다른 글

관련글

티스토리툴바