jQuery 버튼 클릭 이벤트의 세 가지 방법에 대한 자세한 그래픽 설명-JS 튜토리얼-php.cn

jQuery 버튼 클릭 이벤트의 세 가지 방법에 대한 자세한 그래픽 설명

yulia

풀어 주다： 2018-10-12 10:25:36

원래의

9154명이 탐색했습니다.

jQuery는 JavaScript 기반의 프레임워크이며 단순성과 편리성 때문에 널리 사용됩니다. jQuery 버튼의 클릭 이벤트를 설정하는 방법을 알고 계시나요? 이 기사에서는 jQuery 클릭 트리거 이벤트의 방법에 대해 설명합니다. 관심 있는 친구는 이를 참조할 수 있습니다.

이전 글에서는 JavaScript에서 버튼 클릭 이벤트를 처리하는 방법에 대해 설명했습니다. 필요한 경우 살펴보시면 됩니다. 다음으로 jQuery 버튼 클릭 이벤트에 대해 직접 설명하겠습니다.

참고: jQuery를 사용할 때 먼저 jQuery 파일

메서드 1, $("button").click(함수( ) { })

요소를 클릭하면 클릭 이벤트가 발생합니다. click() 메서드는 클릭 이벤트가 발생할 때 함수가 실행되도록 규정하는 클릭 이벤트를 트리거할 수 있습니다.

구문: $(selector).click(function)

예: 버튼을 클릭하면 클릭 이벤트가 트리거되고 대화 상자에 콘텐츠가 팝업됩니다.

코드는 다음과 같습니다.

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
 </head>
 <body>
  <button>click</button>
 </body>
 <script type="text/javascript">
  $(document).ready(function(){
    $("button").click(function(){
     alert("祝你好运");
    });
  });
 </script>
</html>

로그인 후 복사

렌더링:

방법 2. $("button").on("click",function () { })

on() 방법 선택한 요소 및 하위 요소에 하나 이상의 이벤트 추가에서 찾을 수 있습니다. 이벤트를 삭제해야 하는 경우 off() 메서드를 사용할 수 있습니다.

구문: $(selector).on(event,childSelector,data,function)

코드는 다음과 같습니다.

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
 </head>
 <body>
  <button>点我</button>
 </body>
 <script type="text/javascript">
  $(document).ready(function(){
    $("button").on("click",function(){
      alert("have a nice day ");
    });
  });
 </script>
</html>

로그인 후 복사

메서드 3, $("button").bind("click",function() { })

bind() 메서드는 선택한 요소에 하나 이상의 이벤트를 추가할 수 있으며 이벤트가 발생할 때 함수가 실행됩니다.

Syntax: $(selector).bind(event,data,function,map)

코드는 다음과 같습니다.

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
 </head>
 <body>
  <button>按钮</button>
 </body>
 <script type="text/javascript">
  $(document).ready(function(){
    $("button").bind("click",function(){
      alert("阳光总在风雨后");
    });
  });
 </script>
</html>

로그인 후 복사

위는 jQuery에서 버튼 클릭 이벤트의 세 가지 방법을 소개하며 각각 다릅니다. 선택 방법은 업무 요구 사항과 개인 습관에 따라 다릅니다. 이 기사가 도움이 되기를 바랍니다.

더 많은 관련 튜토리얼을 보려면 jQuery 비디오 튜토리얼

을 방문하세요.

위 내용은 jQuery 버튼 클릭 이벤트의 세 가지 방법에 대한 자세한 그래픽 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!