3.2 이벤트 리스너 추가

약 10분

본문 듣기

읽기 설정

글자 크기

줄 간격

글꼴

3.2 이벤트 리스너 추가

이벤트 리스너는 특정 이벤트가 발생했을 때, 지정된 함수(콜백 함수)를 실행하도록 설정하는 기능입니다. 사용자가 클릭, 키 입력, 마우스 움직임 등의 동작을 할 때, 그에 대한 반응을 정의할 수 있습니다. 이벤트 리스너는 JavaScript를 사용하여 DOM 요소에 추가하며, 다양한 사용자 인터랙션을 처리할 수 있도록 도와줍니다.

예제: 버튼 클릭 이벤트 리스너 추가

아래의 코드는 버튼 클릭 시 알림 창을 표시하는 간단한 예제입니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>이벤트 리스너 예제</title>
</head>
<body>
    <button id="alertButton">클릭해 주세요!</button>
    <script>
        const button = document.getElementById('alertButton');
        // 버튼 클릭 시 알림창 띄우기
        button.addEventListener('click', () => {
            alert('버튼이 클릭되었습니다!');
        });
    </script>
</body>
</html>

이 코드에서는 addEventListener 메서드를 사용하여 버튼 클릭 이벤트를 처리하고 있습니다. 사용자가 버튼을 클릭하면, 알림 창이 나타나게 됩니다.

실습: ToDo List에 이벤트 리스너 추가

이제 간단한 ToDo List를 만들어보며 이벤트 리스너를 추가하는 방법을 실습해보겠습니다. 사용자가 새로운 할 일을 입력하고 추가 버튼을 클릭하면 리스트에 추가되는 기능입니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ToDo List</title>
</head>
<body>
    <input type="text" id="todoInput" placeholder="새로운 할 일 입력">
    <button id="addButton">추가하기</button>
    <ul id="todoList"></ul>
    <script>
        const addButton = document.getElementById('addButton');
        const todoInput = document.getElementById('todoInput');
        const todoList = document.getElementById('todoList');

        addButton.addEventListener('click', () => {
            const newTodo = todoInput.value;
            if (newTodo) {
                const newTodoItem = document.createElement('li');
                newTodoItem.textContent = newTodo;
                todoList.appendChild(newTodoItem);
                todoInput.value = ''; // 입력창 초기화
            } else {
                alert('할 일을 입력해 주세요!');
            }
        });
    </script>
</body>
</html>

위의 코드를 통해 사용자가 할 일을 입력하고 ‘추가하기’ 버튼을 클릭하면 새로운 항목이 리스트에 추가됩니다. 또한 입력 창은 항목 추가 후 비워지게 됩니다.

응용: 이벤트 리스너로 다양한 UI 조작

이제는 입력한 내용을 삭제할 수 있는 기능을 추가해보겠습니다. 각 항목에 삭제 버튼을 추가해주어 사용자가 원할 때 삭제할 수 있도록 하겠습니다. 아래와 같이 코드를 수정해 보세요.

        addButton.addEventListener('click', () => {
            const newTodo = todoInput.value;
            if (newTodo) {
                const newTodoItem = document.createElement('li');
                newTodoItem.textContent = newTodo;

                // 삭제 버튼 추가
                const deleteButton = document.createElement('button');
                deleteButton.textContent = '삭제';
                newTodoItem.appendChild(deleteButton);

                deleteButton.addEventListener('click', () => {
                    todoList.removeChild(newTodoItem); // 해당 항목 삭제
                });

                todoList.appendChild(newTodoItem);
                todoInput.value = ''; // 입력창 초기화
            } else {
                alert('할 일을 입력해 주세요!');
            }
        });

이렇게 이벤트 리스너를 활용하면, 사용자와의 상호작용을 보다 풍부하게 만들 수 있습니다. 각 요소에 다른 이벤트 리스너를 추가하여 다양한 조작 방식으로 전체 UI를 구성할 수 있습니다.

정리

이벤트 리스너는 특정 이벤트가 발생했을 때 처리할 동작을 정의해 주는 역할을 함.
addEventListener 메서드를 사용하여 다양한 요소에 이벤트를 추가할 수 있음.
DOM 요소를 조작하여 사용자와 상호작용하는 웹 애플리케이션을 만들 수 있음.

코드 html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>이벤트 리스너 예제</title>
</head>
<body>
    <button id="alertButton">클릭해 주세요!</button>
    <script>
        const button = document.getElementById('alertButton');
        // 버튼 클릭 시 알림창 띄우기
        button.addEventListener('click', () => {
            alert('버튼이 클릭되었습니다!');
        });
    </script>
</body>
</html>

3.2 이벤트 리스너 추가

3.2 이벤트 리스너 추가

예제: 버튼 클릭 이벤트 리스너 추가

실습: ToDo List에 이벤트 리스너 추가

응용: 이벤트 리스너로 다양한 UI 조작

정리

댓글 0