SeouliteLab

jQuery .dblclick() 메소드를 활용한 이벤트 처리 본문

프로그래밍

jQuery .dblclick() 메소드를 활용한 이벤트 처리

Seoulite Lab 2024. 4. 2. 08:27

jQuery의 .dblclick() 메소드는 요소에 더블클릭 이벤트 핸들러를 추가하는 데 사용됩니다. 더블클릭 이벤트는 사용자가 요소를 두 번 연속으로 클릭할 때 발생합니다.

예제 1: 요소 스타일 변경

<!DOCTYPE html>
<html>
<head>
  <title>jQuery .dblclick() 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $('#myDiv').dblclick(function(){
        $(this).css('background-color', 'yellow');
      });
    });
  </script>
</head>
<body>

<div id="myDiv" style="width: 200px; height: 100px; background-color: lightblue;"></div>

</body>
</html>

결과:

  • myDiv 요소를 더블클릭하면 배경색이 노란색으로 변경됩니다.

설명:
이 예제에서는 .dblclick() 메소드를 사용하여 myDiv ID를 가진 요소에 더블클릭 이벤트 핸들러를 추가합니다. 요소를 더블클릭하면 해당 요소의 배경색이 노란색으로 변경됩니다.

예제 2: 텍스트 변경

<!DOCTYPE html>
<html>
<head>
  <title>jQuery .dblclick() 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $('#myParagraph').dblclick(function(){
        $(this).text('더블클릭으로 텍스트가 변경되었습니다!');
      });
    });
  </script>
</head>
<body>

<p id="myParagraph">더블클릭하세요</p>

</body>
</html>

결과:

  • 문장을 더블클릭하면 텍스트가 "더블클릭으로 텍스트가 변경되었습니다!"로 변경됩니다.

설명:
이 예제에서는 .dblclick() 메소드를 사용하여 myParagraph ID를 가진 문장에 더블클릭 이벤트 핸들러를 추가합니다. 문장을 더블클릭하면 해당 문장의 텍스트가 변경됩니다.

예제 3: 요소 숨김/보임 토글

<!DOCTYPE html>
<html>
<head>
  <title>jQuery .dblclick() 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $('#toggleElement').dblclick(function(){
        $(this).toggle();
      });
    });
  </script>
</head>
<body>

<div id="toggleElement" style="width: 200px; height: 100px; background-color: lightblue;">더블클릭하세요</div>

</body>
</html>

결과:

  • 요소를 더블클릭하면 해당 요소가 숨겨지거나 보이게 됩니다.

설명:
이 예제에서는 .dblclick() 메소드를 사용하여 toggleElement ID를 가진 요소에 더블클릭 이벤트 핸들러를 추가합니다. 요소를 더블클릭하면 해당 요소의 숨김/보임 상태가 토글됩니다.

예제 4: 요소 복사

<!DOCTYPE html>
<html>
<head>
  <title>jQuery .dblclick() 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $('#myText').dblclick(function(){
        $(this).clone().appendTo('body');
      });
    });
  </script>
</head>
<body>

<p id="myText">더

블클릭하여 이 문장을 복사하세요</p>

</body>
</html>

결과:

  • 문장을 더블클릭하면 해당 문장이 복사되어 페이지에 추가됩니다.

설명:
이 예제에서는 .dblclick() 메소드를 사용하여 myText ID를 가진 문장에 더블클릭 이벤트 핸들러를 추가합니다. 문장을 더블클릭하면 해당 문장이 복사되어 페이지에 추가됩니다.

예제 5: 요소 삭제

<!DOCTYPE html>
<html>
<head>
  <title>jQuery .dblclick() 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $('#deleteElement').dblclick(function(){
        $(this).remove();
      });
    });
  </script>
</head>
<body>

<div id="deleteElement" style="width: 200px; height: 100px; background-color: lightblue;">더블클릭하여 요소를 삭제하세요</div>

</body>
</html>

결과:

  • 요소를 더블클릭하면 해당 요소가 삭제됩니다.

설명:
이 예제에서는 .dblclick() 메소드를 사용하여 deleteElement ID를 가진 요소에 더블클릭 이벤트 핸들러를 추가합니다. 요소를 더블클릭하면 해당 요소가 삭제됩니다.

jQuery의 .dblclick() 메소드를 사용하면 웹 페이지에서 더블클릭 이벤트를 처리할 수 있습니다. 더블클릭 이벤트를 활용하여 요소의 동작을 변경하거나 사용자에게 피드백을 제공할 수 있습니다.

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

'프로그래밍' 카테고리의 다른 글

이벤트 해제를 위한 jQuery .die() 메소드  (0) 2024.04.02
이벤트 위임을 위한 jQuery .delegate() 메소드  (0) 2024.04.02
jQuery .contextmenu() 메소드를 활용한 이벤트 처리  (0) 2024.04.02
클릭 이벤트 처리를 위한 jQuery .click() 메소드  (0) 2024.04.02
jQuery .change() 메소드를 활용한 이벤트 처리  (0) 2024.04.02
'프로그래밍' Related Articles more