HTML Events
HTML events are things that happen to HTML elements.
Examples of events:
• An HTML button is clicked
• A web page has finished loading
• The mouse moves over an element
• A keyboard key is pressed
• An HTML input field is changed
JavaScript Events
• When JavaScript is used in HTML pages, JavaScript can react on
events.
• JavaScript lets you execute code when events are detected.
• HTML allows event handler attributes, with JavaScript code, to be added to
HTML elements.
Syntax:
With single quotes:
<element event='some JavaScript'>
With double quotes:
<element event="some JavaScript">
In the following example, an onclick attribute (with code), is added to a <button> element:
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript HTML Events</h1>
<h2>The onclick Attribute</h2>
<button onclick="[Link]('demo').innerHTML=Date()">The time
is?</button>
<p id="demo"></p>
</body>
</html>
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 [Link]:
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript HTML Events</h1>
<h2>The onclick Attribute</h2>
<button onclick="[Link]=Date()">The time is?</button>
</body>
</html>
Calling a JavaScript Function
JavaScript code can often be several lines long.
It is more common to use the event attribute to call a function:
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript HTML Events</h1>
<h2>The onclick Attribute</h2>
<p>Click the button to display the date.</p>
<button onclick="displayDate()">The time is?</button>
<script>
function displayDate() {
[Link]("demo").innerHTML = Date();
</script>
<p id="demo"></p>
</body>
</html>
Common HTML Events
Here is a list of some common HTML events:
JavaScript Event Handlers
An event handler is JavaScript code that runs when an event happens.
Event handlers can be used to handle and verify user input, user actions, and browser
actions:
• Things that should be done every time a page loads
• Things that should be done when the page is closed
• Action that should be performed when a user clicks a button
• Content that should be verified when a user inputs data
• And more ...
Many different methods can be used to let JavaScript work with events:
• HTML event attributes can execute JavaScript code directly
• HTML event attributes can call JavaScript functions
• You can assign your own event handler functions to HTML elements
• You can prevent events from being sent or being handled
• And more ...
Using event attributes like onclick are easy to use.
Nevertheless, using addEventListener() is the recommended way to handle events.
The addEventListener() method keeps HTML and JavaScript separated.
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Events</h1>
<h2>The addEventListener() Method</h2>
<button id="myBtn">Time is?</button>
<p id="demo"></p>
<script>
const btn = [Link]("myBtn");
// Add EventListener to btn
[Link]("click", function () {
[Link]("demo").innerHTML = Date();
});
</script>
</body>
</html>
JavaScript Mouse Events:
Mouse Events happen when the user interacts with the mouse.
Common Mouse Events:
• click
• dblclick
• mouseover / mouseout
• mousemove
• mousedown / mouseup
Mouseover and Mouseout
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Events</h1>
<h2>The mouseover and mousout Events</h2>
<div id="box"
style="width:200px;height:100px;padding:16px;border:1px solid #000;">
Move mouse over this box!
</div>
<script>
const box = [Link]("box");
// Let box listen for mouseover
[Link]("mouseover", function () {
[Link] = "Mouse is over me!";
});
// Let box listen for mouseout
[Link]("mouseout", function () {
[Link] = "Mouse is out!";
});
</script>
</body>
</html>
Common Mouse Events
• click
Fires after both a mousedown and mouseup event occur on the same element
with the main mouse button (usually the left).
• dblclick
Fires after two rapid clicks on the same element.
• mousedown / mouseup
These events fire when a mouse button is pressed down (mousedown) or
released (mouseup) over an element, respectively.
• mousemove
Fires continuously as the mouse pointer moves over an element, providing
positional information (coordinates) about the cursor.
• mouseover
Fires when the pointer moves over an element (or one of its children).
• mouseout
Fires when the pointer leaves an element.
• mouseenter
Similar to mouseover, but fire when the pointer enters an element, not its
descendants, making it more sensible for use cases like CSS :hover behavior.
• mouseleave
Similar to mouseout, but fire when the pointer leaves an element, not its
descendants, making it more sensible for use cases like CSS :hover behavior.
• contextmenu
Fires when the user attempts to open the context menu, typically by right-
clicking.
• wheel
Fires when the mouse wheel is rotated, commonly used for scrolling or
zooming functionality.
• drag events
A series of events (dragstart, dragend, dragover, etc.) used for implementing
drag-and-drop interfaces.
Mouse Position
The MouseEvent interface provides an event object which contains useful properties
like pointer coordinates, which mouse button are pressed, and more.
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Events</h1>
<h2>The mousposition Event</h2>
<p id="demo">Move the mouse in this window!</p>
<script>
// Let document listen for mousemove
[Link]("mousemove", function (event) {
[Link]("demo").innerHTML =
"X: " + [Link] + " Y: " + [Link];
});
</script>
</body>
</html>
JavaScript Keyboard Events
Keyboard Events happen when the user presses a key on the keyboard:
• keydown (key is pressed down)
• keyup (key is released)
• keypress (deprecated)
keypress only fires for character keys (a or 5), not for control keys (alt or backspace).
Developers are advised to use keydown or keyup instead.
The keydown Event
Using [Link]
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Events</h1>
<h2>The keydown Event</h2>
<input id="k" type="text" placeholder="Press a key here!">
<p id="demo"></p>
<script>
const k = [Link]("k");
// Let k listen for keydown
[Link]("keydown", function (event) {
[Link]("demo").innerHTML = "You pressed: " + [Link];
});
</script>
</body>
</html>
Key Properties
The KeyboardEvent object provides useful properties to determine which key was
involved in the event:
Detect Enter
Using [Link]
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Events</h1>
<h2>The keydown Event</h2>
<input id="in01" type="text" placeholder="Press Enter">
<p id="demo"></p>
<script>
const in01 = [Link]("in01");
// Let in01 listen for keydown
[Link]("keydown", function (event) {
// If key was "enter", then display text
if ([Link] === "Enter") {
[Link]("demo").innerHTML = "Enter was pressed!";
});
</script>
</body>
</html>
JavaScript Load Events
Load Events happen when the browser has finished loading an element.
The two most important load events:
• DOMContentLoaded (when HTML is ready)
• load (waits for pages, images, CSS, etc.)
DOMContentLoaded
The DOMContentLoaded event fires when the browser has fully loaded the HTML
and built the Document Object Model (DOM) tree, but has not necessarily finished
loading external resources like images and stylesheets.
The DOMContentLoaded event is best for initializing the user interface, attaching
event handlers, and performing actions that only require the DOM to be ready.
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Events</h1>
<h2>The DOMContentLoaded Event</h2>
<p id="demo"></p>
<script>
// Add Event Listener to document
[Link]("DOMContentLoaded", function () {
[Link]("demo").innerHTML = "HTML is loaded!";
});
</script>
</body>
</html>
Window Load
The load event fires when the entire page has fully loaded, including all dependent
resources such as images, stylesheets, and sub-frames.
The load event is best for actions that require all resources available, such as
getting the dimensions of an image or checking the browser type.
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Events</h1>
<h2>The load Event</h2>
<p id="demo"></p>
<script>
// Add Event Listener to window
[Link]("load", function () {
[Link]("demo").innerHTML = "Page is fully loaded!";
});
</script>
</body>
</html>
Other Load Events
The load event can also be used on other elements that fetch resources (not just
pages):
Image Load
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Events</h1>
<h2>The load Event</h2>
<img id="myImg"
src="[Link] width="120">
<p id="demo"></p>
<script>
const img = [Link]("myImg");
// Add Event Listener to img
[Link]("load", function () {
[Link]("demo").innerHTML = "Image loaded!";
});
</script>
</body>
</html>
JavaScript Timing Events
Timing Events let you run code:
• After a Delay
• Or Repeatedly
Timing is driven by Timing Events generated by the system clock.
Timer Functions
The timer functions belong to the window object.
setTimeout() is the same as [Link]().
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Events</h1>
<h2>The setInterval() Method</h2>
<p id="clock"></p>
<script>
// Call showTime every 1000 millisec
setInterval(showTime, 1000);
// Function to display the time
function showTime() {
const d = new Date();
[Link]("clock").innerHTML =
[Link]() + ":" + [Link]() + ":" + [Link]();
</script>
</body>
</html>
The setTimeout() Method
The setTimeout() method executes a function after a delay in milliseconds.
setTimeout(function, delay, p1,...,pN)
Parameters
Return Value
Example
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Events</h1>
<h2>The setTimeout() Method</h2>
<button id="btn">Start</button>
<p id="demo">Wait!</p>
<script>
const btn = [Link]("btn");
// Let btn listen for a click
[Link]("click", function () {
// Then call showMsg after 2 seconds
setTimeout(showMsg, 2000);
});
// Function to display message
function showMsg() {
[Link]("demo").innerHTML = "Hello after 2 seconds!";
}
</script>
</body>
</html>
The setTimeout() method is a core part of asynchronous JavaScript, allowing code execution to be
scheduled without blocking the main execution thread.
The SetInterval()Method
The setInterval() method calls a function repeatedly.
setInterval(function, delay, p1,...,pN)
Parameters
Example
setInterval() used with clearInterval():
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Events</h1>
<h2>The setInterval() Method</h2>
<button id="start">Start Counter</button>
<button id="stop">Stop</button>
<p id="counter">0</p>
<script>
let myInterval;
let count = 0;
const btnStart = [Link]("start");
const btnStop = [Link]("stop");
// let btnStart listen for a click
[Link]("click", function () {
// Then start counter
myInterval = setInterval(counter, 1000);
});
// let btnStop listen for a click
[Link]("click", function () {
// Then stop counter
clearInterval(myInterval);
});
function counter() {
count++;
[Link]("counter").innerHTML = count;
}
</script>
</body>
</html>
The setTimeout() method executes a function only once after a delay.
The setInterval() method executes a function repeatedly at every interval.
JavaScript Event Management
Adding Events
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Events</h1>
<h2>Adding Events</h2>
<button id="btn">Click</button>
<p id="demo"></p>
<script>
const btn = [Link]("btn");
// Let btn listen for click
[Link]("click", myFunction);
function myFunction() {
[Link]("demo").innerHTML = "Clicked!";
</script>
</body>
</html>
Removing Events
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Events</h1>
<h2>Adding and Removing Events</h2>
<button id="add">Add</button>
<button id="remove">Remove</button>
<button id="test">Test click</button>
<p id="demo"></p>
<script>
const test = [Link]("test");
const remove = [Link]("remove");
const add = [Link]("add");
function myFunction() {
[Link]("demo").innerHTML += "Hello!";
}
// Let add listen for click
[Link]("click", function () {
// Let test listen for click
[Link]("click", myFunction);
});
// Let remove listen for click
[Link]("click", function () {
// Prevent test listen for click
[Link]("click", myFunction);
});
</script>
</body>
</html>
Blocking Events
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Events</h1>
<h2>Blocking Events</h2>
<a href="[Link] id="link">Go to Google</a>
<p id="demo"></p>
<script>
const link = [Link]("link");
// Let link listen for click
[Link]("click", function (event) {
[Link]();
[Link]("demo").innerHTML = "Link blocked!";
});
</script>
</body>
</html>
JavaScript HTML DOM Events
Reacting to Events
A JavaScript can be executed when an event occurs, like when a user clicks on an
HTML element.
To execute code when a user clicks on an element, add JavaScript code to an HTML
event attribute:
onclick=JavaScript
Examples of HTML events:
• When a user clicks the mouse
• When a web page has loaded
• When an image has been loaded
• When the mouse moves over an element
• When an input field is changed
• When an HTML form is submitted
• When a user strokes a key
In this example, the content of the <h1> element is changed when a user clicks on it:
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript HTML Events</h1>
<h2>The onclick Attribute</h2>
<h2 onclick="[Link]='Ooops!'">Click on this text!</h2>
</body>
</html>
In this example, a function is called from the event handler:
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript HTML Events</h1>
<h2>The onclick Attribute</h2>
<h2 onclick="changeText(this)">Click on this text!</h2>
<script>
function changeText(id) {
[Link] = "Ooops!";
</script>
</body>
</html>
HTML Event Attributes
To assign events to HTML elements you can use event attributes.
Example
Assign an onclick event to a button element:
<button onclick="displayDate()">Try it</button>
In the example above, a function named displayDate will be executed when the
button is clicked.
Assign Events Using the HTML DOM
The HTML DOM allows you to assign events to HTML elements using JavaScript:
Example
Assign an onclick event to a button element:
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript HTML Events</h1>
<h2>The onclick Events</h2>
<p>Click "Try it" to execute the displayDate() function.</p>
<button id="myBtn">Try it</button>
<p id="demo"></p>
<script>
[Link]("myBtn").onclick = displayDate;
function displayDate() {
[Link]("demo").innerHTML = Date();
</script>
</body>
</html>
In the example above, a function named displayDate is assigned to an HTML element
with the id="myBtn".
The function will be executed when the button is clicked.
The onload and onunload Events
The onload and onunload events are triggered when the user enters or leaves the
page.
The onload event can be used to check the visitor's browser type and browser
version, and load the proper version of the web page based on the information.
The onload and onunload events can be used to deal with cookies.
Example
<!DOCTYPE html>
<html>
<body onload="checkCookies()">
<h1>JavaScript HTML Events</h1>
<h2>The onload Attribute</h2>
<p id="demo"></p>
<script>
function checkCookies() {
let text = "";
if ([Link] == true) {
text = "Cookies are enabled.";
} else {
text = "Cookies are not enabled.";
[Link]("demo").innerHTML = text;
</script>
</body>
</html>
The oninput Event
The oninput event is often to some action while the user input data.
Below is an example of how to use the oninput to change the content of an input
field.
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript HTML Events</h1>
<h2>The oninput Attribute</h2>
Enter your name: <input type="text" id="fname" oninput="upperCase()">
<p>When you write in the input field, a function is triggered to transform the input to upper
case.</p>
<script>
function upperCase() {
const x = [Link]("fname");
[Link] = [Link]();
</script>
</body>
</html>
The onchange Event
The onchange event is often used in combination with validation of input fields.
Below is an example of how to use the onchange. The upperCase() function will be
called when a user changes the content of an input field.
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript HTML Events</h1>
<h2>The onchange Attribute</h2>
Enter your name: <input type="text" id="fname" onchange="upperCase()">
<p>When you leave the input field, a function transforms the input to upper case.</p>
<script>
function upperCase() {
const x = [Link]("fname");
[Link] = [Link]();
</script>
</body>
</html>
The onmouseover and onmouseout Events
The onmouseover and onmouseout events can be used to trigger a function when
the user mouses over, or out of, an HTML element:
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript HTML Events</h1>
<h2>The onmouseover Attribute</h2>
<div onmouseover="mOver(this)" onmouseout="mOut(this)"
style="background-color:#D94A38;width:120px;height:20px;padding:40px;">
Mouse Over Me</div>
<script>
function mOver(obj) {
[Link] = "Thank You"
function mOut(obj) {
[Link] = "Mouse Over Me"
</script>
</body>
</html>
The onmousedown, onmouseup and onclick Events
The onmousedown, onmouseup, and onclick events are all parts of a mouse-click. First
when a mouse-button is clicked, the onmousedown event is triggered, then, when the
mouse-button is released, the onmouseup event is triggered, finally, when the mouse-click is
completed, the onclick event is triggered.
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript HTML Events</h1>
<h2>The onmousedown Attribute</h2>
<div onmousedown="mDown(this)" onmouseup="mUp(this)"
style="background-color:#D94A38;width:90px;height:20px;padding:40px;">
Click Me</div>
<script>
function mDown(obj) {
[Link] = "#1ec5e5";
[Link] = "Release Me";
}
function mUp(obj) {
[Link]="#D94A38";
[Link]="Thank You";
}
</script>
</body>
</html>
JavaScript HTML DOM EventListener
The addEventListener() method
Example
Add an event listener that fires when a user clicks a button:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript addEventListener()</h2>
<p>This example uses the addEventListener() method to attach a click event to a
button.</p>
<button id="myBtn">Try it</button>
<p id="demo"></p>
<script>
[Link]("myBtn").addEventListener("click", displayDate);
function displayDate() {
[Link]("demo").innerHTML = Date();
</script>
</body>
</html>
The addEventListener() method attaches an event handler to the specified element.
The addEventListener() method attaches an event handler to an element without
overwriting existing event handlers.
You can add many event handlers to one element.
You can add many event handlers of the same type to one element, i.e two "click"
events.
You can add event listeners to any DOM object not only HTML elements. i.e the
window object.
The addEventListener() method makes it easier to control how the event reacts to
bubbling.
When using the addEventListener() method, the JavaScript is separated from the
HTML markup, for better readability and allows you to add event listeners even when
you do not control the HTML markup.
You can easily remove an event listener by using the removeEventListener() method.
Syntax
[Link](event, function, useCapture);
The first parameter is the type of the event (like "click" or "mousedown" or any
other HTML DOM Event.)
The second parameter is the function we want to call when the event occurs.
The third parameter is a boolean value specifying whether to use event bubbling or
event capturing. This parameter is optional.
Add an Event Handler to an Element
Example
Alert "Hello World!" when the user clicks on an element:
<html>
<body>
<h2>JavaScript addEventListener()</h2>
<p>This example uses the addEventListener() method to attach a click event to a
button.</p>
<button id="myBtn">Try it</button>
<script>
[Link]("myBtn").addEventListener("click", function() {
alert("Hello World!");
});
</script>
</body>
</html>
You can also refer to an external "named" function:
Example
Alert "Hello World!" when the user clicks on an element:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript addEventListener()</h2>
<p>This example uses the addEventListener() method to execute a function when a
user clicks on a button.</p>
<button id="myBtn">Try it</button>
<script>
[Link]("myBtn").addEventListener("click", myFunction);
function myFunction() {
alert ("Hello World!");
</script>
</body>
</html>
Add Many Event Handlers to the Same Element
The addEventListener() method allows you to add many events to the same element,
without overwriting existing events:
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript addEventListener()</h2>
<p>This example uses the addEventListener() method to add two click events to the
same button.</p>
<button id="myBtn">Try it</button>
<script>
var x = [Link]("myBtn");
[Link]("click", myFunction);
[Link]("click", someOtherFunction);
function myFunction() {
alert ("Hello World!");
function someOtherFunction() {
alert ("This function was also executed!");
</script>
</body>
</html>
Add an Event Handler to the window Object
The addEventListener() method allows you to add event listeners on any HTML DOM
object such as HTML elements, the HTML document, the window object, or other
objects that support events, like the xmlHttpRequest object.
Example
Add an event listener that fires when a user resizes the window:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript addEventListener()</h2>
<p>This example uses the addEventListener() method on the window object.</p>
<p>Try resizing this browser window to trigger the "resize" event handler.</p>
<p id="demo"></p>
<script>
[Link]("resize", function(){
[Link]("demo").innerHTML = [Link]();
});
</script>
</body>
</html>
Passing Parameters
When passing parameter values, use an "anonymous function" that calls the specified
function with the parameters:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript addEventListener()</h2>
<p>This example demonstrates how to pass parameter values when using the addEventListener()
method.</p>
<p>Click the button to perform a calculation.</p>
<button id="myBtn">Try it</button>
<p id="demo"></p>
<script>
let p1 = 5;
let p2 = 7;
[Link]("myBtn").addEventListener("click", function() {
myFunction(p1, p2);
});
function myFunction(a, b) {
[Link]("demo").innerHTML = a * b;
}
</script>
</body>
</html>
Event Bubbling or Event Capturing?
There are two ways of event propagation in the HTML DOM, bubbling and capturing.
Event propagation is a way of defining the element order when an event occurs. If
you have a <p> element inside a <div> element, and the user clicks on the <p>
element, which element's "click" event should be handled first?
In bubbling the inner most element's event is handled first and then the outer: the
<p> element's click event is handled first, then the <div> element's click event.
In capturing the outer most element's event is handled first and then the inner: the
<div> element's click event will be handled first, then the <p> element's click event.
With the addEventListener() method you can specify the propagation type by using
the "useCapture" parameter:
addEventListener(event, function, useCapture);
The default value is false, which will use the bubbling propagation, when the value is
set to true, the event uses the capturing propagation.
<!DOCTYPE html>
<html>
<head>
<style>
#myDiv1, #myDiv2 {
background-color: coral;
padding: 50px;
#myP1, #myP2 {
background-color: white;
font-size: 20px;
border: 1px solid;
padding: 20px;
</style>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
</head>
<body>
<h2>JavaScript addEventListener()</h2>
<div id="myDiv1">
<h2>Bubbling:</h2>
<p id="myP1">Click me!</p>
</div><br>
<div id="myDiv2">
<h2>Capturing:</h2>
<p id="myP2">Click me!</p>
</div>
<script>
[Link]("myP1").addEventListener("click", function() {
alert("You clicked the white element!");
}, false);
[Link]("myDiv1").addEventListener("click", function() {
alert("You clicked the orange element!");
}, false);
[Link]("myP2").addEventListener("click", function() {
alert("You clicked the white element!");
}, true);
[Link]("myDiv2").addEventListener("click", function() {
alert("You clicked the orange element!");
}, true);
</script>
</body>
</html>
The removeEventListener() method
The removeEventListener() method removes event handlers that have been attached
with the addEventListener() method:
Example:
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
background-color: coral;
border: 1px solid;
padding: 50px;
color: white;
font-size: 20px;
</style>
</head>
<body>
<h2>JavaScript removeEventListener()</h2>
<div id="myDIV">
<p>This div element has an onmousemove event handler that displays a random number every
time you move your mouse inside this orange field.</p>
<p>Click the button to remove the div's event handler.</p>
<button onclick="removeHandler()" id="myBtn">Remove</button>
</div>
<p id="demo"></p>
<script>
[Link]("myDIV").addEventListener("mousemove", myFunction);
function myFunction() {
[Link]("demo").innerHTML = [Link]();
function removeHandler() {
[Link]("myDIV").removeEventListener("mousemove", myFunction);
</script>
</body>
</html>