In jquery, you can use triggerhandler to design custom events, such as general events:
$ ('# Id'). On ("click", function (){
Alert ("item clicked ");
}
);
For custom events, we generally expect the following results:
$ ('# Id'). On ("test. Says. Hello", function ()
{
Alert ("Hello Cory ");
});
This is called a custom event. For example, if a jquery plug-in is provided, such as the lightbox effect
$ (Function (){
$ ('# Id'). On ("lightbox. Open", function (){
Alert ("The lightbox just opened. Woo! ");
});
});
You must write the following custom events:
Function open (){
$ ('# Id') triggerhandler ({type: "lightbox. Open "});
}
If the custom event requires parameter data transmission
$ ('# Id'). triggerhandler ({
Type: "lightbox. Open ",
Var1: 'Howdy ',
Information: 'I could pass something here also'
});
When calling:
$ (Function (){
$ ('# Id'). On ("lightbox. Open", function (o ){
Alert (O. var1 + "-" + O. information );
});
}
);
The differences between trigger and triggerhandler are as follows:
Triggerhandler () method triggers the specified event type of the selected element. However, it does not execute the default browser action or generate event bubbles.
The triggerhandler () method is similar to the trigger () method. The difference is that it does not trigger the default behavior of events (such as form submission), and only affects the First Matching Element.
Differences from the trigger () method
It does not cause the default behavior of events (such as form submission ).
. Trigger () will operate on all elements matched by the jquery object, while. triggerhandler () only affects the First Matching Element.
Events created by. triggerhandler () do not bubble in the DOM tree; if the target elements do not directly process them, nothing will happen.
The returned value of this method is the return value of the event processing function, rather than the chained jquery object. In addition, if not processedProgramTriggered, then this method returns undefined.
The differences are as follows:
<! Doctype HTML public "-// W3C // dtd html 4.01 transitional // en" "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8">
<Title> insert title here </title>
<SCRIPT type = "text/JavaScript" src = "scripts/jquery-1.3.2.min.js"> </SCRIPT>
<SCRIPT type = "text/JavaScript">
$ (Function (){
$ ("# Txtcontent"). Focus (function (){
$ ("# DV" ).html ($ ("# DV" ).html () + "focus is triggered. ");
});
$ ("# Btntrigger"). Click (function (){
$ ("# Txtcontent"). Trigger ('focal ');
Return false;
});
$ ("# Btntriggerhandler"). Click (function (){
$ ("# Txtcontent"). triggerhandler ('focal ');
});
});
</SCRIPT>
</Head>
<Body>
<Form ID = "myform" Action = "">
<Input type = "text" id = "txtcontent" name = "txtcontent" size = "20"/>
<Input type = "button" id = "btntriggerhandler" name = "btntriggerhandler" value = "triggerhandler"/>
<Input type = "button" id = "btntrigger" name = "btntrigger" value = "Trigger"/>
<Div id = "DV">
</Div>
① When trigger is used, the bound focus event is triggered first, and then the focus is obtained in the text box, which triggers the default
Focus event, so trigger will have two outputs.
② Compared with trigger, triggerhandler only triggers the bound focus, rather than the default events of the browser.
Only one output
</Form>
</Body>
</Html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
