JavaScript Events

-- Learning not just technology, but dreams!

• Home
• HTML
• JavaScript
• CSS
• Vue
• React
• Python3
• Java
• C
• C++
• C#
• AI
• Go
• SQL
• Linux
• VS Code
• Bootstrap
• Git
• Local Bookmarks

• Home
• HTML
• CSS
• JS
• Local Bookmarks
• Search

• Vue3 Tutorial
• Vue2 Tutorial

• Bootstrap3
• Bootstrap4
• Bootstrap5

• Machine Learning
• PyTorch
• TensorFlow
• Sklearn
• NLP
• AI Agent
• Ollama
• Coding Plan

JavaScript Tutorial

JavaScript Tutorial JavaScript Introduction JavaScript Usage JavaScript VScode JavaScript in Chrome JavaScript Output JavaScript Syntax JavaScript Statements JavaScript Comments JavaScript Variables JavaScript Data Types JavaScript Objects JavaScript Functions JavaScript Scope JavaScript Events JavaScript Strings JavaScript String Templates JavaScript Operators JavaScript Comparisons JavaScript If...Else Statements JavaScript switch Statement JavaScript for Loop JavaScript while Loop JavaScript break and continue Statements JavaScript typeof JavaScript Type Conversion JavaScript Regular Expressions JavaScript Errors – Throw, Try and Catch JavaScript Debugging JavaScript Hoisting JavaScript Strict Mode JavaScript Common Mistakes JavaScript Forms JavaScript Form Validation JavaScript Validation API JavaScript Reserved Keywords JavaScript this JavaScript let and const JavaScript JSON JavaScript void JavaScript Async Programming JavaScript Promise JavaScript async/await JavaScript Coding Conventions JavaScript Quiz

JS Functions

JavaScript Function Definition JavaScript Function Parameters JavaScript Function Invocation JavaScript Closures

JS Classes

JavaScript Classes JavaScript Class Inheritance JavaScript Static Methods

JS HTML DOM

DOM Introduction DOM HTML DOM CSS DOM Events DOM EventListener DOM Elements HTMLCollection Object NodeList Object

JS Advanced

JavaScript Objects JavaScript prototype JavaScript Number Object JavaScript String JavaScript Date JavaScript Array JavaScript Boolean JavaScript Math JavaScript RegExp Object

JS Browser BOM

JavaScript Window JavaScript Window Screen JavaScript Window Location JavaScript Window History JavaScript Navigator JavaScript Popup Boxes JavaScript Timing Events JavaScript Cookie

JS Libraries

JavaScript Libraries JavaScript Testing jQuery JavaScript Testing Prototype

JS Examples

JavaScript Examples JavaScript Object Examples JavaScript Browser Object Examples JavaScript HTML DOM Examples JavaScript Summary

JS Reference

JavaScript Objects HTML DOM Objects JavaScript Async Programming JavaScript Static Methods

JavaScript Scope JavaScript Strings

JavaScript Events

---

HTML events are things that happen to HTML elements.

When JavaScript is used in HTML pages, JavaScript can react on these events.

---

HTML Events

An HTML event can be something the browser does, or something a user does.

Here are some examples of HTML events:

• An HTML web page has finished loading
• An HTML input field has been changed
• An HTML button was clicked

Often, when events happen, you may want to do something.

JavaScript lets you execute code when events are detected.

HTML event attributes can be used to add JavaScript code to HTML elements.

Single quotes:

<some-HTML-element some-event='JavaScript code'>

Double quotes:

<some-HTML-element some-event="JavaScript code">

In the following example, an onclick attribute (with code) is added to a <button> element:

Example

<button onclick="getElementById('demo').innerHTML=Date()">The time is?</button>

Try it Yourself »

In the example above, the JavaScript code changes the content of the element with id="demo".

In the next example, the code changes the content of its own element (using this.innerHTML):

Example

<button onclick="this.innerHTML=Date()">The time is?</button>

Try it Yourself »

JavaScript code is often several lines of code. It is more common to call the function from the event attribute:

Example

<button onclick="displayDate()">The time is?</button>

Try it Yourself »

---

Common HTML Events

Here is a list of some common HTML events:

Event	Description
onchange	An HTML element has been changed
onclick	The user clicks an HTML element
onmouseover	The user moves the mouse over an HTML element
onmouseout	The user moves the mouse away from an HTML element
onkeydown	The user pushes a keyboard key
onload	The browser has finished loading the page

More events: JavaScript Reference - HTML DOM Events.

---

What can JavaScript Do?

Events can be used to handle form validation, user input, user actions, and browser actions:

• Things that happen when the page loads
• Things that happen when the page is closed
• Action is performed when a button is clicked
• Data is validated when it is entered into a form
• etc.

There are several ways to execute JavaScript event code:

• HTML event attributes can execute JavaScript code directly
• HTML event attributes can call JavaScript functions
• You can assign your own event handlers to HTML elements
• You can prevent events from being triggered
• etc.

You will learn more about events and event handlers in the HTML DOM chapter.