Handling events is a bit difficult part of today's web browsers, and different browsers handle events in different ways. Therefore, to overcome these cross-browser issues, one can leverage jQuery's event handling API.
jQuery is a small JavaScript library that provides a vast API to handle different browser events and effects and much more. Read more about handling browser user interface effects using JavaScript. In this tutorial, we will explore the different APIs of jQuery to handle different browser events.
Page Load Event
Ready (FN),
This is the basis of all types of events that jQuery supports. You may want to set the focus of the form when the page is loaded or do some UI effects.
$(document).ready(function () {
$("p").text("The DOM is now loaded and can be manipulated.");
});
Event handling Binding (Type, Data, FN),
You may want to bind an element to any element that handles one or more events (click/double click, etc.). Use this feature in conjunction with custome's event handler for any element.
$("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 the event on every matched element,
this will also cause the browser to have the same name (if one exists) The default action performed. For example, a function via trigger() will also cause the browser to submit a "submit" of the form. False default behavior can be prevented by returning one of the functions bound to the event.
The triggered events are not limited to browser-based events. You can also customize event trigger binding registration.
$("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 auxiliary activities In today’s Web 2.0 applications Program, user intraction processing is very important. jQuery provides some APIs that can be used to handle these interactions. Hover (Multiple) This function provides hover functionality, i.e. when the mouse cursor moves over a matching element, the first specified function is fired. When the mouse moves over the element, the second specified function fires. Also, check where you see if the mouse is still over the specified element (e.g. an image inside a div), if so it will continue to "hover" and not move out (a common behavior when using the mouseout event handler) error.
$("li").hover(
function () {
$(this).append($(" ***"));
},
function () {
$( this).find("span:last").remove();
}
);
Auxiliary for other activities The following are the functions, Can be used to handle different types of event lists.
blur()
: Triggers the blur event for each matching element.
$("input").blur(function () {
$(this).next("span").css('display','inline').fadeOut(1000);
});
Blur (FN)
: Bind a handler function to the blur event of each matching element.
[code]
$("input").blur(function () {
$(this).next("span").css('display','inline').fadeOut( 1000);
});
(FN)
: Bind a function to the change event of each matching element.
$("select").change(function () {
var str = "";
$("select option:selected").each(function () {
str = $(this).text() " ";
});
$("div").text(str);
})
.change();
Click (FN) : Function bound to the click event of each matching element.
$("p").click(function () {
$(this).slideUp();
});
$("p").hover(function () {
$(this).addClass("hilite");
}, function () {
$(this).removeClass("hilite");
});
Double-click (FN) : Trigger the DblClick event for each matching element.
var divdbl = $("div:first");
divdbl.dblclick(function () {
divdbl.toggleClass('dbl');
});
Key (FN) : Bind a function to the keypress event of each matching element.
$("input").keypress(function (e ) {
if (e.which == 32 || (65 <= e.which & e.which <= 65 25)
|| (97 <= e.which && e.which <= 97 25)) {
var c = String.fromCharCode(e.which);
$("p").append($(""))
.children(":last")
.append(document.createTextNode(c));
} else if (e.which == 8) {
// backspace in IE only be on keydown
$("p").children(":last").remove();
}
$("div").text(e.which);
});
mousedown (FN)
: Function bound to the mousedown event of each matched element.
$("p").mouseup(function() {
$(this).append('Mouse up.');
}).mousedown(function(){
$(this).append('Mouse down.');
});
Scroll (FN) : Bind a handler function to the scroll event of each matching element.
$("p").clone().appendTo (document.body);
$("p").clone().appendTo(document.body);
$("p").clone().appendTo(document.body);
$(window).scroll(function () {
$("span").css("display", "inline").fadeOut("slow");
});