https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting/Events

  * Skip to main content
  * Skip to search
  * Skip to select language

 Open main menu

  * ReferencesReferences
      +  
        Overview / Web Technology

        Web technology reference for developers

      +  
        HTML

        Structure of content on the web

      +  
        CSS

        Code used to describe document style

      +  
        JavaScript

        General-purpose scripting language

      +  
        HTTP

        Protocol for transmitting web resources

      +  
        Web APIs

        Interfaces for building web applications

      +  
        Web Extensions

        Developing extensions for web browsers

      +  
        Accessibility

        Build web projects usable for all

      +  
        Web Technology

        Web technology reference for developers

  * LearnLearn
      +  
        Overview / MDN Learning Area

        Learn web development

      +  
        MDN Learning Area

        Learn web development

      +  
        HTML

        Learn to structure web content with HTML

      +  
        CSS

        Learn to style content using CSS

      +  
        JavaScript

        Learn to run scripts in the browser

      +  
        Accessibility

        Learn to make the web accessible to all

  * PlusPlus
      +  
        Overview

        A customized MDN experience

      +  
        AI Help

        Get real-time assistance and support

      +  
        Updates

        All browser compatibility updates at a glance

      +  
        Documentation

        Learn how to use MDN Plus

      +  
        FAQ

        Frequently asked questions about MDN Plus

  * Curriculum ^New
  * Blog
  * Tools
      +  
        Playground

        Write, test and share your code

      +  
        HTTP Observatory

        Scan a website for free

      +  
        AI Help

        Get real-time assistance and support

Search MDN[                    ]Clear search inputSearch
Theme

  * Log in
  * Sign up for free

 1. Learn
 2. Core learning modules
 3. JavaScript
 4. Events

Article Actions

  * English (US)
      + [ ]Remember language 
      + Deutsch
      + Espanol
      + Francais
      + Ri Ben Yu 
      + hangugeo
      + Portugues (do Brasil)
      + Russkii
      + Zhong Wen  (Jian Ti )

Filter sidebar[                    ]Clear filter input

In this article

  * What is an event?
  * Using addEventListener()
  * Other event listener mechanisms
  * Event objects
  * Preventing default behavior
  * It's not just web pages
  * Summary

 1. Getting started modules
 2. Environment setup
     1. Installing software
     2. Browsing the web
     3. Code editors
     4. Dealing with files
     5. Command line
 3. Your first website
     1. What will it look like?
     2. Creating the content
     3. Styling the content
     4. Adding interactivity
     5. Publishing
 4. Web standards
     1. How the web works
     2. The web standards model
     3. How browsers load websites
 5. Soft skills
     1. Research and learning
     2. Collaboration and teamwork
     3. Workflows and processes
     4. Finding a job
 6. Core modules
 7. Structuring content with HTML
     1. Basic HTML syntax
     2. Web page metadata
     3. Headings and paragraphs
     4. Emphasis and importance
     5. Lists
     6. Structuring documents
     7. Advanced text features
     8. Creating links
     9. Challenge: Letter markup
    10. Challenge: Bird watching site
    11. Images
    12. Video and audio
    13. Challenge: Mozilla splash page
    14. Table basics
    15. Table accessibility
    16. Challenge: Planet data table
    17. Forms and buttons
    18. Debugging HTML
    19. Test your skills
         1. HTML text basics
         2. Advanced HTML text
         3. Links
         4. Images
         5. Audio and video
         6. Forms and buttons
 8. CSS styling basics
     1. What is CSS?
     2. CSS getting started
     3. Challenge: Biography page
     4. Basic selectors
     5. Attribute selectors
     6. Pseudo-classes and elements
     7. Combinators
     8. Box model
     9. Handling conflicts
    10. Values and units
    11. Sizing
    12. Backgrounds and borders
    13. Overflow
    14. Images, media, forms
    15. Styling tables
    16. Debugging CSS
    17. Challenge: Business card
    18. Challenge: Fancy letterhead
    19. Challenge: Fancy box styles
    20. Test your skills
         1. Backgrounds and borders
         2. Box model
         3. Cascade
         4. Images and forms
         5. Overflow
         6. Selectors
         7. Sizing
         8. Values and units
 9. CSS text styling
     1. Text and font fundamentals
     2. Styling lists
     3. Styling links
     4. Web fonts
     5. Challenge: Community school homepage
