Magazine Logo
๐Ÿ“Œ Press Ctrl+D to bookmark this page.

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 was 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 allows event handler attributes, with JavaScript code, to be added to HTML elements.
					<element event='JavaScript Code/functions'>

<element event="JavaScript Code/functions">
					<button onclick="document.getElementById('demo').innerHTML = Date()">
    What time is it?</button>
<button onclick="this.innerHTML = Date()">The time is?</button>

onclick – Triggers on a mouse click
ondblclick – Triggers on a mouse double-click
ondrag – Triggers when an element is dragged
oninput – Triggers when an element gets user input
oninvalid – Triggers when an element is invalid
onkeydown – Triggers when a key is pressed
onkeypress – Triggers when a key is pressed and released
onkeyup – Triggers when a key is released
onload – Triggers when the document loads
onmousedown -Triggers when a mouse button is pressed
onmousemove – Triggers when the mouse pointer moves
onmouseout – Triggers when the mouse pointer moves out of an element
onmouseover – Triggers when the mouse pointer moves over an element
onmouseup – Triggers when a mouse button is released
onpause – Triggers when media data is paused
onplay – Triggers when media data is going to start playing
onplaying – Triggers when media data has start playing
onsubmit – Triggers when a form is submitted

Sample1: onclick


Sample2: body


Sample3: elements events


JavaScript Event Handlers
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 …

Leave a Comment

Your email address will not be published. Required fields are marked *

AdsReg Magazine We would like to show you notifications for the latest news and updates. You can disable it when you want.
Allow Notifications