Chapter 3-20. 이벤트 핸들링(javascript)

JavaScript

Chapter 3-20. 이벤트 핸들링(javascript)

Chansman 2025. 4. 1. 10:20

자바스크립트 이벤트와 이벤트 핸들링

이번 포스트에서는 웹 프로그래밍에서의 이벤트와 이벤트 핸들링에 대해 자세히 설명합니다. 자바스크립트에서 발생하는 다양한 이벤트를 처리하고, 이를 통해 사용자와의 상호작용을 어떻게 구현하는지에 대해 알아보겠습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" contect="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>이벤트 & 이벤트 핸들링링</title>
    
</head>
<body>
    <button id="span">SPAN</button>
    <button id="strong">STRONG</button>
    <button id="mark">MARK</button>

    <script>
       const spanBtn = document.getElementById("span")
       const strongBtn = document.getElementById("strong")
       const markBtn = document.getElementById("mark")
        
        spanBtn.onclick = function(){
            alert("클릭했어요!")
        }

        function handleClick(){           
            alert("클릭했어요!")
        }

        spanBtn.onclick = handleClick

        spanBtn.onclick = function(){
            const span = document.createElement("span")
            span.textContent = "새로 생긴 span 태그입니다"
            document.body.append(span)
        }

        // 첫번째 코드 개별 addEventListener 사용
        // 직관적이고 간단하고 독립적이지만 중복코드와 확장성이 떨어진다.

         spanBtn.addEventListener("click", function(){
            const span = document.createElement("span")
            span.textContent = "새로 생긴 span 태그입니다"
            document.body.append(span)
        })

        strongBtn.addEventListener("click", function(){
            const strong = document.createElement("strong")
            strong.textContent = "새로 생긴 strong 태그입니다"
            document.body.append(strong)
        })

        markBtn.addEventListener("click", function(){
            const mark = document.createElement("mark")
            mark.textContent = "새로 생긴 mark 태그입니다"
            document.body.append(mark)
        })

        // 두 번째 코드 (공통 이벤트 핸들러 사용)
        // 코드중복최소화,확장성, 가독성향상되나 초기화지연 복잡성이증가될수있다.


        const handleClick = function(event){
            if(event.target.id == "span"){
            const span = document.createElement("span")
            span.textContent = "span 태그"
            document.body.append(span)
        } else if(event.target.id == "strong"){
            const strong = document.createElement("strong")
            strong.textContent = "strong 태그"
            document.body.append(strong)
        } else if(event.target.id == "mark"){
            const mark = document.createElement("mark")
            mark.textContent = "mark 태그"
            document.body.append(mark)
        }
    }

        spanBtn.addEventListener("click", handleClick)
        strongBtn.addEventListener("click", handleClick)
        markBtn.addEventListener("click", handleClick)
     
    </script>
    
</body>
</html>

📌 이벤트란?

이벤트란, 웹 페이지에서 사용자와의 상호작용을 나타내는 동작을 의미합니다. 예를 들어, 사용자가 버튼을 클릭하거나, 키보드를 눌렀을 때 발생하는 다양한 행동들을 이벤트라고 합니다.

🔹 웹에서 발생할 수 있는 이벤트 예시

클릭 이벤트: 사용자가 버튼을 클릭할 때
키 다운 이벤트: 사용자가 키보드를 눌렀을 때
폼 제출 이벤트: 사용자가 폼을 제출할 때
그 외 다양한 상호작용 이벤트들이 있습니다.

📋 이벤트 핸들링 (Event Handling)

이벤트 핸들링이란, 이벤트가 발생했을 때 그에 맞는 처리 함수를 정의하는 과정을 말합니다. 이벤트 핸들러는 이벤트가 발생하면 실행될 함수를 의미하며, 이를 통해 우리가 원하는 동작을 처리할 수 있습니다.

🔹 이벤트 핸들러 등록

이벤트 핸들러는 다음 두 가지 방법으로 등록할 수 있습니다:

이벤트 속성 사용
addEventListener() 메소드 사용

🔸 이벤트 속성 사용 예시

<button onclick="alert('환영합니다!')">클릭하세요</button>

onclick 속성을 통해 버튼 클릭 시 경고창을 띄우는 이벤트를 등록합니다.

🔸 addEventListener() 메소드 사용

addEventListener() 메소드는 더 유연한 방식으로 이벤트 핸들러를 등록하고, 여러 개의 이벤트 핸들러를 하나의 요소에 추가할 수 있게 해줍니다. 또한 이벤트 핸들러 제거도 가능합니다.

✅ 예시

let button = document.querySelector('button');
button.addEventListener('click', function() {
  alert('환영합니다!');
});

**addEventListener()**를 사용하면 여러 개의 이벤트 핸들러를 하나의 요소에 추가하거나 이벤트 핸들러를 제거할 수 있습니다.

📋 이벤트 객체 (Event Object)

이벤트가 발생하면, 자바스크립트는 **이벤트 객체(Event Object)**를 이벤트 핸들러 함수에 자동으로 전달합니다. 이 객체는 이벤트와 관련된 다양한 정보를 담고 있으며, 이를 통해 더 많은 기능을 활용할 수 있습니다.

✅ 예시

button.addEventListener('click', function(event) {
  console.log(event.target); // 이벤트가 발생한 대상 요소
  console.log(event.type);   // 이벤트 종류
});

event.target: 이벤트가 발생한 대상 요소를 참조합니다.
event.type: 발생한 이벤트의 종류를 반환합니다.

🚩 정리

이벤트는 사용자의 상호작용을 나타내며, 이를 통해 웹 페이지의 동작을 제어할 수 있습니다.
이벤트 핸들링은 이벤트가 발생했을 때 함수를 실행하는 과정으로, 이를 통해 페이지의 반응성을 높일 수 있습니다.
**addEventListener()**는 더 유연하게 이벤트를 처리할 수 있는 메소드이며, 여러 이벤트 핸들러를 동시에 적용하거나 제거할 수 있습니다.
이벤트 객체는 이벤트 관련 정보를 제공하며, 이를 활용하여 더 복잡한 이벤트 처리를 할 수 있습니다.