10. CSS layout
     1. Introduction
     2. Floats
     3. Positioning
     4. Flexbox
     5. CSS grid layout
     6. Responsive web design
     7. Media queries
     8. Challenge: Fundamental layout
     9. Test your skills
         1. Flexbox
         2. Floats
         3. Grid
         4. Positioning
         5. Responsive design and media queries
11. Dynamic scripting with JavaScript
     1. What is JavaScript?
     2. JavaScript walkthrough
     3. Troubleshooting
     4. Variables
     5. Numbers and operators
     6. Strings
     7. String methods
     8. Arrays
     9. Challenge: Story generator
    10. Conditionals
    11. Loops
    12. Functions
    13. Build your own function
    14. Function return values
    15. Events
    16. Event bubbling
    17. Challenge: Image gallery
    18. Objects
    19. DOM scripting
    20. Network requests
    21. JSON
    22. Debugging and error handling
    23. Test your skills
         1. Arrays
         2. Conditionals
         3. Events
         4. Functions
         5. JSON
         6. Loops
         7. Math
         8. Objects
         9. Strings
        10. Variables
12. JavaScript frameworks and libraries
     1. Introduction
     2. Framework features
     3. React getting started
     4. React ToDo app
     5. React components
     6. React events and state
     7. React editing, filtering, conditional UI
     8. React accessibility
     9. React resources
13. Accessibility
     1. What is accessibility?
     2. Accessibility tools
     3. Accessible HTML
     4. Accessible CSS and JS
     5. WAI-ARIA
     6. Accessible multimedia
     7. Mobile accessibility
     8. Challenge: A11y debugging
     9. Test your skills
         1. CSS and JavaScript
         2. HTML
         3. WAI-ARIA
14. Design for developers
15. Version control
16. Extension modules
17. Advanced JavaScript objects
     1. Object prototypes
     2. Object-oriented programming
     3. Classes in JavaScript
     4. Object building practice
     5. Challenge: Bouncing balls features
     6. Test your skills
         1. Object-oriented JavaScript
18. Client-side web APIs
     1. Introduction
     2. Video and audio
     3. Drawing graphics
     4. Client-side storage
     5. Third-party APIs
19. Asynchronous JavaScript
     1. Introduction
     2. Using promises
     3. Implementing promise-based APIs
     4. Introducing workers
     5. Challenge: Animation sequence
20. Web forms
     1. Your first form
     2. How to structure a web form
     3. Basic native form controls
     4. The HTML5 input types
     5. Other form controls
     6. Styling web forms
     7. Advanced form styling
     8. Customizable selects
     9. UI pseudo-classes
    10. Client-side form validation
    11. Sending form data
21. Understanding client-side tools
     1. Overview
     2. Package management
     3. Sample toolchain
     4. Deploying our app
22. Server-side websites
     1. First steps
         1. Introduction
         2. Client-server overview
         3. Server-side frameworks
         4. Website security
     2. Django (Python)
         1. Django introduction
         2. Dev environment setup
         3. 1: Local library tutorial
         4. 2: Skeleton website
         5. 3: Models
         6. 4: Django admin site
         7. 5: Home page
         8. 6: Generic list and detail views
         9. 7: Sessions framework
        10. 8: Authentication and permissions
        11. 9: Forms
        12. 10: Testing
        13. 11: Deploying
        14. Django security
        15. Challenge: Django blog
     3. Express (Node.js)
         1. Express/Node introduction
         2. Dev environment setup
         3. 1: Local library tutorial
         4. 2: Skeleton website
         5. 3: Using databases with Mongoose
         6. 4: Routes and controllers
         7. 5: Displaying data
         8. 6: Working with forms
         9. 7: Deploying
