Advanced Events (i)

jquery not only encapsulates a large number of commonly used event handling, but also provides a number of advanced events for developers to use. such as simulating user-triggered events, event-delegate events, and unified integration on and off, and one method that executes only once. These methods greatly reduce the developer's difficulty and enhance the developer experience.

Analog Operation

Sometimes we need some action to simulate the behavior of the user when the event is triggered. For example: When the page is loaded, click on a button to trigger an event instead of the user clicking.

HTML (partial) code:

<type= "button"  value= "pushbutton"/>

jquery Code:

// Click on the button event $ ("input"). Click (function() {    alert ("I'm going to trigger with a simulated user action!") ");}); // Simulate user click action $ ("input"). Trigger ("click");

You can also merge two methods:

$ ("Input"). Click (function() {    alert ("I'm going to use an impersonation user action to trigger!"). ");}). Trigger ("click");

Sometimes when simulating user behavior, we need to pass parameters to the event execution, which is similar to Event.data's extra data, which can be numbers, strings, arrays, objects.

Such as:

$ ("Input"). Click (function(e,data1,data2) {    + "|" + DATA2);}). Trigger ("click", ["123", "ABC"]);

Note: Trigger extra data, there is only one time, you can omit the brackets, a number of lines can not be omitted, the second one is not recognized. Such as:

$ ("Input"). Click (function(e,data1,data2) {    + "|" + data2);  // 123|undefined}). Trigger ("click", "123", "abc");

Note: When a value is passed, it can be passed directly. When the value is above two, it needs to be enclosed in brackets before and after. But it cannot be thought of as an array form , and here is a complex explanation.

$ ("Input"). Click (function(e,data1,data2,data3,data4) {    + "|" + data2 + "|" +data3[1] + "|" + DA Ta4.user);}). Trigger ("click", ["123", "abc", ["a", "B", "C"],{user: "Lee"}]);

Note: Get extra data through Event.data.

{User: ' Lee '} function (e,data1,data2,data3,data4) {    e.data.user);}). Trigger ("click", ["123", "abc", ["a", "B", "C"],{user: "Lee"}]);

In addition to being triggered by a JavaScript event name, it can also be triggered by a custom event, which is actually an arbitrary function that is bound by the. bind ().

// Click,mouseover These system events, custom events are the events of their own names function () {    alert ("custom Event");}). Trigger ("MyEvent");

The. Trigger () method provides a shorthand scheme that simply calls an empty event of the same name if you want an event to perform a simulated user behavior.

$ ("Input"). Click (function() {    alert ("I'm going to use an impersonation user action to trigger!"). "// Empty Click () is performed by Trigger ()

This convenient method, jquery almost all common events are provided.

Blur	Focusin	MouseDown	Resize
Change	Focusout	MouseEnter	Scroll
Click	KeyDown	MouseLeave	Select
DblClick	KeyPress	MouseMove	Submit
Error	KeyUp	Mouseout	Unload
Focus	Load	MouseOver

jquery also provides another way to simulate user behavior:. Triggerhandler (); The use of this method is the same as the. Trigger () method.

$ ("Input"). Click (function() {    alert ("I'm going to use an impersonation user action to trigger!"). ");}). Triggerhandler ("click");

In general usage situations, there is little difference between the two, both simulating user behavior and passing additional parameters. In some special cases, however, the difference arises:

The ①.triggerhandler () method does not trigger the default behavior of the event, while. Trigger () will.

HTML (partial) code:

<action= "123.html">    <type  = "Submit"  value= "button"/></form>

The jquery code is as follows:

// trigger jump after commit, no default behavior blocked // impersonate the user to execute the submission and jump to the execution page // trigger no jump after commit, default behavior is blocked // impersonate a user to perform a commit and block the default behavior

If we want to use. Trigger () to impersonate a user commit and block the default behavior of the event, you need to write this:

$ ("form"). Submit (function(e) {    // block default behavior }). Trigger ("submit");

The ②.triggerhandler () method affects only the first matched element, and. Trigger () affects all.

The HTML (part) code is as follows:

<type= "button"  value= "pushbutton"/><   type= "button"  value= "pushbutton"/><   type= "button"  value= "pushbutton"/>

jquery Code:

$ ("Input"). Click (function() {    alert ("I'm going to use an impersonation user action to trigger!"). ");}). Click ();

Or

$ ("Input"). Click (function() {    alert ("I'm going to use an impersonation user action to trigger!"). ");}). Trigger ("click");

The above two lines of code are equivalent, and will affect all elements, which will pop up 3 dialog boxes.

Look at the jquery code again:

$ ("Input"). Click (function() {    alert ("I'm going to use an impersonation user action to trigger!"). ");}). Triggerhandler ("click");

The above code only affects the first matching element, which only pops up a dialog box.

The ③.triggerhandler () method returns the return value of the current event execution, returns undefined if there is no return value, and. Trigger () Returns the JQuery object that currently contains the event trigger element (convenient chaining concatenating calls).

HTML (partial) code:

<type= "button"  value= "pushbutton"/>

The jquery code is as follows:

Alert ($ ("Input"). Click (function() {    alert ("I'm going to use an impersonation user action to trigger!"). ");}). Trigger (//[Object Object]

. Trigger () Returns the JQuery object that currently contains the event trigger element (easy chaining concatenating call):

$ ("Input"). Click (function() {    alert ("I'm going to use an impersonation user action to trigger!"). ");}). Trigger (// return jquery object, you can concatenating

Alert ($ ("Input"). Click (function() {    alert ("I'm going to use an impersonation user action to trigger!"). ");     return 123;}). Triggerhandler (// return 123, no return returned undefined

So. Triggerhandler () is not a chained concatenating call:

$ ("Input"). Click (function() {    alert ("I'm going to use an impersonation user action to trigger!"). ");     return 123;}). Triggerhandler (// returns return value, or undefined

④.trigger () bubbles up when the event is created, but this bubbling is a custom event to manifest, a mechanism for jquery to extend to the DOM, not a DOM feature, and. Triggerhandler () does not bubble.

The HTML (part) code is as follows:

<Divclass= "D1">    <Divclass= "D2">        <Divclass= "D3">Div</Div>    </Div></Div>

jquery Code:

function () {    alert ("custom Event");}); $ (". D3"). Trigger ("MyEvent"); // will bubble

function () {    alert ("custom Event");}); $ (". D3"). Triggerhandler ("MyEvent"); //

name Space

Sometimes, we want to remove the event. However, it is often troublesome to remove an event with the same name as an element binding, which can be resolved using the event's namespace.

Previous practice:

function () {    alert ("abc");}); $ (function() {    alert ("XYZ");}); $ (// This will remove the Click event

The way it is now:

$ ("input"). Bind ("click. ABCfunction() {    alert (" abc ");}); $ ("input"). Bind ("click. xyzfunction() {    alert (" XYZ ");}); $ ("input"). Bind ("MouseOver. ABCfunction() {    alert (" abc ");}); $ (// Remove the name space in the click event for ABC

Note: You can also use ('. ABC ') directly, so that you can remove different events from the same namespace. For analog operations. Trigger () and. Triggerhandler (), the usage is the same.

$ ("input"). Unbind (". abc");

// just pop up the ABC dialog box

Advanced Events (i)