JS/JavaScript

#15 자바스크립트 이벤트

인생아 2024. 8. 31. 00:13
반응형

자바스크립트에서 이벤트는 사용자 또는 브라우저가 수행하는 특정 동작을 의미합니다. 예를 들어, 사용자가 버튼을 클릭하거나 페이지가 로드될 때 이벤트가 발생합니다. 이러한 이벤트에 반응하여 특정 작업을 수행할 수 있는 것이 자바스크립트의 강력한 기능 중 하나입니다.

이벤트(Event)란?

이벤트는 웹 페이지에서 일어나는 모든 일이라고 할 수 있습니다. 예를 들어, 사용자 클릭, 키보드 입력, 마우스 움직임 등이 모두 이벤트입니다. 자바스크립트를 사용하면 이러한 이벤트가 발생했을 때 특정 동작을 수행하도록 코드로 처리할 수 있습니다.

기본 이벤트 예제

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Event Example</title>
</head>
<body>
    <button id="myButton">Click Me</button>

    <script>
        const button = document.getElementById('myButton');
        
        button.addEventListener('click', function() {
            alert('Button clicked!');
        });
    </script>
</body>
</html>

위의 예제에서 button 요소에 click 이벤트 리스너를 추가하여, 사용자가 버튼을 클릭하면 경고 메시지가 표시되도록 했습니다.

자주 사용되는 이벤트 유형

  1. 마우스 이벤트(Mouse Events)
    • click: 요소를 클릭했을 때 발생.
    • dblclick: 요소를 더블 클릭했을 때 발생.
    • mouseover: 요소 위로 마우스 포인터가 이동할 때 발생.
    • mouseout: 요소에서 마우스 포인터가 벗어날 때 발생.
  2. 키보드 이벤트(Keyboard Events)
    • keydown: 키가 눌러질 때 발생.
    • keyup: 키가 눌렸다가 떼어질 때 발생.
    • keypress: 키가 눌렸을 때 발생 (현재는 keydown/keyup 이벤트로 대체 권장).
  3. 폼 이벤트(Form Events)
    • submit: 폼이 제출될 때 발생.
    • change: 입력 요소의 값이 변경될 때 발생.
    • focus: 입력 요소가 포커스를 받을 때 발생.
    • blur: 입력 요소에서 포커스가 벗어날 때 발생.
  4. 문서 이벤트(Document Events)
    • DOMContentLoaded: HTML 문서가 완전히 로드되고 DOM이 준비되었을 때 발생.
    • load: 모든 리소스(이미지, 스타일시트 등)를 포함한 페이지가 완전히 로드되었을 때 발생.
    • unload: 페이지가 언로드(떠날 때)될 때 발생.

이벤트 리스너 추가

이벤트 리스너는 특정 이벤트가 발생했을 때 호출되는 함수를 의미합니다. 이벤트 리스너는 addEventListener 메서드를 사용해 요소에 추가할 수 있습니다.

이벤트 리스너 추가 예제

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Event Listener Example</title>
</head>
<body>
    <input type="text" id="myInput" placeholder="Type something...">

    <script>
        const input = document.getElementById('myInput');
        
        input.addEventListener('focus', function() {
            console.log('Input field is focused.');
        });

        input.addEventListener('blur', function() {
            console.log('Input field lost focus.');
        });
    </script>
</body>
</html>

위의 예제에서 focus 이벤트와 blur 이벤트에 대한 리스너를 설정하여 입력 필드가 포커스를 받을 때와 포커스를 잃을 때 각각 메시지를 출력합니다.

이벤트 객체(Event Object)

이벤트가 발생하면 자바스크립트는 자동으로 이벤트 객체를 생성하고, 이벤트 핸들러에 전달합니다. 이 객체에는 이벤트에 대한 다양한 정보가 담겨 있으며, 이를 통해 이벤트에 대한 세부 사항을 알 수 있습니다.

이벤트 객체 예제

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Event Object Example</title>
</head>
<body>
    <button id="infoButton">Show Event Info</button>

    <script>
        const button = document.getElementById('infoButton');
        
        button.addEventListener('click', function(event) {
            console.log('Event type:', event.type);
            console.log('X coordinate:', event.clientX);
            console.log('Y coordinate:', event.clientY);
        });
    </script>
