Definition and usage of click events in jQuery

  • 2020-05-07 19:14:22
  • OfStack

This article illustrates the definition and use of click events in jQuery. Share with you for your reference. Specific analysis is as follows:

The click event is triggered when the mouse pointer is over the matching element, then the left mouse button is pressed and released, or the click() method is called.

The click() method can also bind event handling methods.

Grammar structure 1:
Triggers the click event.

$(selector).click()

Grammar structure 2:
Bind event handling methods for click events.

$(selector).click(data,function)

parameter list:

参数 描述
data 可选。定义传入供function处理的数据。
function 定义click事件触发时运行的函数。

instance code:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="//www.ofstack.com/" />
<title>click The event - The home of the script </title>
<style type="text/css">
div{
  width:200px;
  height:200px;
  border:5px solid green;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("div").text(" This was added later ");
  })
  $("p").dblclick(function(){
    $("button").click();
  })
})
</script>
</head>
<body>
<div></div>
<p> Double click on me to trigger click The event </p>
<button> Click-triggered event </button>
</body>
</html>

The above code sets the new text in div when double-clicking the p element or clicking the button.

I hope this article has been helpful to your jQuery programming.


Related articles: