[JavaScript] 이벤트

윤지·2024년 11월 7일

목록 보기

28/30

이벤트

자바스크립트 이벤트는 브라우저에서 발생하는 사용자 상호작용을 의미
웹 애플리케이션과 사용자 간 인터랙션의 핵심
클릭, 더블 클릭, 키보드 입력, 스크롤 등의 상호작용 발생 시 이벤트가 트리거되어 웹 페이지가 동적으로 반응

이벤트 등록의 기본 문법

[문서객체].addEventListener("이벤트명", 콜백함수);

이벤트 주요 구성

이벤트 타겟 (Event Target)
- 이벤트 타겟은 어느 요소에서 이벤트가 발생했는지를 나타냄. 쉽게 말해, 이벤트가 걸리는 요소 자체를 의미
이벤트 타입 (Event Type)
- 이벤트 타입은 이벤트의 종류를 나타냄. 예: 클릭, 키보드 입력, 드래그, 마우스 오버 등. 이 타입에 따라 이벤트 발생 시 트리거되는 작업이 달라짐
이벤트 핸들러 (Event Handler)
- 이벤트 핸들러는 이벤트 발생 시 실행할 콜백 함수. 예: 버튼 클릭 시 특정 작업을 수행하도록 정의한 함수가 이벤트 핸들러

이벤트 처리 예제: 버튼 클릭 이벤트

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

// 버튼 요소 선택
const button = document.getElementById('myButton');

// 클릭 이벤트 핸들러 정의
function handleClick() {
  alert('버튼이 클릭됨');
}

// 버튼에 클릭 이벤트 리스너 추가
button.addEventListener('click', handleClick);

이벤트 타겟: myButton ID를 가진 버튼 요소
이벤트 타입: 'click' (클릭 이벤트)
이벤트 핸들러: handleClick 함수 (클릭 시 알림 표시)

HTML 속성을 통한 이벤트 지정

HTML 태그에 직접 이벤트 속성 지정으로 이벤트 처리 가능. 그러나 이 방식은 관심사 분리(Separation of Concerns) 원칙 미준수로 유지보수성 측면에서 지양됨

<button onclick="alert('버튼이 클릭되었습니다!')">클릭하세요</button>

주요 HTML 이벤트 속성

onclick: 클릭 이벤트
onmouseover: 마우스 오버 이벤트
onkeydown: 키보드 키 다운 이벤트

관심사 분리란?HTML(구조), CSS(스타일), JavaScript(동작)를 분리하여 코드의 유지보수성과 재사용성을 높이는 개념. 따라서 이벤트 처리는 가능하면 JavaScript 파일에서 addEventListener() 사용이 권장됨

이벤트 객체 (Event Object)

이벤트 핸들러 함수는 이벤트에 대한 상세 정보를 담은 이벤트 객체를 매개변수로 받음. 이를 통해 발생한 이벤트에 대한 다양한 정보 사용 가능

주요 이벤트 객체 속성

event.type: 발생한 이벤트의 유형 (예: 'click', 'keydown')
event.target: 이벤트가 발생한 요소 (이벤트 타겟)
event.currentTarget: 현재 이벤트가 발생 중인 요소 (이벤트 버블링 중 변할 수 있음)

$$li.forEach((li) => {
  li.addEventListener('click', function (e) {
    e.currentTarget.remove(); // 이벤트가 발생한 요소를 삭제
  });
});

event.preventDefault() ⭐️: 이벤트의 기본 동작을 취소
event.stopPropagation(): 이벤트 버블링을 중지

document.getElementById('myButton').addEventListener('click', function(event) {
    console.log('이벤트 타입:', event.type);
    console.log('타겟 요소:', event.target);
    event.preventDefault(); // 기본 동작 방지
});

자주 사용하는 이벤트 요약

1. 클릭 이벤트 (click)

설명: 사용자가 요소를 클릭할 때 발생하는 이벤트=

html
코드 복사
<button id="myButton">클릭하세요!</button>
<div id="output"></div>

