Programming Language/JavaScript

[JavaScript] 자바스크립트 addEventListener

자바스크립트 addEventListener

addEventListener는 JavaScript에서 이벤트 리스너를 HTML 요소에 추가하는 메서드이다. 이벤트 리스너는 특정 이벤트(예 : 클릭, 마우스 오버, 키보드 입력 등)가 발생했을 때 실행할 JavaScript 함수를 지정하는 데 사용된다.

다음은 addEventListener 메서드의 기본 사용법이다.

element.addEventListener(event, listener, useCapture);

element - 이벤트 리스너를 추가하려는 HTML 요소(또는 DOM 요소)를 가리키는 변수 또는 선택자이다.
event - 리스너가 연결될 이벤트의 이름(문자열)이다. 예를 들어, "click", "mouseover", "keydown", "change" 등이 가능하다.
listener - 이벤트가 발생했을 때 실행될 JavaScript 함수(이벤트 핸들러)이다. 이 함수는 이벤트 객체를 인수로 받을 수 있다. 이 함수는 이벤트를 처리하고 원하는 작업을 수행한다. 보통은 익명함수(function() {})로 많이 사용한다.
useCapture(선택 사항) - 불리언(Boolean) 값으로, 이벤트 캡처링을 사용할지 여부를 지정한다. true로 설정하면 이벤트가 하위 요소에서 상위 요소로 전파된다.

다음은 addEventListener 메서드에서 첫 번째 매개변수인 event 파라미터의 종류다, 한 번 살펴보자.

클릭 이벤트(Click Events)
- click - 요소를 클릭했을 때 발생하는 이벤트
마우스 이벤트(Mouse Events)
- mousedown - 마우스 버튼을 누를 때
- mouseup - 마우스 버튼을 뗄 때
- mousemove - 마우스 커서가 요소 위에서 이동할 때
- mouseover - 마우스 커서가 요소 위로 올라갈 때
- mouseout - 마우스 커서가 요소를 벗어날 때
키보드 이벤트(Keyboard Events)
- keydown - 키보드 키를 누를 때
- keyup - 키보드 키를 뗄 때
양식 이벤트(Form Events)
- submit - 양식을 제출할 때
- change - 입력 필드나 선택 상자의 값이 변경될 때
- focus - 요소가 포커스를 얻을 때
- blur - 요소가 포커스를 잃을 때
로드 이벤트(Load Events)
- load - 페이지 또는 이미지 등이 로드될 때
- DOMContentLoaded - HTML 문서 구문 분석이 완료되었을 때
터치 이벤트(Touch Events)
- touchstart - 터치 시작 시
- touchend - 터치 종료 시
- touchmove - 터치 이동 시
드래그 앤 드롭 이벤트(Drag and Drop Events)
- dragstart - 드래그 시작 시
- dragend - 드래그 종료 시
- dragover - 요소 위로 드래그 시
카스터 마우스 이벤트(Pointer Events)
- pointerdown - 포인터를 요소 위에 두었을 때
- pointerup - 포인터를 요소에서 제거했을 때
애니메이션 이벤트(Animation Events)
- animationstart - CSS 애니메이션 시작 시
- animationend - CSS 애니메이션 종료 시
- animationiteration - CSS 애니메이션이 반복될 때
기타 이벤트
- scroll - 스크롤바를 스코를할 때
- resize - 창 크기 조절 시

위의 목록에서 확인할 수 있듯이 addEventListener 메서드는 다양한 이벤트를 지원한다. 사용법은 위에서 처음 언급했던 addEventListener의 기본 구조에서 원하는 이벤트를 event 자리에 넣어주면 된다.

예를 들어, 본인이 click 이벤트에 대해 코드를 작성하고 싶을 땐, 아래와 같이 하면 된다.

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

// 메시지를 표시할 요소를 선택
const messageElement = document.getElementById("message");

// 클릭 이벤트 리스너 추가
button.addEventListener("click", function() {
    // 클릭 이벤트가 발생했을 때 실행될 코드
    messageElement.textContent = "버튼이 클릭되었습니다!";
});

만약 mousedown 이벤트에 대해 코드를 작성하고 싶을 경우 event 자리를 "mousedown"으로만 변경해 주면 된다.

// HTML 요소를 선택하거나 생성한다.
const element = document.getElementById("myElement"); // 아이디가 "myElement"인 요소를 선택하는 예시

// 이벤트 리스너를 추가한다.
element.addEventListener("mousedown", function(event) {
    // 이벤트 핸들러 함수
    console.log("마우스 버튼이 눌렸습니다.");
    console.log("마우스 좌표: X = " + event.clientX + ", Y = " + event.clientY);
    // 원하는 작업을 수행한다.
});

addEventListener 메서드의 첫 번째 파라미터를 "mousedown"으로만 변경하면 해당 이벤트에 대한 코드를 작성할 수 있다.

그러면 click과 mousedown의 차이가 무엇인가?

click 이벤트는 요소를 클릭했을 때 발생하며 클릭의 끝점을 나타내고, mousedown 이벤트는 마우스 버튼을 누르는 순간을 나타낸다. 두 이벤트는 서로 다른 상황에서 사용되며, 클릭 동작을 다룰 때 주로 click 이벤트를 사용하고, 마우스 버튼을 누르는 순간을 감지할 때 mousedown 이벤트를 사용한다. 즉, click은 클릭 동작이 완료될 때이며 mousedown은 마우스가 눌린 순간을 의미한다.

