HTML is able to allow an event trigger action in a browser, like starting JavaScript when a user clicks on an element.
Events (window event attributes) triggered for the window object (in the <body> element):
onafterprint (value-script) – the event starts when a page has started printing, or if the print dialogue box has been closed.
Syntax:
<body onafterprint="script"> onbeforeprint (value- script) – the event starts when a page is about to be printed.
Syntax:
<body onbeforeprint="script"> onbeforeunload (value- script) – the event starts when the document is about to be unloaded.
Syntax:
<body onbeforeunload="script">onerror (value- script) – the event starts when an error occurred while loading an external file.
Syntax:
<body onerror="script"> onhashchange (value- script) – the event starts when there have been changes to the anchor part (begins with a ‘#’ symbol) of the current URL.
Syntax:
<element onhashchange="script"> Example:
<!DOCTYPE html>
<html>
<body onhashchange="onhashchangeExample()">
<p>Press the button to change the anchor part of the current URL to #newPart.</p>
<button onclick="changePart()">Try it</button>
<p id="example"></p>
<script>
// Use the location.hash property to change the anchor part
function changePart() {
location.hash = "newPart";
var x = "The anchor part is now: " + location.hash;
document.getElementById("example").innerHTML = x;
}
// text alert
function onhashchangeExample() {
alert("The anchor part has changed!");
}
</script>
</body>
</html>Output:
Press the button to change the anchor part of the current URL to #newPart.
onload (value- script) – the event starts when an object has been loaded.
Syntax:
<body onload="script"> onmessage (value- script) – the event starts when the message is triggered.
onoffline (value- script) – the event starts when the browser starts to work offline.
Syntax:
<body onoffline="script"> ononline (value- script) – the event starts when the browser starts to work online.
Syntax:
<body ononline="script"> onpagehide (value- script) – the event starts when a user navigates away from a website.
onpageshow (value- script) – the event starts when a user navigates to a website.
Syntax:
<body onpageshow="script"> onpopstate (value- script) – the event starts when the window’s history changes.
onresize (value- script) – the event starts when the browser window is resized.
Syntax:
<body onresize="script"> Example:
<!DOCTYPE html>
<html>
<body onresize="onresizeExample()">
<p>To see the alert, resize the browser window.</p>
<script>
function onresizeExample() {
alert("You have changed the size of the browser window!");
}
</script>
</body>
</html>Output:
To see the alert, resize the browser window.
onstorage (value- script) – the event starts when a Web Storage area is updated.
onunload (value- script) – once a page has unloaded (or the browser window has been closed).
Syntax:
<element onunload="script"> Events (form events) triggered by actions inside a HTML form:
onblur (value- script) – the event starts the moment that the element loses focus.
Syntax:
<element onblur="script"> Example:
<!DOCTYPE html>
<html>
<body>
Enter your name: <input type="text" name="name" id="name" onblur="onblurExample()">
<p>When you leave the input field, a function is triggered which transforms the input text to upper case.</p>
<script>
function onblurExample() {
var x = document.getElementById("name");
x.value = x.value.toUpperCase();
}
</script>
</body>
</html>Output:
When you leave the input field, a function is triggered which transforms the input text to upper case.
onchange (value- script) – the event starts the moment when the value of the element is changed.
Syntax:
<element onchange="script"> Example:
<!DOCTYPE html>
<html>
<body>
<p>Select an option from the list.</p>
<select id="optionList" onchange="onchangeExample()">
<option value="HTML">HTML</option>
<option value="CSS">CSS</option>
<option value="JavaScript">JavaScript</option>
<option value="jQuery">jQuery</option>
</select>
<p>When you select an option, a function is triggered which outputs the value of the selected option.</p>
<p id="example"></p>
<script>
function onchangeExample() {
var x = document.getElementById("optionList").value;
document.getElementById("example").innerHTML = "You selected: " + x;
}
</script>
</body>
</html>Output:
Select an option from the list.
When you select an option, a function is triggered which outputs the value of the selected option.
oncontextmenu (value- script) – the event starts when the user right-clicks on an element to open the context menu.
Note: The contextmenu attribute only works in Firefox!
Syntax:
<element oncontextmenu="script"> onfocus (value- script) – the event starts the moment that the element gets focus.
Syntax:
<element onfocus="script"> Example:
<!DOCTYPE html>
<html>
<body>
Name: <input type="text" id="first-name" onfocus="onfocusExample(this.id)"><br>
Surname: <input type="text" id="last-name" onfocus="onfocusExample(this.id)">
<script>
function onfocusExample(x) {
document.getElementById(x).style.background = "#2a9d8f";
}
</script>
</body>
</html>A function is triggered when one of the input fields gets focus (the function changes the background color of the input field).
Output:
Surname:
oninput (value- script) – the event starts when an element gets user input.
Syntax:
<element oninput="script"> Example:
<!DOCTYPE html>
<html>
<body>
<p>Type something in the text field to trigger a function.</p>
<input type="text" id="myText" oninput="oninputExample()">
<p id="example"></p>
<script>
function oninputExample() {
var x = document.getElementById("myText").value;
document.getElementById("example").innerHTML = "You wrote: " + x;
}
</script>
</body>
</html>Output:
Type something in the text field to trigger a function.
oninvalid (value- script) – the event starts when a submittable <input> element is invalid.
Syntax:
<element oninvalid="script"> onreset (value- script) – the event starts when a form is reset.
Syntax:
<element onreset="script"> onselect (value- script) – the event starts after some text has been selected in an element.
Syntax:
<element onselect="script"> Example:
<!DOCTYPE html>
<html>
<body>
Select the text: <input type="text" value="Select me!" onselect="onselectExample()">
<script>
function onselectExample() {
alert("Thanks! You have selected some text!");
}
</script>
</body>
</html>Output:
onsubmit (value- script) – the event starts when a form is submitted.
Syntax:
<form onsubmit="script"> Example:
<!DOCTYPE html>
<html>
<body>
<form action="" onsubmit="onsubmitExample()">
Name: <input type="text" name="firstName">
<input type="submit" value="Submit">
</form>
<script>
function onsubmitExample() {
alert("The form was submitted");
}
</script>
</body>
</html>Output:
The event (keyboards events) starts when the user is pressing/ releasing a key:
onkeydown (value- script) – the event starts when a user is pressing a key.
Syntax:
<element onkeydown="script"> Example:
<!DOCTYPE html>
<html>
<body>
<input type="text" onkeydown="onkeydownExample()">
<script>
function onkeydownExample() {
alert("You pressed a key inside the input field");
}
</script>
</body>
</html>Output:
onkeypress (value- script) – the event starts when the user presses a key (on the keyboard).
Syntax:
<element onkeypress="script"> onkeyup (value- script) – the event starts when the user releases a key (on the keyboard).
Syntax:
<element onkeyup="script"> Example:
<!DOCTYPE html>
<html>
<body>
<p>Type some text (the function transforms the character to upper case):</p>
Type some text: <input type="text" id="someText" onkeyup="onkeyupExample()">
<script>
function onkeyupExample() {
var x = document.getElementById("someText");
x.value = x.value.toUpperCase();
}
</script>
</body>
</html>Output:
Type some text (the function transforms the character to upper case):
Type some text:Mouse Events:
onclick (value- script) – the event starts on a mouse click on the element.
Syntax:
<element onclick="script"> Example:
<!DOCTYPE html>
<html>
<body>
<button onclick="onclickExample()">Click me</button>
<p id="example"></p>
<script>
function onclickExample() {
document.getElementById("example").innerHTML = "Thanks!";
}
</script>
</body>
</html>Output:
ondblclick (value- script) – the event starts on a mouse double-click on the element.
Syntax:
<element ondblclick="script"> Example:
<!DOCTYPE html>
<html>
<body>
<p id="example" ondblclick="ondblclickExample()">Double-click on the text to change the text color.</p>
<script>
function ondblclickExample() {
document.getElementById("example").style.color = "#2a9d8f";
}
</script>
</body>
</html>Output:
Double-click on the text to change the text color.
onmousedown (value- script) – the event starts when a mouse button is pressed down on the element.
Syntax:
<element onmousedown="script"> onmousemove (value- script) – the event starts when the pointer is moving while it is over an element.
Syntax:
<element onmousemove="script"> Example:
<!DOCTYPE html>
<html>
<body>
<img onmousemove="largeImage(this)" onmouseout="image(this)" border="0" src="https://lenadesign.org/wp-content/uploads/2021/06/icon.png" alt="car" width="58" height="49">
<script>
function largeImage(x) {
x.style.height = "69px";
x.style.width = "78px";
}
function image(x) {
x.style.height = "49px";
x.style.width = "58px";
}
</script>
</body>
</html>Output:
onmouseout (value- script) – the event starts when the mouse pointer moves out of an element.
Syntax:
<element onmouseout="script"> onmouseover (value- script) – the event starts when the mouse pointer moves over an element.
Syntax:
<element onmouseover="script"> onmouseup (value- script) – the event starts when a mouse button is released over the element.
Syntax:
<element onmouseup="script"> Example:
<!DOCTYPE html>
<html>
<body>
<p id="p-1" onmousedown="mouseDown()" onmouseup="mouseUp()">
Click the text! The mouseDown() function is triggered when the mouse button is pressed down over this paragraph. The function sets the color of the text to red. The mouseUp() function is triggered when the mouse button is released. The mouseUp() function sets the color of the text to green.
</p>
<script>
function mouseDown() {
document.getElementById("p-1").style.color = "#e76f51";
}
function mouseUp() {
document.getElementById("p-1").style.color = "#2a9d8f";
}
</script>
</body>
</html>Output:
Click the text! The mouseDown() function is triggered when the mouse button is pressed down over this paragraph. The function sets the color of the text to red. The mouseUp() function is triggered when the mouse button is released. The mouseUp() function sets the color of the text to green.
onwheel (value- script) – the event starts when the wheel of a pointing device is rolled up or down over an element.
Syntax:
<element onwheel="script"> Example:
<!DOCTYPE html>
<html>
<head>
<style>
#example {
border: 2px solid #333;
}
</style>
</head>
<body>
<div id="example" onwheel="onwheelExample()">This example demonstrates how to assign an "onwheel" event event to a DIV element. Roll the mouse wheel over me - either up or down!</div>
<script>
function onwheelExample() {
document.getElementById("example").style.fontSize = "30px";
}
</script>
</body>
</html>Output:
Drag Events:
ondrag (value- script) – the event starts when an element or text selection is being dragged.
Syntax:
<element ondrag="script"> Example:
<!DOCTYPE HTML>
<html>
<head>
<style>
.drop-target {
float: left;
width: 100px;
height: 50px;
text-align: center;
margin:20px;
border: 2px solid #333;
}
</style>
</head>
<body>
<div class="drop-target" ondrop="drop(event)" ondragover="allowDrop(event)">
<p ondragstart="dragStart(event)" ondrag="dragging(event)" draggable="true" id="drag-target">Drag me!</p>
</div>
<div class="drop-target" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<p style="clear:both;" id="exampleOne"></p>
<script>
function dragStart(event) {
event.dataTransfer.setData("Text", event.target.id);
}
function dragging(event) {
document.getElementById("exampleOne").innerHTML = "The p element is being dragged";
}
function allowDrop(event) {
event.preventDefault();
}
function drop(event) {
event.preventDefault();
var data = event.dataTransfer.getData("Text");
event.target.appendChild(document.getElementById(data));
document.getElementById("exampleOne").innerHTML = "The p element was dropped";
}
</script>
</body>Output:
Drag me!
ondragend (value- script) – the event starts when the user has finished dragging an element or text selection.
Syntax:
<element ondragend="script"> ondragenter (value- script) – the event starts when a draggable element or text selection enters a valid drop target.
Syntax:
<element ondragenter="script"> Example:
<!DOCTYPE HTML>
<html>
<head>
<style>
.droptarget {
float: left;
width: 100px;
height: 50px;
margin: 20px;
text-align: center;
border: 2px solid #333;
}
</style>
</head>
<body>
<div class="droptarget" ondrop="drop(event)" ondragenter="dragEnter(event)" ondragleave="dragLeave(event)" ondragover="allowDrop(event)">
<p ondragstart="dragStart(event)" draggable="true" id="dragtarget">Drag me!</p>
</div>
<div class="droptarget" ondragenter="dragEnter(event)" ondragleave="dragLeave(event)" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<p style="clear:both;" id="exampleTwo"></p>
<script>
function dragStart(event) {
event.dataTransfer.setData("Text", event.target.id);
}
function dragEnter(event) {
if ( event.target.className == "droptarget" ) {
event.target.style.border = "5px dashed #264653";
document.getElementById("exampleTwo").innerHTML = "Entered the dropzone";
}
}
function dragLeave(event) {
if ( event.target.className == "droptarget" ) {
event.target.style.border = "";
document.getElementById("exampleTwo").innerHTML = "Left the dropzone";
}
}
function allowDrop(event) {
event.preventDefault();
}
function drop(event) {
event.preventDefault();
var data = event.dataTransfer.getData("Text");
event.target.appendChild(document.getElementById(data));
}
</script>
</body>
</html>Output:
Drag me!
ondragleave (value- script) – the event starts when a draggable element or text selection leaves a valid drop target.
Syntax:
<element ondragleave="script"> ondragover (value- script) – the event starts when a draggable element or text selection is being dragged over a valid drop target.
Syntax:
<element ondragover="script"> Example:
<!DOCTYPE HTML>
<html>
<head>
<style>
#dropTarget {
float: left;
width: 300px;
height: 100px;
margin: 20px;
text-align: center;
border: 2px solid #333;
}
</style>
</head>
<body>
<p ondragstart="dragStart(event)" draggable="true" id="dragtarget">Drag the text into the rectangle!</p>
<div id="dropTarget" ondrop="drop(event)" ondragover="allowDrop(event)">
</div>
<p style="clear:both;" id="exampleThree"></p>
<script>
function dragStart(event) {
event.dataTransfer.setData("Text", event.target.id);
}
function allowDrop(event) {
event.preventDefault();
document.getElementById("exampleThree").innerHTML = "The p element is OVER the droptarget.";
event.target.style.border = "5px dashed #264653";
}
function drop(event) {
event.preventDefault();
var data = event.dataTransfer.getData("Text");
event.target.appendChild(document.getElementById(data));
document.getElementById("exampleThree").innerHTML = "The p element was dropped.";
}
</script>
</body>
</html>Output:
Drag the text into the rectangle!
ondragstart (value- script) – the event starts when the user starts to drag an element or text selection.
Syntax:
<element ondragstart="script"> ondrop (value- script) – the event starts when a draggable element or text selection is dropped on a valid drop target.
Syntax:
<element ondrop="script"> onscroll (value- script) – the event starts when an element’s scrollbar is being scrolled.
Syntax:
<element onscroll="script"> Example:
<!DOCTYPE html>
<html>
<head>
<style>
#text {
border: 2px solid #333;
width: 350px;
height: 150px;
overflow: scroll;
}
</style>
</head>
<body>
<div id="text" onscroll="onscrollExample()">He was an old man who fished alone in a skiff in the Gulf Stream and he had gone eighty-four days now without taking a fish. In the first forty days a boy had been with him. But after forty days without a fish the boy’s parents had told him that the old man was now definitely and finally salao, which is the worst form of unlucky, and the boy had gone at their orders in another boat which caught three good fish the first week.
<br><br>
It made the boy sad to see the old man come in each day with his skiff empty and he always went down to help him carry either the coiled lines or the gaff and harpoon and the sail that was furled around the mast. The sail was patched with flour sacks and, furled, it looked like the flag of permanent defeat. </div>
<script>
function onscrollExample() {
document.getElementById("text").style.color = "#2a9d8f";
}
</script>
</body>
</html>Output:
It made the boy sad to see the old man come in each day with his skiff empty and he always went down to help him carry either the coiled lines or the gaff and harpoon and the sail that was furled around the mast. The sail was patched with flour sacks and, furled, it looked like the flag of permanent defeat.
Clipboard Events:
oncopy (value- script) – the event starts when the user copies the content of an element.
Syntax:
<element oncopy="script"> Example:
<!DOCTYPE html>
<html>
<body>
<input type="text" oncopy="oncopyExample()" value="Try to copy this text">
<p id="example"></p>
<script>
function oncopyExample() {
document.getElementById("example").innerHTML = "You copied text!"
}
</script>
</body>
</html>Output:
oncut (value- script) – the event starts when the user cuts the content of an element.
Syntax:
<element oncut="script"> onpaste (value- script) – the event starts when the user pastes some content in an element.
Syntax:
<element onpaste="script"> Enjoy coding!