<script>
    const button = document.getElementById("myButton");
    const output = document.getElementById("output");

    button.addEventListener("click", function() {
        output.textContent = "버튼이 클릭되었습니다!";
        output.style.color = "green";
    });
</script>

2. 키보드 이벤트 (keydown, keyup)

설명: 키보드의 키를 누르거나 뗄 때 발생하는 이벤트
keydown은 키를 누르는 순간, keyup은 키를 뗄 때 발생=

html
코드 복사
<input type="text" id="inputField" placeholder="여기에 입력하세요..." />
<div id="keyOutput"></div>

<script>
    const inputField = document.getElementById("inputField");
    const keyOutput = document.getElementById("keyOutput");

    inputField.addEventListener("keydown", function(event) {
        keyOutput.textContent = `누른 키: ${event.key}`;
    });

    inputField.addEventListener("keyup", function(event) {
        keyOutput.textContent += ` (뗀 키: ${event.key})`;
    });
</script>

3. 드래그 이벤트 (drag, dragstart, dragend)

설명: 사용자가 요소를 드래그할 때 발생하는 이벤트
사용자 인터페이스(UI)에서 요소를 이동하거나 재배치할 때 사용

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>드래그 이벤트 예제</title>
    <style>
        #draggable {
            width: 100px;
            height: 100px;
            background-color: blue;
            cursor: move; /* 드래그 시 커서 변경 */
            position: relative;
        }
    </style>
</head>
<body>
    <div id="draggable" draggable="true">드래그 해보세요!</div>
    <div id="status"></div>

    <script>
        const draggable = document.getElementById("draggable");
        const status = document.getElementById("status");

        draggable.addEventListener("dragstart", function(event) {
            status.textContent = "드래그가 시작되었습니다!";
            event.dataTransfer.setData("text/plain", "이것은 드래그 중입니다.");
        });

        draggable.addEventListener("dragend", function(event) {
            status.textContent = "드래그가 종료되었습니다!";
        });
    </script>
</body>
</html>

4. 폼 이벤트 (submit, change, input)

설명: 사용자가 폼을 제출하거나, 입력 값을 변경할 때 발생하는 이벤트.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>폼 이벤트 예제</title>
    <style>
        #output {
            margin-top: 20px;
            color: blue;
        }
    </style>
</head>
<body>
    <form id="myForm">
        <label for="name">이름:</label>
        <input type="text" id="name" placeholder="이름을 입력하세요" required>
        <br>
        <label for="email">이메일:</label>
        <input type="email" id="email" placeholder="이메일을 입력하세요" required>
        <br>
        <button type="submit">제출</button>
    </form>
    <div id="output"></div>

    <script>
        const form = document.getElementById("myForm");
        const output = document.getElementById("output");

        // submit 이벤트 핸들러
        form.addEventListener("submit", function(event) {
            event.preventDefault(); // 기본 제출 동작 방지
            const name = document.getElementById("name").value;
            const email = document.getElementById("email").value;
            output.textContent = `이름: ${name}, 이메일: ${email}이(가) 제출되었습니다.`;
        });

        // change 이벤트 핸들러
        const nameInput = document.getElementById("name");
        nameInput.addEventListener("change", function() {
            output.textContent += ` 이름이 변경되었습니다: ${nameInput.value}`;
        });

        // input 이벤트 핸들러
        nameInput.addEventListener("input", function() {
            console.log(`현재 이름 입력: ${nameInput.value}`);
        });
    </script>
</body>
</html>

키코드 (Key Code) 정보

키보드 이벤트 시 특정 키를 식별할 수 있는 고유한 키 코드가 존재합니다. 주로 event.key나 event.code 속성을 사용하는 것이 권장됩니다.

엔터 키: 13
스페이스바: 32
화살표 키: 왼쪽(37), 위(38), 오른쪽(39), 아래(40)

document.addEventListener("keydown", function(event) {
    if (event.keyCode === 13) {
        console.log("엔터 키가 눌렸습니다!");
    }
});

📚 다른 이벤트 정보는 여기 참고

출처: 수코딩

윤지

프론트엔드 공부 기록 아카이빙🍁

이전 포스트

[JavaScript] DOM

다음 포스트