Detailed explanation of the use of jQuery.click() function

click()Function is used to bind a handler function to the click event of each matching element. This function can also be used to trigger click events.

The click event is the mouse button click event. In addition, you can also pass some additional data to the event handling function.

In addition, you can call this function multiple times for the same element to bind multiple event handlers. When the click event is triggered, jQuery will execute the bound event processing functions in the order of binding.

To delete an event bound via click(), use the unbind() function.

This function belongs to the jQuery object (instance).

Syntax

jQueryObject.click( [ [ data ,]  handler ] )

If at least one parameter is specified, it means binding the handler function of the click event; if no parameters are specified, it means the click event is triggered.

Parameters

jQuery 1.4.3 New support: click() supports data parameters.

This in the parameter handler points to the current DOM element. click() will also pass in a parameter to the handler: the Event object representing the current event.

If the return value of the function handler is false, it means to prevent the element's default event behavior and stop the event from bubbling in the DOM tree. For example, if the handler function of the click event of the link returns false, the default URL jump behavior of the link can be prevented.

Return value

click()The return value of the function is of jQuery type and returns the current jQuery object itself.

Example & Description

Please refer to the following initial HTML code:

<input id="btn1" type="button" value="点击1" />
<input id="btn2" type="button" value="点击2" />
<a id="a1" href="http://www.365mini.com">CodePlayer</a>

Now, we bind handlers to the click events of all button elements (you can bind multiple , executed in sequence according to the binding order when triggered):

// 为所有button元素的click事件绑定处理函数
$(":button").click( function(event){
    alert( this.value + "-1" );
} );

// 为所有button元素的click事件绑定处理函数
$(":button").click( function(event){
    alert( this.value + "-2" );
} );

// 触发所有button元素的click事件
$(":button").click( ); // 调用不带任何参数的click()函数，会触发每个匹配元素的click事件

我们还可以为事件处理函数传递一些附加的数据。此外，通过jQuery为事件处理函数传入的参数Event对象，我们可以获取当前事件的相关信息(比如事件类型、触发事件的DOM元素、附加数据等)：

var user = { name: 'CodePlayer', age: 18 };
// 为所有button元素的click事件绑定处理函数
$(":button").click( user, function(event){
    alert( event.data.name ); // CodePlayer
} );

如果通过click()函数绑定的事件处理函数的返回值为false，则可以阻止元素的默认事件行为，并停止事件在DOM树中冒泡。例如链接的click事件的处理函数返回false，可以阻止链接的默认URL跳转行为。

// 点击链接时，阻止链接跳转
$("a").click( function(){
    return false;
} );

The above is the detailed content of Detailed explanation of the use of jQuery.click() function. For more information, please follow other related articles on the PHP Chinese website!