사용된 HTML

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script defer src="main.js"></script>
    <link rel="stylesheet" href="main.css" />
    <title>JS practice</title>
  </head>
  <body>
    <div class="btns">
      <button id="id_button">ID</button>
      <button class="class-button">CLASS</button>
      <button class="class-button">CLASS2</button>
      <button class="class-button">CLASS3</button>
    </div>
  </body>
</html>

기본적인 이벤트 핸들러 등록하는 방법

1. 자바스크립트에서 onclick 함수 이용하기

const helloBtnById = document.getElementById("id_button");

helloBtnById.onclick = () => {
  console.log("ID"); //ID출력
};

2. HTML에서 onclick 속성으로 추가하기

<button id="id_button" onclick="console.log('ID')">ID</button>

값: id버튼을 세번눌렀습니다.

함수로 이벤트 핸들러 다루기

사용된 HTML

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="main.css" />
    <script defer src="main.js"></script>
    <title>JS practice</title>
  </head>
  <body>
    <div>
      <button class="button-red">Hello</button>
      <button class="button-blue">Hello2</button>
    </div>
  </body>
</html>

1. element.addEventListener("type", callback)

이벤트 추가하기, callback 부분은 콜백함수를 의미한다.

예시:

const btn_1 = document.querySelector(".button-red");
const btn_2 = document.querySelector(".button-blue");

btn_1.addEventListener("click", () => {
  console.log("hello");
});

2. element.removeEventListener("type", callback)

이벤트 삭제하기, 이벤트를 지우기 위해서는 callback함수의 이름을 알아야한다. 만약 위 예제와 같이 익명함수로 사용한다면 함수에 접근할 방법이 없기 때문에 이벤트를 삭제할 수 없다.

const btn_2 = document.querySelector(".button-blue");

const handleEvent1 = () => {
  console.log("hello");
};

btn_1.addEventListener("click", handleEvent1); // 첫번째 이벤트 등록

btn_2.addEventListener("click", () => {
  btn_1.removeEventListener("click", handleEvent1); //두번째 버튼 클릭 시 첫번째 버튼 이벤트 삭제
});

이벤트 한번만 실행시키기

이벤트를 한번만 실행시키고 싶다면 ,{once:true}를 추가하면 된다.

const btn_1 = document.querySelector(".button-red");
const btn_2 = document.querySelector(".button-blue");

btn_1.addEventListener("click", () => {
  console.log("hello");
}, {once : true});

'JS' 카테고리의 다른 글

[JS] 요소 다루기 정리  (0) 2023.04.21
[JS] 자바스크립트 태그 선택하기  (0) 2023.04.20
[JS]모듈(Module) 모듈화(Modularization)/ Import/Export  (0) 2023.04.06
[JS] 다양한 배열 메소드  (0) 2023.04.06
[JS] 에러 객체와 try catch문  (0) 2023.04.05

+ Recent posts

티스토리툴바