jQuery - 버튼을 한 번 누른 후 비활성으로 변경하는 방법

2022. 3. 5. 18:51

▶ 이벤트 제거 방법

unbind(eventType)
→ eventType은 클릭, 더블클릭 등 다양한 이벤트를 나타내며, 지정한 eventType에 연결되어 있는 모든 이벤트 핸들러는
실행되지 않는다.
unbind()
→ 파라미터가 없으면 모든 이벤트가 제거된다.

예를 들어 버튼을 한번 클릭하고 이 누른 버튼을 비활성으로 변경하는 방법 중 이벤트를 제거하는

방법이 있다.

예)

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  <script>
    $(document).ready(function(){
        $('.button').on('click', function(){
           alert('클릭이 되었습니다.');
          $('.button').unbind('click');
        });
    });
  </script>
  <title>JS Bin</title>
</head>
<body>
  <button class="btn-1 button">1번 버튼</button>
</body>
</html>

위 코드에서 버튼 이벤트 핸들러에 안에 unbind('click')라는 메서드를 넣어 놨다.

저 click이라는 이벤트 핸들러는 한 번 클릭 후에 이벤트가 제거가 되어 다시 클릭해도

alert 이 찍히지 않을 것이다.

아래 코드의 경우를 보자.

$('.button').on('click', function(e){
    alert('이런 경우는?');
  $('.button').unbind('dblclick');
});

이런 경우는 어떻게 될까?

이벤트 핸들러는 클릭으로 선언을 했고, 비활성화(이벤트 제거) 메서드에 들어간 이벤트 타입은

더블클릭으로 해놨다. 이런 경우도 마찬가지로 클릭에 대한 이벤트는 없어지지 않는다.

즉, 선언된 이벤트와 unbind의 이벤트 타입(eventType)은 항상 같아야 한다. 이게 귀찮다면

$('.button').unbind();

이렇게 하면 모든 이벤트는 제거가 된다.

이제 다른 경우를 살펴보자.

버튼의 개 수를 늘려서 각 누른 버튼마다 비활성화하는 방법을 알아보자.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  <script>
    $(document).ready(function(){
        $('.button').on('click', function(e){
          $('#'+e.target.id).unbind('click');
          console.log(e.target.id + '이 버튼이 클릭이 되었고 이제 이 버튼은 비활성화 됩니다.')
        });
    });
  </script>
  <title>JS Bin</title>
</head>
<body>
  <button class="button" id="btn-1">1번 버튼</button>
  <button class="button" id="btn-2">2번 버튼</button>
  <button class="button" id="btn-3">3번 버튼</button>
  <button class="button" id="btn-4">4번 버튼</button>
</body>
</html>

버튼을 4개 만들고 버튼 이벤트의 target 속성을 이용하여 각 누른 버튼을 비활성화를 시켰다.

각 누른 버튼을 식별하기 위해 버튼의 id를 다르게 기입했고, 이제 버튼이 클릭이 되면 클릭된 target

의 id를 가지고 unbind를 사용하여 이벤트를 제거를 했다.

이렇게 하면 결과는 4개의 버튼은 한 번씩만 클릭이 되고 두 번 클릭 시에는 아무런 동작을 하지 않게 된다.

저작자표시 비영리 변경금지

'web 언어 > jQuery' 카테고리의 다른 글

jQuery - 엘리먼트가 focus(포커스)를 얻고 잃을 때 이벤트 (0)	2022.03.06
jQuery - 마우스 이벤트 관련, 왼쪽/오른쪽 클릭 된 곳 알아내기 (0)	2022.03.05
jQuery - 자동으로 이벤트 발생 시키는 방법 (0)	2022.03.05
jQuery - button event(버튼 이벤트) 어느 버튼 클릭했는지 알아야 할 때 (0)	2022.03.05
jQuery - html 문서 로드 후 자바스크립트 실행 (0)	2022.03.03

열공의 기록