jQuery Events

Events

Run a function (ie: ‘functionName’) when the mouse goes over the ‘a’ tag:

$('a').mouseover(functionName);

Mouse Events
click
dblclick
mousedown
mouseup
mouseover
mouseout
mousemove

Document/Window Events
load
resize
scroll
unload

Form Events
submit
reset
change
focus
blur

Keyboard Events
keypress
keydown
keyup

Getting The ID Of The Element That Triggerd An Event

Use the ‘event.target.id’ statement to get the referring id:

$('.ico_Delete').click(function(event){
     var post_id = "test: "+event.target.id;
     $('#page_Popup').html(post_id);
     $('#page_Popup').toggle();
});

Additional Event Properties:
pageX //Mouse position (x axis) from the top left of the browser
pageY //Mouse position (y axis) from the top left of the browser
screenX //Mouse position from the top left of the monitor
screenY //Mouse position form the top left of the monitor
shiftKey //If the shift key was pressed when the event occurs
which
target
data

Stopping Normal Browser Behavior

For example, you want to keep an a tag from allowing a visitor to click and proceed to a different page, use ‘preventDefault()’:

$('#nav').click(function(event){
     event.preventDefault();
});

Additional Events

.hover
The hover event applies when the mouse moves over an element. With this event, you can specify what actions are taken when the cursor moves over, and what happens when it moves away. The basic setup is: $(‘#selector’).hover(function1,function2);

$('#nav').hover(
      function(){
               $('#subnav').show();
          },
      function() {
               $('#subnav').hide();
          }
);

.toggle
Works exactly like hover, except it responds to clicks instead of mouseover.

Passing Data Through An Event

.bind

$('#selector').bind(event, data, function);

event – the event, such as click, mouseover, etc…)
data – the information you would like to pass, either an object literal or a variable.
function – name of the function you would like to call.