mousedown 이벤트 예제에서 function() 안에 들어있는 event의 의미는 무엇인가?

JavaScript의 이벤트 핸들러 함수 내에서 사용되는 event는 이벤트 객체(event object)를 나타낸다. 이벤트 객체는 이벤트가 발생했을 때 해당 이벤트에 대한 정보와 속성을 포함하는 객체이다. 이 객체는 이벤트 핸들러 함수 내에서 사용하여 이벤트와 관련된 작업을 수행할 때 유용하다.

event 객체에는 다양한 속성과 메서드가 포함되어 있으며, 이벤트의 유형에 따라 그 내용이 달라질 수 있다. 일반적으로 사용되는 이벤트 객체 속성에는 아래와 같은 것들이 있다.

event.type - 이벤트의 유형을 나타내는 문자열(예 : "mousedown, "click", "keydown" 등)
event.target - 이벤트가 발생한 HTML 요소를 나타내는 객체
event.clientX 및 event.clientY - 마우스 이벤트에서 마우스 포인터의 현재 X 및 Y 좌표
event.keyCode - 키보드 이벤트에서 눌린 키의 키 코드

이벤트 객체를 사용하여 이벤트 처리 함수 내에서 이벤트에 대한 정보를 확인하고 해당 이벤트에 반응하는 동작을 정의할 수 있다. 예를 들어, 마우스 클릭 위치를 확인하거나 키보드 이벤트의 키 코드를 확인하여 특정 행동을 수행할 수 있다.

다음은 keydown 이벤트를 이용하여 어떤 키를 입력했는지 정보를 저장하는 예제 코드를 살펴보자.

<!DOCTYPE html>
<html>
<head>
    <title>Keydown Event Example</title>
</head>
<body>
    <p>아무 키를 누르세요. 입력한 키코드가 표시됩니다.</p>

    <script>
        // 문서 객체에 keydown 이벤트 리스너 추가
        document.addEventListener("keydown", function(event) {
            // keydown 이벤트가 발생했을 때 실행될 코드
            const keyCode = event.keyCode; // 누른 키의 키코드 가져오기
            const key = event.key; // 누른 키의 문자 가져오기
            const message = `키코드: ${keyCode}, 키: ${key}`;
            
            // 메시지를 화면에 출력
            const messageElement = document.querySelector("p");
            messageElement.textContent = message;
        });
    </script>
</body>
</html>

keydown 이벤트를 사용하여 어떤 키를 누르든 해당 키의 키코드와 문자를 가져와서 화면에 출력한다. 이 코드는 사용자가 아무 키나 누를 때마다 키코드와 문자를 표시하는 동작을 수행한다.

키코드(keycode)가 무엇인가?

키코드(keycode)는 키보드에서 누른 키에 대한 고유한 숫자 코드를 나타낸다. 각 키는 키보드의 레이아웃과 지역 설정에 따라 특정 숫자를 가지며, 이 숫자를 사용하여 어떤 키가 눌렸는지를 식별할 수 있다.

addEventListener 메서드로 select box에서 change 이벤트 핸들러 등록

<!DOCTYPE html>
<html>
<head>
    <title>Change Event Example</title>
</head>
<body>
    <select id="mySelect">
        <option value="option1">옵션 1</option>
        <option value="option2">옵션 2</option>
        <option value="option3">옵션 3</option>
    </select>
    <p id="message">선택한 옵션: </p>

    <script>
        // select 요소를 선택
        const selectElement = document.getElementById("mySelect");

        // 메시지를 표시할 요소를 선택
        const messageElement = document.getElementById("message");

        // change 이벤트 리스너 추가
        selectElement.addEventListener("change", function() {
            // 선택한 옵션의 값을 가져와 메시지에 표시
            const selectedOption = selectElement.value;
            messageElement.textContent = "선택한 옵션: " + selectedOption;
        });
    </script>
</body>
</html>

addEventListener 메서드를 사용하여 change 이벤트를 <select> 요소에 연결하였다. 이렇게 하면 사용자가 옵션을 선택하면 이벤트 핸들러 함수가 실행되어 선택한 값에 접근할 수 있다.

addEventListener 메서드에서 자주 사용하는 이벤트 핸들러에 대해 알아보았다. 그 외 다른 이벤트 핸들러 함수를 등록할 때도 마찬가지로 원하는 이벤트 객체를 event 파라미터 위치에 넣어주면 된다.

읽어주셔서 감사합니다.

728x90

'Programming Language > JavaScript' 카테고리의 다른 글

[JavaScript] 자바스크립트 window.open(), window.opener() (0)	2023.12.02
[JavaScript] 자바스크립트 onclick (0)	2023.11.20
[JavaScript] 자바스크립트 setTimeout()과 setInterval() 함수 (0)	2023.11.09
[JavaScript] 자바스크립트 Array 객체 (0)	2023.11.05
[JavaScript] 자바스크립트 Number 객체 (0)	2023.11.02

Contents

새소식

인기 검색어

[JavaScript] 자바스크립트 addEventListener

자바스크립트 addEventListener

'Programming Language > JavaScript' 카테고리의 다른 글

당신이 좋아할만한 콘텐츠

티스토리툴바