Event | Notion

Untitled

어떠한 버튼을 클릭했을 때 어떠한 액션이 일어나게 하려면 어떻게 해야 할까요?

Event Listener

위와 같이 마우스를 이용해서 버튼을 클릭할 때는 클릭 "이벤트"가 발생합니다.

이렇게 이벤트가 발생했을 때 어떠한 액션을 위한 함수를 호출하는데 그 함수가 바로 이벤트 리스너 입니다.

addEventListener()

위에서 말한 것 처럼 어떠한 이벤트가 발생했을 때 이벤트 리스너를 호출하기 위해서는 이벤트 리스너를 해당 객체나 요소에 등록해줘야 합니다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="<https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css>" />
    <link rel="stylesheet" href="<https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css>" />
    <script src="<https://cdn.jsdelivr.net/npm/[email protected]/dst/js/bootstrap.bundle.min.js>"></script>
  </head>
  <body>
    <div id="body-container" class="container mt-5">
      <a>Hi</a>
      <p id="text">Hello</p>
      <button class="btn">Button</button>

      <ul class="list-group mt-5 mb-5">
        <li class="list-group-item">An item</li>
        <li class="list-group-item">A second item</li>
      </ul>
    </div>

    <script src="event.js"></script>
  </body>
</html>

자바스크립트 코드에서 프로퍼티로 등록

window.onload = () => {
  // 문서가 load 될 때 이 함수 실행
  let text = document.getElementById("text");
  // 아이디가 'text'인 요소를 return
  text.innerHTML = "HTML 문서 loaded";
};

HTML 태그에 속성으로 등록

<button onclick="alert('버튼이 클릭됐습니다.')">Button입니다.</button>

addEventListener 메소드를 사용

element.addEventListener(이벤트명*, 실행할 함수명(listener), 옵션*);

const aElemnt = document.querySelector("a");
aElemnt.addEventListener("click", () => {
  alert("a element clicked");
});

Event 객체

이벤트가 발생할 때 이벤트 객체를 가져올 수 있습니다.

const buttonElement = document.querySelector(".btn");
buttonElement.addEventListener("click", handleClick);
function handleClick(event) {
  let val;
  val = event;

  // Event target element
  val = event.target;
  val = event.target.id;
  val = event.target.className;
  val = event.target.classList;

  // Event type
  val = event.type;

  // 윈도우로부터의 거리 좌표
  val = event.clientY;
  val = event.clientX;

  // 요소로부터의 거리 좌표
  val = event.offsetY;
  val = event.offsetX;

  console.log(val);
}