새소식

반응형

인기 검색어

Programming Language/JavaScript

[JavaScript] 자바스크립트 onclick, addEventListener 함수 사용법

  • -
반응형

자바스크립트 onclick, addEventListener 함수

JavaScript에서 클릭 이벤트를 다루는 함수는 웹 페이지에서 사용자 상호 작용을 처리하는 데 중요하다. 클릭 이벤트 함수는 사용자가 요소를 클릭할 때 실행되는 코드를 정의하는 데 사용된다. 클릭 이벤트를 다루는 데는 크게 onclick 함수와 addEventListener 함수가 있는데 각 함수에 대해 알아보는 시간을 가져보자.

 

 

1. onclick 함수

JavaScript에서 onclick 함수는 요소에 클릭 이벤트 핸들러를 설정하는 방법 중 하나이다. 이 핸들러 함수는 사용자가 해당 요소를 클릭할 때 실행되는 코드를 정의하며, 웹 페이지와 상호 작용을 처리하는 데 중요한 역할을 한다.

 

이벤트 핸들러 설정

onclick 속성을 사용하여 요소에 클릭 이벤트 핸들러 함수를 설정한다. 이때 핸들러 함수는 익명 함수(anonymou function)로 정의하거나, 미리 정의한 함수를 참조할 수 있다.

const btn = document.getElementById("myButton");

// 익명 함수를 사용한 클릭 이벤트 핸들러 설정
btn.onclick = function() {
  // 클릭 이벤트가 발생했을 때 실행되는 코드
  console.log("버튼이 클릭되었습니다.");
};

위와 같은 클릭 이벤트 핸들러를 사용하면 사용자가 버튼을 클릭할 때마다 함수가 실행된다.

 

 

이벤트 객체(Event Object)

클릭 이벤트 핸들러 함수는 종종 이벤트 객체를 매개변수로 받는다. 이벤트 객체에는 클릭 이벤트와 관련된 정보가 포함되어 있다. 예를 들어, 클릭된 요소에 대한 정보, 마우스의 위치 등을 확인할 수 있다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hungry Developer</title>
</head>
<body>

    <button id = "btn"></button>

    <script>
        window.onload = function(){
            let myButton = document.getElementById('btn');
            myButton.onclick = function(event) {
                // 클릭 이벤트가 발생했을 때 실행되는 코드
                console.log("버튼이 클릭되었습니다.");
                console.log("클릭된 요소: ", event.target);
            };
        }
    </script>
</body>
</html>

클릭 이벤트가 발생했을 때 function에서 event가 매개변수로 주어지고 even.target의 실행 결과에 대한 사진입니다.
실행 결과

 

JavaScript에서 이벤트 핸들러 함수에 전달되는 event 객체는 이벤트에 대한 정보를 포함하고 있는 객체이다. 이 객체는 이벤트가 발생한 요소에 대한 정보, 이벤트 유형, 마우스 위치, 키보드 입력 등 다양한 이벤트 관련 정보를 제공한다. 이벤트 핸들러 함수에 전달되는 event 객체는 이벤트가 발생한 요소와 관련된 정보를 포함하기 때문에 이벤트 핸들러 함수 내에서 이 정보를 사용하여 원하는 동작을 수행할 수 있다. 이벤트 핸들러 함수 내에서 event 객체의 속성 및 메서드를 사용하여 이벤트 처리 로직을 작성할 수 있다. 예를 들어, 위와 같이 클릭 이벤트의 경우 event 객체는 클릭한 요소에 대한 정보를 포함하며, 이를 통해 클릭한 요소의 속성을 변경하거나 다른 동작을 수행할 수 있다.

 

 

아래는 클릭 이벤트로 event 객체를 매개변수로 전달하였을 때 event 객체로 사용할 수 있는 필드들이다.

 

