An event is when something occurs on your website. These events could be:

  • the page is loaded into the browser
  • the visitor clicks on a button or a link
  • the visitor hovers over a certain section of the page with the cursor
  • the visitor clicks into a form box to fill out his name
  • the visitor clicks the Submit button on a completed form
  • the visitor is playing a little game
  • the visitor scrolls down on the page
  • the visitor resizes the browser window
  • the list goes on...

The whole basis for jQuery is to make your web page do something when there is an event. jQuery has built in methods for manipulating specified objects when the event occurs. For example:

  • a popup box appears when the visitor clicks on a button that says More Info...
  • the background color changes to indicate a link when the cursor goes over a certain set of words
  • you want to be sure the visitor entered a legitimate email address in a form
  • you want certain elements to rearrange when the browser window is resized

All this make the web page more interactive for the visitor.                                                                                                                                                                                                                                                                                               

Three dot cartouche

jQuery syntax for event handlers

To instruct the browser to do something when an event occurs, you write code in the following format:

    // code with resulting actions actions go in here

In this example .click() is the event method. To break down the example code:

$ tells the browser this is a line of jQuery code
("p.linkBox") search for all of the elements on the page that match what is in quotes, in this case <p class="linkBox">
.click(function(){ do the following steps if the visitor clicks on the specified object
// code a set of resulting actions go inside the { } brackets
}); we are done with this set of instructions

Three dot cartouche

List of common jQuery event methods

The following is a list of jQuery event methods. These methods are to be used to instruct the browser to do things once an event occurs. 

.blur() an <input> field loses focus - the visitor click somewhere else
.change() a value change occurs in a form field 
.click() the visitor clicks on an element
.dbclick()  the visitor double clicks on an element 
.focus() the visitor clicks inside of a form field 
.hover() the cursor hovers over an element
.keydown()  a keyboard key is on its way down
.keyup()  a keyboard key is released 
.mouseover()  the cursor moves onto an element
.mouseout() the cursor moves off of an element 
.on() attaches one or more event handlers  
.ready)() when the DOM is fully loaded 
.scroll() when the visitor scrolls down the page 
.submit() when a form is submitted 

There is also a long list of jQuery methods for manipulation of the HTML objects once the event occurs which are referred to as JQuery API methods.