23. Web performance
     1. The "why" of web performance
     2. What is web performance?
     3. Perceived performance
     4. Measuring performance
     5. Multimedia: Images
     6. Multimedia: video
     7. Performant JavaScript
     8. Performant HTML
     9. Performant CSS
    10. Performance business case
24. Testing
     1. Introduction
     2. Testing strategies
     3. Common HTML and CSS problems
     4. Feature detection
     5. Automated testing
     6. Automation environment setup
25. Further resources
26. How to solve common problems
     1. Common CSS problems
     2. Common HTML problems
     3. Common JavaScript problems
     4. Design and accessibility
     5. Tools and setup
     6. Web mechanics
27. About
28. Resources for educators
29. Changelog

In this article

  * What is an event?
  * Using addEventListener()
  * Other event listener mechanisms
  * Event objects
  * Preventing default behavior
  * It's not just web pages
  * Summary

Introduction to events

  * Previous
  * Overview: Dynamic scripting with JavaScript
  * Next

Events are things that happen in the system you are programming,
which the system tells you about so your code can react to them. For
example, if the user clicks a button on a webpage, you might want to
react to that action by displaying an information box. In this
article, we discuss some important concepts surrounding events, and
look at the fundamentals of how they work in browsers.

               An understanding of HTML and the fundamentals of CSS,
Prerequisites: familiarity with JavaScript basics as covered in
               previous lessons.
                 * What events are -- a signal fired by the browser
                   when something significant happens, which the
                   developer can run some code in response to.
   Learning      * Setting up event handlers using addEventListener()
  outcomes:        (and removeEventListener()) and event handler
                   properties.
                 * Inline event handler attributes, and why you
                   shouldn't use them.
                 * Event objects.

What is an event?

Events are things that happen in the system you are programming -- the
system produces (or "fires") a signal of some kind when an event
occurs, and provides a mechanism by which an action can be
automatically taken (that is, some code running) when the event
occurs. Events are fired inside the browser window, and tend to be
attached to a specific item that resides in it. This might be a
single element, a set of elements, the HTML document loaded in the
current tab, or the entire browser window. There are many different
types of events that can occur.

For example:

  * The user selects, clicks, or hovers the cursor over a certain
    element.
  * The user presses a key on the keyboard.
  * The user resizes or closes the browser window.
  * A web page finishes loading.
  * A form is submitted.
  * A video is played, paused, or ends.
  * An error occurs.

You can gather from this (and from glancing at the event index) that
there are a lot of events that can be fired.

To react to an event, you attach an event listener to it. This is a
code feature that listens out for the event firing. When the event
fires, an event handler function (referenced by, or contained inside
the event listener) is called to respond to the event firing. When
such a block of code is set up to run in response to an event, we say
we are registering an event handler.

An example: handling a click event

In the following example, we have a single <button> in the page:

html

<button>Change color</button>

button {
  margin: 10px;
}

Then we have some JavaScript. We'll look at this in more detail in
the next section, but for now we can just say: it adds an event
listener to the button's "click" event, and the contained handler
function reacts to the event by setting the page background to a
random color:

js

const btn = document.querySelector("button");

function random(number) {
  return Math.floor(Math.random() * (number + 1));
}

btn.addEventListener("click", () => {
  const rndCol = `rgb(${random(255)} ${random(255)} ${random(255)})`;
  document.body.style.backgroundColor = rndCol;
});

The example output is as follows. Try clicking the button:

Using addEventListener()

As we saw in the last example, objects that can fire events have an
addEventListener() method, and this is the recommended mechanism for
adding event listeners.

Let's take a closer look at the code from the last example:

js

const btn = document.querySelector("button");

function random(number) {
  return Math.floor(Math.random() * (number + 1));
}

btn.addEventListener("click", () => {
  const rndCol = `rgb(${random(255)} ${random(255)} ${random(255)})`;
  document.body.style.backgroundColor = rndCol;
});

