In today's Web browser handling events is a little difficult part of different browsers handling events in different ways. Therefore, to overcome these cross-browser problems, one can take advantage of the jquery event-handling APIs.
jquery is a small JavaScript library that provides a broad range of APIs to handle different browser events and effects and much more. Read more about handling user interface effects using JavaScript browsers. In this tutorial, we'll explore different API jquery to handle different browser events.
Page Load Event
Ready (FN),
This is based on the support of all types of events, jquery. You may want to set the form focus when the page is loaded or do some UI effects.
Copy Code code as follows:
$ (document). Ready (function () {
$ ("P"). Text ("The DOM is now loaded and can manipulated.");
});
Event Handling
Binding (type, data, FN),
You may want to bind any element that handles one or more events (click/Double-click, and so on). Use this feature to combine an event handler for any element custome.
Copy Code code as follows:
$ ("P"). Bind ("click", Function (e) {
var str = "(" + E.pagex + "," + E.pagey + ")";
$ ("span"). Text ("click happened!" + str);
});
$ ("P"). Bind ("DblClick", function () {
$ ("span"). Text ("Double-click happened in" + this.tagname);
});
$ ("P"). Bind ("MouseEnter mouseleave", function (e) {
$ (this). Toggleclass ("over");
});
Trigger (event, data)
Triggers events on every matching element,
This will also cause the browser to have the same name (if any) to perform the default action. For example, the ability to trigger () will also cause the browser to submit a form's submit. Returns one of the functions bound to an event the false default behavior can be prevented.
Triggered events are not limited to browser-based events, you can also customize events to trigger binding registrations.
Copy Code code as follows:
$ ("Button:first"). Click (function () {
Update ($ ("Span:first"));
});
$ ("Button:last"). Click (function () {
$ ("Button:first"). Trigger (' click ');
Update ($ ("span:last"));
});
function Update (j) {
var n = parseint (J.text (), 10);
J.text (n + 1);
}
Interactive Support Activities
In today's Web 2.0 applications, User intraction processing is very important. jquery provides some APIs that can be used to handle these interactions. Hover (extra) This feature provides a hover function, i.e. when the mouse cursor moves to a matching element, the first specified feature is dismissed. When the mouse moves the element, the second specifies the function of the fire. Also, check the place to see if the mouse is still in the specified element (for example, a div inside the image), and if so, it will continue to "wander" and not move out (a common error in using the Mouseout event handler).
Copy Code code as follows:
$ ("Li"). Hover (
function () {
$ (this). Append ($ ("<span> ***</span>"));
},
function () {
$ (this). Find ("Span:last"). Remove ();
}
);
support Other Activities
The following are features that can be used to handle different types of event manifests.
Blur ()
: Triggers the Blur event for each matching element.
Copy Code code as follows:
$ ("input"). blur (function () {
$ (this). Next ("span"). CSS (' Display ', ' inline '). fadeout (1000);
});
Blur (FN)
: Binds a handler function in the Blur event for each matching element.
[Code]
$ ("input"). blur (function () {
$ (this). Next ("span"). CSS (' Display ', ' inline '). fadeout (1000);
});
(FN)
: Bind a feature in the Change event for each matching element.
Copy Code code as follows:
$ ("select"). Change (function () {
var str = "";
$ ("Select Option:selected"). each (function () {
STR + $ (this). Text () + "";
});
$ ("div"). Text (str);
})
. change ();
Click (FN)
: The function of the click event that is bound to each matching element.
Copy Code code as follows:
$ ("P"). Click (function () {
$ (this). Slideup ();
});
$ ("P"). Hover (function () {
$ (this). addclass ("Hilite");
}, function () {
$ (this). Removeclass ("Hilite");
});
Double-click (FN)
: Triggers the DblClick event for each matching element.
Copy Code code as follows:
var Divdbl = $ ("Div:first");
Divdbl.dblclick (function () {
Divdbl.toggleclass (' dbl ');
});
Press Key (FN)
: A feature is bound in the KeyPress event for each matching element.
Copy Code code as follows:
$ ("input"). KeyPress (function (e) {
if (E.which = 32 | | (<= E.which & E.which <= 65 + 25)
|| (<= E.which && E.which <= 97 + 25)) {
var c = String.fromCharCode (E.which);
$ ("P"). Append ($ ("<span/>"))
. Children (": Last")
. Append (document.createTextNode (c));
else if (E.which = 8) {
Backspace in IE only is on KeyDown
$ ("P"). Children (": Last"). Remove ();
}
$ ("div"). Text (E.which);
});
MouseDown (FN)
: The ability to bind to the MouseDown event for each matching element.
Copy Code code as follows:
$ ("P"). MouseUp (function () {
$ (this). Append (' <span style= "color: #F00;" >mouse up.</span> ');
}). MouseDown (function () {
$ (this). Append (' <span style= "color: #00F;" >mouse down.</span> ');
});
scrolling (FN)
: Binds a handler function in the scroll event for each matching element.
Copy Code code as follows:
$ ("P"). Clone (). Appendto (Document.body);
$ ("P"). Clone (). Appendto (Document.body);
$ ("P"). Clone (). Appendto (Document.body);
$ (window). Scroll (function () {
$ ("span"). CSS ("display", "inline"). Fadeout ("slow");
});
