개발 공부/JavaScript

[JavaScript] 이벤트(Event)

U_D 2023. 4. 16. 22:20

 

1. 클릭 이벤트(Click Event)

클릭 이벤트는 마우스로 클릭할 때 발생하는 이벤트입니다.

HTML 요소에서 onclick 속성, DOM 요소에서 click 이벤트를 사용하여 핸들링할 수 있습니다.

 

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>이벤트 예시</title>
</head>
<body>

<button id="myButton">Click me!</button>

<script>
// 클릭 이벤트 핸들러 등록
document.querySelector('#myButton').addEventListener('click', function() {
  alert('버튼이 클릭되었습니다.');
});
</script>

</body>
</html>

 

2. 마우스 이벤트(Mouse Event)

마우스 이벤트는 마우스를 사용할 때 발생하는 이벤트입니다.

마우스 이벤트로는 클릭 이벤트 외에도 마우스 오버(mouseover), 마우스 아웃(mouseout), 마우스 이동(mousemove) 등의 이벤트가 있습니다.

 

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>마우스 이벤트 예시</title>
  <style>
    #myDiv {
      width: 100px;
      height: 100px;
      background-color: yellow;
    }
  </style>
</head>
<body>

<div id="myDiv"></div>

<script>
// 마우스 오버 이벤트 핸들러 등록
document.querySelector('#myDiv').addEventListener('mouseover', function() {
  this.style.backgroundColor = 'blue';
});

// 마우스 아웃 이벤트 핸들러 등록
document.querySelector('#myDiv').addEventListener('mouseout', function() {
  this.style.backgroundColor = 'yellow';
});

// 마우스 클릭 이벤트 핸들러 등록
document.querySelector('#myDiv').addEventListener('click', function() {
  alert('사각형이 클릭되었습니다.');
});
</script>

</body>
</html>

 

3. 키보드 이벤트(Keyboard Event)

키보드 이벤트는 키보드 입력에 대한 이벤트입니다.

HTML 요소에서 onkeydown, onkeyup 속성, DOM 요소에서 keydown, keyup 이벤트를 사용하여 핸들링할 수 있습니다.

 

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>키보드 이벤트 예시</title>
</head>
<body>

<input type="text" id="myInput" placeholder="이름을 입력하세요">

<script>
// 엔터 키 이벤트 핸들러 등록
document.querySelector('#myInput').addEventListener('keydown', function(event) {
  if (event.key === 'Enter') {
    alert(this.value + '님, 환영합니다!');
  }
});
</script>

</body>
</html>

 

4. 이벤트 전파(Event Propagation)

이벤트 전파는 이벤트가 발생한 요소에서 시작해 부모 요소로 이벤트가 전파되는 것을 말합니다. 이벤트 전파 방식으로는 캡처링(Capturing)과 버블링(Bubbling) 두 가지 방식이 있습니다.

 

캡처링은 이벤트가 발생한 요소에서 시작해 상위 요소로 이벤트가 전파되는 방식입니다. 이벤트 전파의 첫 단계에서 발생하며, 캡처링 단계에서는 이벤트 핸들러가 가장 상위 요소부터 가장 하위 요소까지 차례대로 호출됩니다.

 

버블링은 이벤트가 발생한 요소에서 시작해 하위 요소로 이벤트가 전파되는 방식입니다. 이벤트 전파의 마지막 단계에서 발생하며, 버블링 단계에서는 이벤트 핸들러가 가장 하위 요소부터 가장 상위 요소까지 차례대로 호출됩니다.

<div id="outer">
  <div id="inner">
    <button id="button">Click me</button>
  </div>
</div>
const outer = document.getElementById("outer");
const inner = document.getElementById("inner");
const button = document.getElementById("button");

outer.addEventListener("click", () => {
  console.log("outer click");
}, true); // 캡처링 단계에서 핸들러 등록

inner.addEventListener("click", () => {
  console.log("inner click");
}, true); // 캡처링 단계에서 핸들러 등록

button.addEventListener("click", () => {
  console.log("button click");
}); // 버블링 단계에서 핸들러 등록

 

