Scribd
Upload
8 views13 pages

Event Attribute

The document provides an overview of various HTML event attributes, including those for general events, windows, forms, keyboard, mouse, clipboard, and media. Each section describes specific attributes and their functions, along with example code snippets demonstrating their usage. It serves as a comprehensive guide for understanding how to handle user interactions in web development.

Uploaded by

ms4enterprises
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
8 views13 pages

Event Attribute

The document provides an overview of various HTML event attributes, including those for general events, windows, forms, keyboard, mouse, clipboard, and media. Each section describes specific attributes and their functions, along with example code snippets demonstrating their usage. It serves as a comprehensive guide for understanding how to handle user interactions in web development.

Uploaded by

ms4enterprises
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 13

HTML

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.

 HTML Event Attributes:


In HTML, we can use event actions on the browser, and with the help of
the event, the user responds to the system. Event Attributes can be used
with HTML elements to perform various actions.
Example:
<!DOCTYPE html>
<html>
<head>
<title>HTML Event Attribute Example</title>
</head>
<body>
<h1>HTML Event Attribute Example</h1>
<p onclick="changeColor(this)">Click me to change color.</p>
<script>
function changeColor(element) {
element.style.color = 'red';
}
</script>
</body>
</html>

©Topperworld
HTML

Output:

 Windows Event Attributes


Windows events are related for the window object, and it can only be applied
with <body> tag.

Attribute Description

onafterprint Executed the script after the document is printed.

onbeforeprint Executed the script before the document is printed.

onbeforeunload Executed the script before a document being unloaded.

onerror Executed the script when an error occurs.

onhashchange Executed the script when the anchor part in URL of the
webpage is changed.

onload Executed the script when the webpage is entirely loaded.

onmessage Executed the script when a message event occurs.

onoffline Executed the script when the network connection is


disconnected, and browser started working offline.

ononline Executed the script when the browser started working online

©Topperworld
HTML

onpagehide Executed the script when the current webpage is hidden


such as if the user has moved away from the current
webpage.

onpageshow Executed the script when the current webpage is focused.

onpopstate Executed the script when the window's active history is


changed.

onresize Executed the script when the window is resized.

onstorage Executed the script when web storage is updated.

onunload Executed the script when the current webpage is unloaded,


or window is closed.

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>

<p>This is a simple example using the onload event


attribute.</p>
</body>

</html>

©Topperworld
HTML

Output:

 Form Event Attributes


Form event occurs when the user performs some action within the form such
as submitting the form, selecting input field, etc.

The form events can be used with any element, but these are mainly used with
HTML form elements.

Following is the list of all Form Event attributes:

Attribute Description

onblur Executed the script when form element loses the focus.

onchange Executed the script when the value of the element is changed.

onfocus Trigger an event when the element gets focused.

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.

onsubmit Triggers the event when a form is submitted.

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:

 Keyboard Event Attributes


Keyboard event occurs when a user interacts with the keyboard. Following is a
list of the Keyboard event.

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:

 Mouse Event Attributes

Attribute Description

©Topperworld
HTML

onclick Trigger the event when the mouse clicks on the element.

ondblclick Trigger the event when mouse double-click occurs 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.

onmouseup Trigger the event when the mouse button is released.

onmousewheel Deprecated. Use the onwheel attribute.

onwheel Trigger the event when the mouse wheel rolls up or down on
the element

 Clipboard Event Attributes

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:

 Media Event Attributes

Attribute Description

onabort Executed the script when media playback is aborted.

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.

oncuechange Executed the script text cue of <track> element is


changed.

ondurationchange Executed the script when the media file duration is


changed.

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.

onerror Executed the script when some error occurred while

©Topperworld
HTML

fetching the media data.

onloadeddata Executed the script when media data is loaded.

onloadedmetadata Executed the script when metadata of media file is


loaded.

onloadstart Executed the script when loading of media file starts.

onpause Executed the script when media playback is paused.

onplay Executed the script when media file ready to play after
being paused.

onplaying Executed the script when media file is started playing.

onprogress Executed the script when the browser is in the process of


getting the media data.

onratechange Executed the script when playback speed changed.

onseeked Executed the script when seek operation is ended and


seeking attribute is set to false.

onseeking Executed the script when seek operation is active and


seeking attribute is set to true.

onstalled Executed the script when browser unexpectedly stopped


fetching the data media.

onsuspend Executed the script if fetching of media data is


intentionally stopped.

ontimeupdate Executed the script when playback position is changed,


such as if a user fasts forward the track.

©Topperworld
HTML

onvolumechange Executed the script when media volume is changed


(muted or unmuted).

onwaiting Executed the script if playback pause to wait for loading


more data.

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

You might also like