Technically Events are methods. These methods are fired/triggered/executed automatically when an interaction took place. This interaction could be user initiated (clicking on a button) or system initiated (for example when document is ready for client browser, the ready event is fire).
Let us try to understand Jquery events from a very basic example. Consider we have following elements in our web page - two paragraphs and a link.
We will write a Jquery event for paragraph which will change the paragraph background color once user click on it.
<HTML>
<HEAD>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</HEAD>
<BODY>
<P>This is a paragraph. Clicking on this paragraph will change its color.</P>
<P><A href="http://www.singhvikash.in">Click to visit www.singhvikash.in</A></P>
<script>
$("p").click(function(){
$(this).css("background-color","yellow");
}
);
</script>
</BODY>
</HTML>
After clicking on the paragraph in web browser the background color did changed.
JQuery Events are different from JavaScript Events. I would say the Jquery events are more intelligent than JavaScript events. Why? The reason is that if we have a web page and JavaScript events into it the JavaScript events will be applied to only those DOM elements which were loaded along with JavaScript code in the browser. Any Page element added/removed after loading of pages will throw errors and will not be recognized.
Jquery does not have this limitation. Any page element added after loading the page will be recognized by the Jquery events.
So what events are available with Jquery?
Jquery has provided a rich set of events which can be used on the web pages. The events can be categorized into following:
1. Mouse Events
2. Keyboard Events
3. Browser Events
4. DOM Element Events
5. Ajax Events
For a list of events you can visit: http://www.jquery4u.com/events/jquery-list-events-bind/
An event method can be used for multiple events. For example if we want to use the same event method for two different events we can use it in JQuery with simplicity:
<script>
$("p").bind("click mouseenter", function(){$(this).css("background-color","yellow")});
$("p").bind("mouseleave", function(){$(this).css("background-color","white")});
</script>
As you can see from the code the background color of the paragraph will change on two events; first when user click on the paragraph and second when the mouse enter on the paragraph.
One of the interesting things, JQuery has to offer are you can attach an event and event method with any DOM element/web page element. So for example if we have following HTML output:
<BODY>
<P>This is a paragraph. <Font color="red" id="myID">Clicking on this paragraph</FONT> will change its color.</P>
<P><A href="http://www.singhvikash.in">Click to visit www.singhvikash.in</A></P>
</BODY>
We can bind an event and event handler with the element FONT in JQuery like this:
<script>
$("#myID").bind("click", function(){$(this).css("background-color","pink")});
</script>
JQuery has provided a good set of events; it is up to us to explore and use it in our web development.
Thanks! for reading till this point
Republished from Blog by Vikash Kumar Singh [46 clicks].
Read the original version here [0 clicks].