JavaScript Tutorial
JS - Introduction JS - Basic JS - Placement JS - Output JS - Statements JS - Syntax JS - Variables JS - Comments JS - Data Types JS - Operators JS - Operator Precedence JS - Condition JS - Switch JS - Functions JS - Objects JS - Loops For JS - Loops While JS - Break JS - Strings JS - String Methods JS - Numbers JS - Number Methods JS - Arrays JS - Array Methods JS - Array Iteration JS - Events JS - Event Listener JS - Event Propagation JS - Date JS - Math JS - Random JS - Boolean JS - Type Conversion JS - RegExp JS - Exception JS - Scope JS - Debugging JS - Hoisting JS - Strict Mode JS - this Keyword JS - Mistakes JS - Best Practices JS - Performance JS - Form Validation JS - ES6 Features
JS Objects
Object Definitions Object Properties Object Methods Object Constructors Object Prototypes
JS Functions
Function Definitions Function Parameters Function Call Function Apply Function Closures
JS HTML DOM
DOM Introduction DOM Methods DOM Selectors DOM HTML DOM CSS DOM Attributes DOM Navigation
JS Browser BOM
JS - Window JS - Screen JS - Location JS - History JS - Navigator JS - Popup Alert JS - Timing JS - Cookies
JS AJAX
AJAX - Introduction AJAX - XMLHttp AJAX - Request AJAX - Response AJAX - PHP
JS JSON
JSON - Introduction JSON - Syntax JSON - Data Types JSON - Parse JSON - Stringify JSON - Objects JSON - Arrays JSON - PHP JSON - JSONP
JS References
JavaScript Reference JavaScript Methods HTML DOM Reference

Introduction to Events

Events are actions that take place in the browser that can be initiated by either the user or the browser itself.

Below are a few examples of common events that can happen on a website:

  • The page finishes loading
  • The user clicks a button
  • The user scroll document
  • The user resize browser
  • The user move mouse
  • The user submits a form
  • The user presses a key on their keyboard
  • An HTML input field was changed

Each available event has an event handler, which is a block of code (usually a user-defined JavaScript function) that will be run when the event fires.

By learning about events, you'll be able to make a more interactive web experience for end users.


A Simple Example

A JavaScript block of code can be executed when an event fires, like when a user clicks on a button.

In the following example, we have a single button, which when pressed, will call showDate() function:

The JavaScript showDate() function looks like so:

Run code

Ways of using Events

There are three ways to assign events to elements so that it will be run when the associated event fires:

  • Inline event handlers
  • Event handler properties
  • Event listeners

We will go over all three methods to ensure that you are familiar with each way an event can be triggered.



Inline Event Handler Attributes

To assign events to HTML elements we can use HTML event attributes.

In the following example, the content of the <p> element is changed when a user clicks on it:

Run code

In the following example, a function is invoked when a user clicks on the <p> element:

Run code

In the following example, we have a single button, which when pressed, will make the background change to a random color:

Run code

Inline event handlers are a straightforward way to begin understanding events, but they generally should not be used beyond testing and educational purposes.


Event Handler Properties

The next step up from an inline event handler is the event handler property. This works very similarly to an inline handler, except we're setting the property of an element in JavaScript instead of the attribute in the HTML.

In the following example we will assign an onclick event to an HTML element with the id="para":

Run code

We could also set the event handler property to be equal to a named function name:

Run code

In the example above, a function named changeText is assigned to an HTML element with the id="para".

The function will be executed when the element is clicked.

In the following example, we have a single button, which when pressed, will make the background change to a random color:

Run code

Note: Event handlers do not follow the camelCase convention that most JavaScript code adheres to. Notice that the code is onclick, not onClick.


The onfocus and onblur Events

The onfocus event is fired when an element has received focus.

The onblur event is fired when an element has lost focus.

Run code

The onchange Event

The onchange event is fired when the value of the element is changed.

Run code

The onmouseover and onmouseout Events

The onmouseover event is fired when a pointing device (usually a mouse) is moved onto the element or onto one of its children.

The onmouseout event is fired when a pointing device (usually a mouse) is moved off the element or off one of its children.

Move the mouse pointer onto me!!!

Run code

See also

HTML Reference: HTML Event Attributes Reference

JavaScript Reference: HTML DOM Event Object Reference