The HTML <button> element will fire a click event when the user
clicks it. We call the addEventListener() method on it to add an
event listener; this takes two parameters:

  * the string "click", to indicate that we want to listen to the
    click event. Buttons can fire lots of other events, such as
    "mouseover" when the user moves their mouse over the button, or
    "keydown" when the user presses a key and the button is focused.
  * a function to call when the event happens. In our case, the
    defined anonymous function generates a random RGB color and sets
    the background-color of the page <body> to that color.

You could also create a separate named function, and reference that
in the second parameter of addEventListener(), like this:

js

const btn = document.querySelector("button");

function random(number) {
  return Math.floor(Math.random() * (number + 1));
}

function changeBackground() {
  const rndCol = `rgb(${random(255)} ${random(255)} ${random(255)})`;
  document.body.style.backgroundColor = rndCol;
}

btn.addEventListener("click", changeBackground);

Listening for other events

There are many different events that can be fired by a button
element. Let's experiment.

First, make a local copy of random-color-addeventlistener.html, and
open it in your browser. It's just a copy of the simple random color
example we've played with already. Now try changing click to the
following different values in turn, and observing the results in the
example:

  * focus and blur -- The color changes when the button is focused and
    unfocused; try pressing the tab to focus on the button and press
    the tab again to focus away from the button. These are often used
    to display information about filling in form fields when they are
    focused, or to display an error message if a form field is filled
    with an incorrect value.
  * dblclick -- The color changes only when the button is
    double-clicked.
  * mouseover and mouseout -- The color changes when the mouse pointer
    hovers over the button, or when the pointer moves off the button,
    respectively.

Some events, such as click, are available on nearly any element.
Others are more specific and only useful in certain situations: for
example, the play event is only available on elements that have play
functionality, such as <video>.

Removing listeners

If you've added an event listener using addEventListener(), you can
remove it again if desired. The most common way to do this is by
using the removeEventListener() method. For example, the following
line would remove the click event handler we saw previously:

js

btn.removeEventListener("click", changeBackground);

For simple, small programs, cleaning up old, unused event handlers
isn't necessary, but for larger, more complex programs, it can
improve efficiency. Also, the ability to remove event handlers allows
you to have the same button performing different actions in different
circumstances: all you have to do is add or remove handlers.

Adding multiple listeners for a single event

By making more than one call to addEventListener(), providing
different handlers, you can have multiple handler functions running
in response to a single event:

js

myElement.addEventListener("click", functionA);
myElement.addEventListener("click", functionB);

Both functions would now run when the element is clicked.

Other event listener mechanisms

We recommend that you use addEventListener() to register event
handlers. It's the most powerful method and scales best with more
complex programs. However, there are two other ways of registering
event handlers that you might see: event handler properties and
inline event handlers.

Event handler properties

Objects (such as buttons) that can fire events also usually have
properties whose name is on followed by the name of an event. For
example, elements have a property onclick. This is called an event
handler property. To listen for the event, you can assign the handler
function to the property.

For example, we could rewrite the random color example like this:

js

const btn = document.querySelector("button");

function random(number) {
  return Math.floor(Math.random() * (number + 1));
}

btn.onclick = () => {
  const rndCol = `rgb(${random(255)} ${random(255)} ${random(255)})`;
  document.body.style.backgroundColor = rndCol;
};

You can also set the handler property to a named function:

js

const btn = document.querySelector("button");

function random(number) {
  return Math.floor(Math.random() * (number + 1));
}

function bgChange() {
  const rndCol = `rgb(${random(255)} ${random(255)} ${random(255)})`;
  document.body.style.backgroundColor = rndCol;
}

btn.onclick = bgChange;

Event handler properties have disadvantages compared to
addEventListener(). One of the most significant is that you can't add
more than one listener for a single event. The following pattern
doesn't work, because any subsequent attempts to set the property
value will overwrite earlier ones:

js

element.onclick = function1;
element.onclick = function2;

Inline event handlers -- don't use these

You might also see a pattern like this in your code:

html

