그럼에도 불구하고

👨‍💻

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

JavaScript/JavaScript basics

[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 창이 나오지만 그 이후로는 나오지 않는다.

 

저작자표시 비영리

'JavaScript > JavaScript basics' 카테고리의 다른 글

[JavaScript] 정규표현식이란?  (0) 2023.01.16
[JavaScript] 마우스 이벤트란?  (0) 2023.01.10
[JavaScript] FileReader 객체에 대해 알아보자  (0) 2023.01.05
[JavaScript] encodeURI / decodeURI란?  (0) 2023.01.03
[JavaScript] this에 대해 알아보자  (0) 2022.12.30
'JavaScript/JavaScript basics' Related Articles more
Comments