jQuery.trigger() function usage tutorial

According to feedback from netizen @Feiyang, the trigger("click") of the link tagis a special case and will not trigger the default behavior of the link click event - jump to the operation of the corresponding link, click View related details here.

events String type specifies the event type and optionalnamespace, such as "click", "focus", "keydown.myPlugin".

extraArguments Optional/Object type is the extra parameters passed in by the event processing function. If you want to pass in multiple parameters, please pass them in as an array.

eventObject Object type is an Event object, used to trigger the event processing function passed in to the object.

Thetrigger() function will pass in a default parameter for the event processing function that triggers execution, which is the Event object representing the current event.

The parameter extraArguments is used to pass in more additional parameters to the event handling function. If extraArguments is in array form, each element will serve as a parameterto thefunction.

Return value

trigger()The return value of the functionis of jQuery type and returns the current jQuery object itself.

Example & Description

Please refer to the following initial HTML code:

  CodePlayer 

First, we bind events to the above button andelements, and then use trigger () function directly triggers events, the corresponding code is as follows:

var $log = $("#log"); function handler( event, arg1, arg2 ){ var html = '
触发元素#' + this.id + '的[' + event.type +']事件，额外的函数参数为:' + arg1 + ', ' + arg2; $log.append( html ); } var $buttons = $(":button"); // 为所有button元素的click事件绑定事件处理函数 $buttons.bind( "click", handler ); // 为所有a元素的click、mouseover、mouseleave事件绑定事件处理函数 $("a").bind( "click mouseover mouseleave", handler ); // 触发所有button的click事件 $buttons.trigger("click"); /*(追加文本) 触发元素#btn1的[click]事件，额外的函数参数为:undefined, undefined 触发元素#btn2的[click]事件，额外的函数参数为:undefined, undefined */ $("#btn1").trigger("click", "CodePlayer"); /*(追加文本) 触发元素#btn1的[click]事件，额外的函数参数为:CodePlayer, undefined */ // arg1 = "张三"， arg2 = 20 $("a").trigger("mouseover", ["张三", 20 ] ); /*(追加文本) 触发元素#a1的[mouseover]事件，额外的函数参数为:张三, 20 */ $("a").trigger("mouseleave", { name: "张三", age: 18 } ); /*(追加文本) 触发元素#a1的[mouseleave]事件，额外的函数参数为:[object Object], undefined */ trigger()函数还可以根据传入事件处理函数的Event对象，来触发对应的事件。 var $btn1 = $("#btn1"); // 为btn1元素的click事件绑定事件处理函数 $btn1.bind( "click", function(event){ alert("click1"); }); // 为btn1元素的click事件绑定事件处理函数 // 如果传入了一个有效的额外参数，则再次触发click $btn1.bind( "click", function(event, arg1){ alert("click2"); if(arg1) $(this).trigger( event ); }); // $btn1.trigger( "click" ); // 调用一次click1、调用一次click2 $btn1.trigger( "click", true ); // 调用两次click1、调用两次click2

In addition, the trigger() function can also trigger only events containing a specified namespace (namespaces are supported only in 1.4.3+).

function A( event ){ alert( 'A' ); } function B( event ){ alert( 'B' ); } function C( event ){ alert( 'C' ); } var $btn1 = $("#btn1"); // 为btn1元素的click事件绑定事件处理函数 $btn1.bind( "click.foo.bar", A ); $btn1.bind( "click.test.foo", B ); $btn1.bind( "click.test", C ); // 触发btn1的click事件，不限定命名空间 $btn1.trigger("click"); // 触发A、B、C // 触发btn1的包含命名空间foo的click事件 $btn1.trigger("click.foo"); // 触发A、B // 触发btn1的包含命名空间test的click事件 $btn1.trigger("click.test"); // 触发B、C // 触发btn1的同时包含命名空间foo和test的click事件 $btn1.trigger("click.foo.test"); // 触发B

The above is the detailed content of jQuery.trigger() function usage tutorial. For more information, please follow other related articles on the PHP Chinese website!