</body>
</html>

위의 예제에서 event 객체를 통해 클릭 이벤트의 타입과 클릭 위치의 좌표를 출력합니다. event.type은 이벤트의 유형을 나타내고, event.clientX와 event.clientY는 클릭한 위치의 x, y 좌표를 나타냅니다.

이벤트 전파(Event Propagation)

이벤트 전파에는 캡처링(Capturing)과 버블링(Bubbling)이라는 두 가지 단계가 있습니다. 기본적으로 자바스크립트 이벤트는 버블링 단계에서 처리됩니다.

  • 버블링: 이벤트가 가장 안쪽의 요소부터 시작하여 바깥쪽으로 전파됩니다.
  • 캡처링: 이벤트가 가장 바깥쪽 요소부터 시작하여 안쪽으로 전파됩니다.

이벤트 전파는 addEventListener의 세 번째 인자를 사용해 제어할 수 있습니다.

이벤트 전파 예제

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Event Propagation Example</title>
</head>
<body>
    <div id="outer" style="padding: 50px; background-color: lightblue;">
        Outer Div
        <div id="inner" style="padding: 50px; background-color: lightcoral;">
            Inner Div
        </div>
    </div>

    <script>
        const outerDiv = document.getElementById('outer');
        const innerDiv = document.getElementById('inner');

        outerDiv.addEventListener('click', function() {
            alert('Outer Div clicked!');
        });

        innerDiv.addEventListener('click', function(event) {
            alert('Inner Div clicked!');
            event.stopPropagation(); // 이벤트 버블링 중지
        });
    </script>
</body>
</html>

위의 예제에서 stopPropagation 메서드는 이벤트 버블링을 중지시킵니다. 이로 인해 innerDiv 클릭 시 outerDiv의 클릭 이벤트가 발생하지 않습니다.

이벤트 위임(Event Delegation)

이벤트 위임은 이벤트 핸들러를 부모 요소에 설정하여 자식 요소에서 발생하는 이벤트를 처리하는 기법입니다. 이는 DOM 요소가 동적으로 추가되거나 변경될 때 유용합니다.

이벤트 위임 예제

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Event Delegation Example</title>
</head>
<body>
    <ul id="myList">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>

    <script>
        const list = document.getElementById('myList');

        list.addEventListener('click', function(event) {
            if (event.target.tagName === 'LI') {
                alert('Clicked on ' + event.target.textContent);
            }
        });
    </script>
</body>
</html>

위의 예제에서 ul 요소에 이벤트 리스너를 추가하여 모든 li 요소에 대한 클릭 이벤트를 처리합니다. 새로운 li 요소가 추가되더라도 이 이벤트 핸들러는 정상적으로 동작합니다.

결론

자바스크립트 이벤트는 웹 페이지와 사용자 간의 상호작용을 처리하는 핵심 요소입니다. 이벤트 리스너를 사용해 다양한 이벤트에 반응하고, 이벤트 객체를 활용해 세부 정보를 처리하며, 이벤트 전파와 위임을 통해 효율적인 이벤트 관리를 할 수 있습니다. 이 모든 개념을 이해하고 활용하면 자바스크립트로 더욱 인터랙티브한 웹 애플리케이션을 만들 수 있습니다.

반응형
저작자표시

'JS > JavaScript' 카테고리의 다른 글

#19 자바스크립트 클로저 활용 예시 : 즉시 실행 함수(IIFE)와 모듈 패턴  (0) 2024.09.03
#18 자바스크립트 클로저(Closure) 개념  (0) 2024.09.03
#17 자바스크립트 프로토타입 상속  (0) 2024.08.31
#16 자바스크립트 프로토타입 체인  (0) 2024.08.31
#14 자바스크립트 DOM 조작하기  (0) 2024.08.31
#13 자바스크립트 DOM 선택  (0) 2024.08.29
#12 자바스크립트 DOM  (0) 2024.08.29
#11 자바스크립트 배열 메서드  (0) 2024.08.29

'JS/JavaScript'의 다른글

  • 현재글#15 자바스크립트 이벤트

관련글

티스토리툴바