Event Attribute
Event Attribute
Topperworld.in
Event Attribute
Events are actions that happen in the browser when the user does
something For example when users click on the mouse or type something
on the keyboard.
©Topperworld
HTML
Output:
Attribute Description
onhashchange Executed the script when the anchor part in URL of the
webpage is changed.
ononline Executed the script when the browser started working online
©Topperworld
HTML
Example:
<!DOCTYPE html>
<html>
<head>
<title>HTML Window Event Attribute Example</title>
</head>
<body onload="document.body.style.backgroundColor =
'lightblue';">
<h1>HTML Window Event Attribute Example</h1>
</html>
©Topperworld
HTML
Output:
The form events can be used with any element, but these are mainly used with
HTML form elements.
Attribute Description
onblur Executed the script when form element loses the focus.
onchange Executed the script when the value of the element is changed.
oninput Executed the script when the user enters input to the element.
oninvalid Executed the script when the element does not satisfy its
predefined constraints.
©Topperworld
HTML
onreset Triggers the event when user reset the form element values.
onsearch Triggers the event when a search field receives some input.
onselect Triggers the event when the user has selected some text.
Example:
<!DOCTYPE html>
<html>
<head>
<title>HTML Form Event Attribute Example</title>
</head>
<body>
<h1>HTML Form Event Attribute Example</h1>
<form action="submit.php" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
©Topperworld
HTML
<br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Output:
Attribute Description
onkeydown Triggers the event when the user presses down a key on the
keyboard.
onkeypress Trigger the event when the user presses the key which displays
some character.
onkeyup Trigger the event when the user releases the currently pressed
key.
©Topperworld
HTML
Example:
<!DOCTYPE html>
<html>
<head>
<title>Keyboard Event Example</title>
</head>
<body>
<p>Press a key to see it displayed below:</p>
<div id="output"></div>
<script>
document.addEventListener('keydown', function(event) {
var key = event.key || String.fromCharCode(event.keyCode);
document.getElementById('output').textContent = 'You pressed: ' +
key;});
</script>
</body>
</html>
Output:
Attribute Description
©Topperworld
HTML
onclick Trigger the event when the mouse clicks on the element.
onmousedown Trigger the event when the mouse button is pressed on the
element.
onmousemove Trigger the event when the mouse pointer moves over the
element.
onmouseout Trigger the event when the mouse moves outside the
element.
onmouseover Trigger the event when the mouse moves onto the element.
onwheel Trigger the event when the mouse wheel rolls up or down on
the element
Attribute Description
oncopy Trigger the event when the user copies the content to the system
clipboard.
oncut Trigger the event when the content of an element is cut and copy
to the clipboard.
©Topperworld
HTML
onpaste Trigger the event when the user pastes some content in an
element.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Clipboard Event Example</title>
</head>
<body>
<h1>Clipboard Event Example</h1>
<input type="text" id="copyText" placeholder="Enter text to copy or paste here">
<button onclick="copyToClipboard()">Copy to Clipboard</button>
<script>
function copyToClipboard() {
const copyText = document.getElementById("copyText");
copyText.select(); // Select the text inside the input field
document.execCommand("copy");
alert("Text copied to clipboard: " + copyText.value);
}
document.getElementById("copyText").addEventListener("paste", function(event){
alert("Pasted text: " + event.clipboardData.getData('text')); });
</script>
</body>
</html>
©Topperworld
HTML
Output:
Attribute Description
oncanplay Executed the script when the media file is ready to play.
oncanplaythrough Executed the script when the media file is ready to play
without buffering or stopping.
onemptied Executed the script if media occurs some fatal error, and
the file becomes unavailable.
onended Executed the script when the media file occurs its end
point.
©Topperworld
HTML
onplay Executed the script when media file ready to play after
being paused.
©Topperworld
HTML
Example:
<!DOCTYPE html>
<html>
<head>
<title>HTML Media Event Attribute Example</title>
</head>
<body>
<h1>HTML Media Event Attribute Example</h1>
<video controls>
<source src="example.mp4" type="video/mp4">
Your browser does not support the video tag. </video>
<audio controls>
<source src="example.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>
</body>
</html>
Output:
©Topperworld
HTML
©Topperworld