<button onclick="bgChange()">Press me</button>

js

function bgChange() {
  const rndCol = `rgb(${random(255)} ${random(255)} ${random(255)})`;
  document.body.style.backgroundColor = rndCol;
}

The earliest method of registering event handlers found on the Web
involved event handler HTML attributes (or inline event handlers)
like the one shown above -- the attribute value contains the
JavaScript code you want to run when the event occurs. The above
example invokes a function defined inside a <script> element on the
same page, but you could also insert JavaScript directly inside the
attribute, for example:

html

<button onclick="alert('Hello, this is my old-fashioned event handler!');">
  Press me
</button>

You can find HTML attribute equivalents for many of the event handler
properties; however, you shouldn't use these -- they are considered
bad practice. It might seem easy to use an event handler attribute if
you are doing something really quick, but they quickly become
unmanageable and inefficient.

For a start, it is not a good idea to mix up your HTML and your
JavaScript, as it becomes hard to read. Keeping your JavaScript
separate is a good practice, and if it is in a separate file you can
apply it to multiple HTML documents.

Even in a single file, inline event handlers are not a good idea. One
button is OK, but what if you had 100 buttons? You'd have to add 100
attributes to the file; it would quickly turn into a maintenance
nightmare. With JavaScript, you could easily add an event handler
function to all the buttons on the page no matter how many there
were, using something like this:

js

const buttons = document.querySelectorAll("button");

for (const button of buttons) {
  button.addEventListener("click", bgChange);
}

Finally, many common server configurations will disallow inline
JavaScript, as a security measure.

You should never use the HTML event handler attributes -- those are
outdated, and using them is bad practice.

Event objects

Sometimes, inside an event handler function, you'll see a parameter
specified with a name such as event, evt, or e. This is called the
event object, and it is automatically passed to event handlers to
provide extra features and information. For example, let's rewrite
our random color example to include an event object:

js

const btn = document.querySelector("button");

function random(number) {
  return Math.floor(Math.random() * (number + 1));
}

function bgChange(e) {
  const rndCol = `rgb(${random(255)} ${random(255)} ${random(255)})`;
  e.target.style.backgroundColor = rndCol;
  console.log(e);
}

btn.addEventListener("click", bgChange);

Note: You can find the full source code for this example on GitHub
(also see it running live).

Here you can see we are including an event object, e, in the
function, and in the function setting a background color style on
e.target -- which is the button itself. The target property of the
event object is always a reference to the element the event occurred
upon. So, in this example, we are setting a random background color
on the button, not the page.

Note: You can use any name you like for the event object -- you just
need to choose a name that you can reference inside the event handler
function. e, evt, and event are commonly used by developers because
they are short and easy to remember. It's always good to be
consistent -- with yourself, and with others if possible.

Extra properties of event objects

Most event objects have a standard set of properties and methods
available on the event object; see the Event object reference for a
full list.

Some event objects add extra properties that are relevant to that
particular type of event. For example, the keydown event fires when
the user presses a key. Its event object is a KeyboardEvent, which is
a specialized Event object with a key property that tells you which
key was pressed:

html

<input id="textBox" type="text" />
<div id="output"></div>

js

const textBox = document.querySelector("#textBox");
const output = document.querySelector("#output");
textBox.addEventListener("keydown", (event) => {
  output.textContent = `You pressed "${event.key}".`;
});

div {
  margin: 0.5rem 0;
}

Try typing into the text box and see the output:

Preventing default behavior

Sometimes, you'll come across a situation where you want to prevent
an event from doing what it does by default. The most common example
is that of a web form, for example, a custom registration form. When
you fill in the details and click the submit button, the natural
behavior is for the data to be submitted to a specified page on the
server for processing, and the browser to be redirected to a "success
message" page of some kind (or the same page, if another is not
specified).

The trouble comes when the user has not submitted the data correctly
-- as a developer, you want to prevent the submission to the server
and give an error message saying what's wrong and what needs to be
done to put things right. Some browsers support automatic form data
validation features, but since many don't, you are advised to not
rely on those and implement your own validation checks. Let's look at
an example.