필드이름 필드내용
event.type 이벤트 유형을 나타내는 문자열이다. 클릭 이벤트의 경우 "click"이 된다.
even.target 이벤트가 발생한 요소를 가리키는 참조이다. 클릭한 요소에 대한 정보를 얻을 때 유용하다.
event.currentTarget 현재 실행 중인 이벤트 핸들러가 연결된 요소를 가리키는 참조이다. 이벤트 버빌링 중에 다른 요소에서 핸들러를 호출한 경우 유용하다.
event.clientX 및 event.clientY 마우스 포인터의 현재 화면 상의 좌표이다. 클릭한 위치의 화면 좌표를 얻을 때 사용된다
event.pageX 및 event.pageY 마우스 포인터의 현재 문서 전체에서의 좌표이다. 클릭한 위치의 문서 좌표를 얻을 때 사용된다.
event.which 또는 event.button 클릭 이벤트에서 클릭한 마우스 버튼에 대한 정보이다. 왼쪽 버튼은 보통 1, 가운데 버튼은 2, 오른쪽 버튼은 3으로 표시된다.
even.shiftKey,
event.ctrlKey,
event.altKey,
event.metaKey 		키보드의 Shift, Ctrl, Alt 및 Meta(윈도우 또는 커맨드) 키의 상태를 나타낸다. 예를 들어, Shift 키가 클릭과 함께 눌렸는지 여부를 확인할 수 있다.
event.preventDefault() 기본 동작을 취소하도록 브라우저에 지시할 수 있는 메서드이다. 클릭 이벤트에서 링크 클릭과 같은 기본 동작을 막을 때 사용된다.
even.stopPropagation() 이벤트 전파를 중지하는 메서드이다. 클릭 이벤트가 다른 부모 요소로 전파되지 않도록 막을 때 사용된다.
event.timeStamp 이벤트가 발생한 타임스탬프를 나타내는 숫자이다. 보통 밀리초 단위로 표시된다.

이 외에도 다양한 이벤트 유형에 따라 사용 가능한 다른 필드도 있을 수 있다. 이러한 필드를 활용하여 클릭 이벤트 처리 로직을 작성할 수 있다.

 

 

이벤트 핸들러 제거

onclick 핸들러를 제거하려면 해당 요소의 onclick 속성에 null을 할당하거나 더 이상 실행되지 않는 다른 함수를 할당한다.

myButton.onclick = null; // 클릭 이벤트 핸들러 제거

 

 

동적 요소에 적용

onclick 핸들러는 동적으로 생성된 요소에도 적용할 수 있다. 이것은 JavaScript로 요소를 생성하고 해당 요소에 클릭 이벤트 핸들러를 추가할 때 유용하다.

const newButton = document.createElement("button");
newButton.textContent = "새로운 버튼";

newButton.onclick = function() {
  console.log("새로운 버튼이 클릭되었습니다.");
};

document.body.appendChild(newButton); // 동적으로 생성된 버튼을 문서에 추가

 

 

다양한 이벤트 타입

onclick 핸들러는 클릭 이벤트에 대한 핸들러로 사용되지만, JavaScript에서는 다양한 이벤트 유형에 대한 핸들러도 설정할 수 있다. 예를 들어, 마우스 이벤트, 키보드 이벤트, 포커스 이벤트 등을 다룰 수 있다.

myElement.onmouseover = function() {
  // 마우스를 요소 위로 가져갔을 때 실행되는 코드
};

 

 

위와 같은 방식들로 onclick 함수를 사용하여 웹 페이지의 상호 작용을 처리하고 사용자 경험을 개선할 수 있다. 클릭 이벤트 핸들러를 적절하게 활용하면 웹 애플리케이션을 보다 동적이고 사용자 친화적으로 만들 수 있다.

 

 

select 요소(드롭다운 목록)에 onclick으로 이벤트 추가

<select id="mySelect">
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
</select>
let selectElement = document.getElementById("mySelect");

selectElement.onclick = function() {
  let selectedOption = selectElement.options[selectElement.selectedIndex];
  alert("선택된 옵션: " + selectedOption.value);
};

