📖 jQuery Events

Events are actions that occur with a web page, such a the page loading, typing, mouse movement or clicks, etc. JavaScript and jQuery can be used to monitor and to respond to events.

Types of events
Mouse Events
click click and release mouse button
dblclick click and release mouse button twice. Same as click event twice. Do not assign click and dblclick to same tag or click event will run twice before dblclick. Not a normal action for a web page.
mousedown press down on mouse button (as for a drag action)
mouseup release mouse button
mouseover move mouse over an element
mouseout move mouse off of an element
mousemove every time a mouse moves. Can be used to track location of the mouse
Document/Window Events
load browser finishes loading all of a web pages files (including images, multimedia, scripts, css, etc.)
resize user resizes browser window through min/max icon or dragging
scroll drag the scroll bar, click up, down, home or end key
unload go to another page, close browser window or tab
Form Events
submit submit a form by clicking submit button or enter (sometimes)
reset click reset button
change form field changes
focus click or tab into a form field (move cursor to the field)
blur move away from a form field
Keyboard Events
keypress press a key
keydown press down on a key (same as keypress - but fires before)
keyup release a key

Using Events with jQuery

Events are actions that happen to objects and elements on a web page. jQuery can monitor for specific events to take place on page elements and react to those events. jQuery must be programmed to watch for the even on a specific element then assigned a function to the event.

$('selector').event(eventFunction);
  • The selector can be an element, class, id or other jQuery selector where the event occurs.
  • The event is an action to monitor assign to the selected element.
  • The eventFunction is the function that will run when the event is triggered.
  • Note that there are no parentheses after the function and you cannot pass any parameters to the function.

Assigning an anonymous function to an event.

$('selector').event(function() {
  //function code here;
});

Common jQuery Events

The ready() event waits until the HTML has been loaded into the browser and then runs the page’s scripts. JavaScript can immediately manipulate a web page without having to wait for slow-loading images or movies.

$(document).ready(function() {
  console.log('Ready!');
  // jQuery function calls go here...
});

The hover() event combines mouseover() and mouseout() events into one.

$('#selector').hover(mouseoverfunction, mouseoutfunction);
  • mouseoverfunction runs when the mouse moves over the selector
  • mouseoutfunction runs when the mouse moves off of the selector

The hover() event can also be used with anonymous functions.

$('#selector').hover(
  function() {
    mouseover function statements;
  },
  function() {
    mouseout function statements;
  });

Event Object

The event object is an object that contains information about the event. Properties of the Event object can be used by the event handler function. Event properties vary by event and browser, but here are some commonly used properties.

Event Properties
 Description
pageX The distance (in pixels) of the mouse pointer from the left edge of the browser window.
pageY The distance (in pixels) of the mouse pointer from the top edge of the browser window.
screenX The distance (in pixels) of the mouse pointer from the left edge of the monitor.
screenY The distance (in pixels) of the mouse pointer from the top edge of the monitor.
which Use with the keypress event to determine the numeric code for the key that was pressed. Must convert the code to a string using: String.fromCharCode(evt.which)
target The object that was the “target” of the event—for example, for a click() event, the element that was clicked.
data A jQuery object used with the bind() function to pass data to an event handling function
Example
/* evt is a user-assigned variable name assigned to the event */
$('selector').event(function(evt) {
	var xPos = evt.pageX;
	var yPos = evt.pageY;
	alert('X:' + xPos + ' Y:' + yPos);
});

Stopping an event's normal behavior

To prevent the normal behavior of an event from occurring (such as following a link or submitting a form), include one of the following in the event handler function:

evt.preventDefault();
return false;

Remove an event handler

After assigning a function to an event, to remove the function. $('selector').off('event'); where selector is the element the event is assigned to and event is the event that is being removed (i.e. click, mouseover, etc.) OR $('selector').unbind('event'); The off method is a newer and preferred method but either one will work.

on() or bind() function

The on() and bind() functions allow you to specify an event handler for a selector and pass data to the function.

$('selector').on('event', myData, functionName);
/* or */
$('selector').bind('event', myData, functionName);
  • where selector is the element the event is assigned to,
  • event is the event that will trigger the function,
  • myData is an object literal that contains the data to be passed, and
  • functionName is the name of the function to run when the event occurs or an anonymous function.

The object literal is a list of property names and values.

var objLiteral = {
	propertyName1: value1,
	propertyName2: value2,
	. . .
};

to use on() or bind() to assign multiple events to a single element on the page.

$('selector').on({
  'event1': function() {
	// JavaScript function code
  },
  'event2': function() {
	// JavaScript function code
  };
});

on() is the newer and preferred method.

Keypress Event

Keypress is an event of the document object. To assign an event handler for when a key is pressed.

$(document).keypress(functionName);

To determine which key has been pressed, you must use the which property of the event which will return the numeric code for the key pressed.

To convert the numeric code to an actual character use string.fromCharCode(evt.which);

Example
$(document).keypress(function(evt) {
  var keyPressed = String.fromCharCode(evt.which);
  if (keyPressed == '+') {
    $('body').css('font-size', '2em');
  }
});

To see a live example of these JavaScript events, go to https://2learnweb.brookhavencollege.edu/profherd/javascript/examples/jquery-events-example/. For examples from the textbook, go to https://2learnweb.brookhavencollege.edu/profherd/javascript/textbook/.