First, a simple HTML form that requires you to enter your first and
last name:

html

<form action="#">
  <div>
    <label for="fname">First name: </label>
    <input id="fname" type="text" />
  </div>
  <div>
    <label for="lname">Last name: </label>
    <input id="lname" type="text" />
  </div>
  <div>
    <input id="submit" type="submit" />
  </div>
</form>
<p></p>

div {
  margin-bottom: 10px;
}

Now some JavaScript -- here we implement a basic check inside a
handler for the submit event (the submit event is fired on a form
when it is submitted) that tests whether the text fields are empty.
If they are, we call the preventDefault() function on the event
object -- which stops the form submission -- and then display an error
message in the paragraph below our form to tell the user what's
wrong:

js

const form = document.querySelector("form");
const fname = document.getElementById("fname");
const lname = document.getElementById("lname");
const para = document.querySelector("p");

form.addEventListener("submit", (e) => {
  if (fname.value === "" || lname.value === "") {
    e.preventDefault();
    para.textContent = "You need to fill in both names!";
  }
});

Obviously, this is pretty weak form validation -- it wouldn't stop the
user from validating the form with spaces or numbers entered into the
fields, for example -- but it is OK for example purposes.

You can see the full example running live -- try it out there. For the
full source code, see preventdefault-validation.html.

It's not just web pages

Events are not unique to JavaScript -- most programming languages have
some kind of event model, and the way the model works often differs
from JavaScript's way. In fact, the event model in JavaScript for web
pages differs from the event model for JavaScript as it is used in
other environments.

For example, Node.js is a very popular JavaScript runtime that
enables developers to use JavaScript to build network and server-side
applications. The Node.js event model relies on listeners to listen
for events and emitters to emit events periodically -- it doesn't
sound that different, but the code is quite different, making use of
functions like on() to register an event listener, and once() to
register an event listener that unregisters after it has run once.
The Node.js HTTP connect event docs provide a good example.

You can also use JavaScript to build cross-browser add-ons -- browser
functionality enhancements -- using a technology called WebExtensions.
The event model is similar to the web events model, but a bit
different -- event listener properties are written in camel case (such
as onMessage rather than onmessage), and need to be combined with the
addListener function. See the runtime.onMessage page for an example.

You don't need to understand anything about other such environments
at this stage in your learning; we just wanted to make it clear that
events can differ in different programming environments.

Summary

In this chapter we've learned what events are, how to listen for
events, and how to respond to them.

You've seen by now that elements in a web page can be nested inside
other elements. For example, in the Preventing default behavior
example, we have some text boxes, placed inside <div> elements, which
in turn are placed inside a <form> element. What happens when a click
event listener is attached to the <form> element, and the user clicks
inside one of the text boxes? The associated event handler function
is still fired via a process called event bubbling, which is covered
in the next lesson.

  * Previous
  * Overview: Dynamic scripting with JavaScript
  * Next

Help improve MDN

Was this page helpful to you?
YesNo
Learn how to contribute.

This page was last modified on Jul 29, 2025 by MDN contributors.

View this page on GitHub * Report a problem with this content
 

Your blueprint for a better internet.

  * MDN on Bluesky
  * MDN on Mastodon
  * MDN on X (formerly Twitter)
  * MDN on GitHub
  * MDN Blog RSS Feed

MDN

  * About
  * Blog
  * Careers
  * Advertise with us

Support

  * Product help
  * Report an issue

Our communities

  * MDN Community
  * MDN Forum
  * MDN Chat

Developers

  * Web Technologies
  * Learn Web Development
  * MDN Plus
  * Hacks Blog

 

  * Website Privacy Notice
  * Cookies
  * Legal
  * Community Participation Guidelines

Visit Mozilla Corporation's not-for-profit parent, the Mozilla
Foundation.
Portions of this content are (c)1998-2025 by individual mozilla.org
contributors. Content available under a Creative Commons license.