select 요소를 가져온 후, onclick 속성을 사용하여 클릭 이벤트 처리기 함수를 할당한다. 클릭 이벤트가 발생하면 함수가 실행되며, 선택한 옵션의 값을 알림 창으로 표시한다. 하지만 주의해야 할 점은 이 방법은 하나의 이벤트 처리기만 할당할 수 있으며, 다른 클릭 이벤트 처리기 함수를 추가하려면 기존의 함수를 덮어쓰게 된다. 따라서 여러 개의 이벤트 처리기 함수를 동적으로 연결하려면 addEventListener를 사용하는 것이 더 바람직하다.

 

 

2. addEventListener()

addEventListener()도 onclick과 마찬가지로 JavaScript에서 이벤트를 처리하는 데 사용되는 메서드 중 하나이다. 요소에 이벤트 리스너(핸들러)를 추가하는 데에 주로 활용된다. 이 메서드를 사용하면 여러 종류의 이벤트(예 : 클릭, 마우스 호버, 키보드 입력 등)에 대한 리스너를 등록하고, 이벤트가 발생할 때 실행할 함수를 지정할 수 있다.

 

이벤트 유형(Event Type)

addEventListener()를 사용하여 다양한 이벤트 유형에 대한 핸들러를 등록할 수 있다. 가장 일반적인 예로 클릭 이벤트("click"), 마우스 호버 이벤트("mouseover" 및 "mouseout"), 포커스 이벤트("focus" 및 "blur") 등을 처리할 수 있다.

 

 

이벤트 핸들러 설정

addEventListener() 메서드는 두 개의 매개변수를 받는다. 첫 번째 매개변수는 등록할 이벤트 유형을 나타내며 문자열로 지정한다. 두 번째 매개변수는 이벤트가 발생했을 때 실행될 콜백 함수(이벤트 핸들러)이다.

const myElement = document.getElementById("myElement");

myElement.addEventListener("click", function() {
  // 클릭 이벤트가 발생했을 때 실행되는 코드
  console.log("요소가 클릭되었습니다.");
});

 

 

이벤트 객체(Event Object)

이벤트 핸들러 함수는 종종 이벤트 객체를 매개변수로 받는다. 이벤트 객체에는 이벤트와 관련된 정보(예 : 클릭된 요소, 마우스 위치)가 포함되어 있으며, 핸들러 함수 내에서 사용할 수 있다. (event 매개변수는 위의 onclick 함수에서 설명했던 내용과 일치하므로 생략하겠다.)

myElement.addEventListener("click", function(event) {
  console.log("클릭된 요소: ", event.target);
});

 

 

이벤트 제거

removeEventListener() 메서드를 사용하여 등록된 이벤트 핸들러를 제거할 수 있다. 이때 제거하려는 이벤트 유형과 핸들러 함수가 정확히 일치해야 한다.

function myClickHandler() {
  // 클릭 이벤트 핸들러
}

myElement.addEventListener("click", myClickHandler);

// 클릭 이벤트 핸들러 제거
myElement.removeEventListener("click", myClickHandler);

 

 

이벤트 위임

addEventListener()는 이벤트 위임 패턴을 구현하는 데 사용된다. 상위 요소에 이벤트 리스너를 추가하고, 하위 요소에서 발생한 이벤트를 상위 요소에서 처리할 수 있도록 한다. 이렇게 하면 동적으로 생성된 요소에도 쉽게 이벤트를 적용할 수 있다.

const parentElement = document.getElementById("parentElement");

parentElement.addEventListener("click", function(event) {
  if (event.target.classList.contains("childElement")) {
    // 하위 요소의 클릭 이벤트 처리
    console.log("하위 요소가 클릭되었습니다.");
  }
});

