[JavaScript] 이벤트 리스너 1회 실행 / 삭제

zenghyun 2023. 1. 10. 15:12

이벤트 리스너를 1회만 실행하는 법과 삭제하는 법에 대해 알아보자

[ 이벤트 리스너 1회 실행하기 ]

addEventListener()의 세 번째 인수에 옵션을 지정할 수 있다. 반드시 옵션을 설정할 필요는 없으며, 필요에 따라 설정이 가능하다.

세 번째 인수로 지정할 수 있는 옵션은 다음과 같다.

옵션	의미	타입
capture	이벤트 캡쳐 여부	진릿값
once	리스너 1회 실행 여부	진릿값
passive	패시브 이벤트 여부	진릿값

다음 예제를 보자

<!DOCTYPE html>
<html lang="en">
<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">
  <title>Document</title>
</head>
<body>
  <button>버튼</button>
  <script>
    const option = {
      once : true
    };

    const btn = document.querySelector('button');
    btn.addEventListener('click', onClick, option );

    function onClick() {
      alert('이벤트는 한 번만 실행할 수 있어요');
}
</script>
</body>
</html>

버튼을 눌렀을 때 이벤트는 한 번만 발생하고 그 이후로는 발생하지 않는다.

[ 이벤트 리스너 삭제하기 ]

removeEventListener()를 사용해 이벤트 리스너 삭제가 가능하며, 이벤트 감시 작업을 취소할 수 있다.

<!DOCTYPE html>
<html lang="en">
<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">
  <title>Document</title>
</head>
<body>
  <button>버튼</button>

  <script>

    const btn = document.querySelector('button');
    btn.addEventListener('click', onClick);

    setTimeout(() => {
      btn.removeEventListener('click', onClick);
      console.log('Event 삭제');
    },3000)

    function onClick() {
      alert('반가워요');
    }
</script>
</body>
</html>

페이지가 실행되고 3초까지는 버튼을 누르면 alert 창이 나오지만 그 이후로는 나오지 않는다.

저작자표시 비영리 (새창열림)