위 코드에서는 outer 요소에 캡처링 단계에서 click 이벤트 핸들러를 등록하고 inner 요소에 버블링 단계에서 click 이벤트 핸들러를 등록했습니다. 이 경우 inner 요소를 클릭하면 콘솔에 "inner clicked"가 출력되고, outer 요소를 클릭하면 콘솔에 "outer clicked"가 출력됩니다.

 

5. 이벤트 위임(Event Delegation)

이벤트 객체는 이벤트가 발생했을 때 해당 이벤트와 관련된 정보를 담고 있는 객체입니다.

이벤트 객체를 사용하여 이벤트가 발생한 요소, 마우스 위치, 키보드 입력 등의 정보를 얻을 수 있습니다.

<ul id="myList">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

이때, 각 li 요소를 클릭했을 때 어떤 동작을 수행하고 싶다면, 아래와 같이 각 요소에 대한 이벤트 핸들러를 등록할 수 있습니다.

const listItems = document.querySelectorAll('#myList li');
for (let i = 0; i < listItems.length; i++) {
  listItems[i].addEventListener('click', function() {
    console.log(`Clicked on item ${i + 1}`);
  });
}

하지만, 위와 같은 방식은 요소가 추가되거나 제거될 때마다 이벤트 핸들러를 다시 등록해주어야 하기 때문에 비효율적입니다. 이를 개선하기 위해 이벤트 위임을 사용할 수 있습니다. 이때, 상위 요소에 대한 이벤트 핸들러를 등록하고, 이벤트가 발생한 요소의 정보를 이벤트 객체에서 가져와서 처리합니다.

const myList = document.getElementById('myList');
myList.addEventListener('click', function(event) {
  if (event.target.tagName === 'LI') {
    console.log(`Clicked on ${event.target.textContent}`);
  }
});

이렇게 하면 새로운 li 요소가 추가되더라도 이벤트 핸들러를 다시 등록할 필요 없이 동작합니다.

 

 

6. 이벤트 객체(Event Object)

이벤트 객체(Event Object)는 이벤트가 발생했을 때 해당 이벤트와 관련된 정보를 담고 있는 객체입니다. 예를 들어 클릭 이벤트가 발생했을 때, 클릭한 마우스 버튼의 위치, 클릭한 요소의 정보 등을 담고 있습니다. 이벤트 객체는 이벤트 핸들러 내부에서 자동으로 생성되며, 이벤트 핸들러의 첫 번째 매개변수로 전달됩니다.

 

예시코드를 통해 이벤트 객체의 활용 방법을 살펴보겠습니다. 아래 코드는 버튼이 클릭되었을 때 클릭한 버튼의 ID를 출력하는 코드입니다.

 

<button id="myButton">Click me</button>
const myButton = document.querySelector('#myButton');

function handleClick(event) {
  console.log('Clicked button ID:', event.target.id);
}

myButton.addEventListener('click', handleClick);

위 코드에서 handleClick 함수의 매개변수 event는 이벤트 객체입니다. event.target을 통해 이벤트가 발생한 요소(여기서는 버튼)에 접근할 수 있으며, event.target.id를 통해 해당 요소의 ID 값을 가져올 수 있습니다. 따라서 위 코드는 버튼이 클릭되었을 때 "Clicked button ID: myButton"을 출력합니다.

 

출처 : chatGPT

저작자표시 비영리 변경금지

'개발 공부 > JavaScript' 카테고리의 다른 글

[JavaScript] Object(객체) 대신에 왜 Map을 써야할까?  (0) 2023.04.09
[JavaScript] 브라우저의 렌더링 과정  (0) 2023.03.12
[JavaScript] Number / Math / Date  (0) 2023.02.26
[JavaScript] 배열의 다양한 메서드(METHOD)  (0) 2023.02.19
[JavaScript] ES6 함수의 추가 기능  (0) 2023.02.12

'개발 공부/JavaScript'의 다른글

  • 현재글[JavaScript] 이벤트(Event)

관련글

댓글

티스토리툴바