위의 예제에서 event.target.classList.contains()는 JavaScript에서 DOM 요소의 클래스를 확인하는 메서드 중 하나이다. 이 메서드를 사용하면 특정 요소의 클래스 목록에서 특정 클래스가 포함되어 있는지 확인할 수 있다. 이것은 주로 이벤트 핸들러 함수 내에서 특정 조건을 검사하거나 CSS 스타일을 동적으로 변경할 때 사용된다. event.target은 위에서 설명했다시피 이벤트가 발생한 요소의 정보를 나타내며, classList는 해당 요소의 클래스를 다루는 속성이다. contains() 메서드는 특정 클래스가 해당 요소의 클래스 목록에 포함되어 있는지 여부를 확인하여 불리언(boolean) 값을 반환한다.

 

event.target.classList.contains()의 간단한 예제

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hungry Developer</title>
</head>
<body>

    <div id="myElement" class="box active">클릭하세요</div>

    <script>
        window.onload = function(){
            // JavaScript 코드
            const myElement = document.getElementById("myElement");

            myElement.addEventListener("click", function(event) {
                if (event.target.classList.contains("active")) {
                        // "active" 클래스가 해당 요소의 클래스 목록에 포함되어 있는 경우 실행
                        console.log("클래스에 'active'가 포함되어 있습니다.");
                } else {
                        // "active" 클래스가 해당 요소의 클래스 목록에 포함되어 있지 않은 경우 실행
                        console.log("클래스에 'active'가 포함되어 있지 않습니다.");
                }
            });
        }
    </script>
</body>
</html>

위의 예제 코드에서 클릭 이벤트 핸들러 함수 내에서 event.target.classList.contains("active")를 사용하여 클릭된 요소의 클래스 목록에 "active" 클래스가 포함되어 있는지 확인한다. 따라서 클릭된 요소에 "active" 클래스가 있으면 첫 번째 메시지가 출력되고, 그렇지 않으면 두 번째 메시지가 출력된다. 이를 통해 특정 이벤트가 특정 클래스를 가진 요소에서 발생했는지 여부를 확인하여 원하는 동작을 수행할 수 있다.

 

 

select 요소(드롭다운 목록)에 addEventListener()로 이벤트 추가

<select id="mySelect">
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
</select>
// select 요소를 가져오기
let selectElement = document.getElementById("mySelect");

// 클릭 이벤트 핸들러 함수 정의
function handleSelectClick(event) {
  let selectedOption = selectElement.options[selectElement.selectedIndex];
  alert("선택된 옵션: " + selectedOption.value);
}

// select 요소에 클릭 이벤트 핸들러 연결
selectElement.addEventListener("click", handleSelectClick);

우선 getElementById 메서드를 이용하여 select 요소를 가져온다. 그 후, 클릭 이벤트 핸들러 함수 handleSelectClick을 정의하고 addEventListener를 사용하여 select 요소에 클릭 이벤트 핸들러를 연결한다. 클릭 이벤트가 발생하면 handleSelectClick 함수가 실행되며, 선택한 옵션의 값을 알림 창으로 표시한다.

 

 

addEventListener()를 사용하면 JavaScript로 웹 페이지에서 이벤트를 처리하고 사용자 상호 작용을 개선할 수 있다. 이것은 모던 웹 애플리케이션 개발에서 중요한 역할을 한다.

 

 

읽어주셔서 감사합니다.

728x90
반응형

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

[JavaScript] 자바스크립트 익명 함수(Anonymous Function)  (0) 2023.10.08
[JavaScript] 자바스크립트로 HTML 요소 가져오기  (0) 2023.10.07
[JavaScript] 자바스크립트 조건문,반복문, 논리 연산자  (0) 2023.09.19
[JavaScript] 자바스크립트 데이터 타입  (0) 2023.09.16
[JavaScript] 자바스크립트 데이터 출력하기  (0) 2023.09.10
Contents

당신이 좋아할만한 콘텐츠

댓글 0

포스팅 주소를 복사했습니다

이 글이 도움이 되었다면 공감 부탁드립니다.

SHARE

MENU

티스토리툴바