Different jQuery APIs to handle different browser events_jquery

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.

Copy code The code is as follows:

$(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.

Copy code The code is 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 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.

Copy code The code is 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 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.

Copy code The code is as follows:

$("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.

Copy code The code is as follows:

$("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.

Copy code The code is as follows:

$("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.

Copy code The code is as follows:

$("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.

Copy code The code is as follows:

var divdbl = $("div:first");
divdbl.dblclick(function () {
divdbl.toggleClass('dbl');
});

Key (FN)
: Bind a function to the keypress event of each matching element.

Copy code The code is as follows:

$("input").keypress(function (e ) {
if (e.which == 32 || (65 || (97 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.

Copy code The code is as follows:

$("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.

Copy code The code is 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");
});