Detailed graphic explanation of three methods of jQuery button click event-JS Tutorial-php.cn

Detailed graphic explanation of three methods of jQuery button click event

yulia

Release： 2018-10-12 10:25:36

Original

9193 people have browsed it

jQuery is a framework based on JavaScript. It is widely used because of its simplicity and convenience. Do you know how to set the click event of the jQuery button? This article will tell you about the method of jQuery click triggering event. It has certain reference value. Interested friends can refer to it.

The previous article told you how to handle button click events in JavaScript. If you need it, you can take a look. Next, we will directly explain the jQuery button click event.

Note: When using jQuery, you must first introduce the jQuery file

Method 1. $ ("button").click(function () { })

A click event occurs when an element is clicked. The click() method can trigger a click event, which stipulates that the function will be run when a click event occurs.

Syntax: $(selector).click(function)

Example: When the button is clicked, the click event is triggered and the dialog box pops up a piece of content.

The code is as follows:

<!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>

Copy after login

Rendering:

##Method 2. $("button ").on("click",function () { })

on() method can add one or more events to the selected element and sub-element. If you need to delete the event, you can use off() method.

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

The code is as follows:

<!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>

Copy after login

Method 3, $("button" ).bind("click",function(){ })

bind() method can add one or more events to the selected element, and the function will be run when the event occurs.

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

The code is as follows:

<!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>

Copy after login

The above introduces three types of button click events in jQuery Methods vary. As for which method to choose, it also depends on work needs and personal habits. Beginners can try it themselves. I hope this article can help you!

For more related tutorials, please visit

jQuery Video Tutorial

The above is the detailed content of Detailed graphic explanation of three methods of jQuery button click event. For more information, please follow other related articles on the PHP Chinese website!