Scribd
Upload
10 views

class notes Events in Java Script part2

class notes Events in Java Script part2

Uploaded by

shubratporwal7
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
10 views

class notes Events in Java Script part2

class notes Events in Java Script part2

Uploaded by

shubratporwal7
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 9

4.

Form events in javascript


Forms in HTML have many different types of events that can be triggered
at different action points.

The form events in javascript are:

Event Action Description

submit onsubmit event is fired when the form is submitted

focus onfocus event is fired when the cursor is focused on form

blur Focus event is fired when the focus is removed from input section
Removed

chang onchange event is fired when the value of the input is changed
e

reset onreset event is fired when the form is reset

select onselect event is fired when a selection is made

submit event

The submit event is triggered when you submit the form.

Note: submit event by default refreshes the page when the form is
submitted.

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>Javascript - submit event</title>
</head>

<body>
<h1>submit form event is triggered when the form is submitted</h1>
<p>Submit the form to see the result</p>
<form onsubmit="submitForm(event)">
<input type="text" name="name" placeholder="name">
<input type="text" name="email" placeholder="email">
<input type="submit" value="submit">
</form>

<script>
function submitForm(event) {
event.preventDefault();
alert("form submitted");
}
</script>
</body>
</html>

focus event

The focus event is triggered when the input gains focus.

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>Javascript - focus event</title>
</head>

<body>
<h1>focus event in form element is triggered when the element is focused</h1>
<p>Focus in the input below.</p>
<input type="text" onfocus="focusInput(this)">

<script>
function focusInput(event) {
event.style.backgroundColor = "orange";
}
</script>
</body>

</html>

blur event

The blur event is triggered when the input loses focus.

Example
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>Javascript - blur event</title>
</head>

<body>
<h1>blur event in form element is triggered when the user removes the focus of the input.</h1>
<p>Focus in the input below and then remove the focus.</p>
<input type="text" onblur="blurInput()">

<script>
function blurInput() {
alert("focus removed");
}
</script>
</body>

</html>
change event

The change event is triggered when the value of an input changes.

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>Javascript - change event</title>
</head>

<body>
<h1>change event in form element is triggered when the value of the element is changed</h1>
<p>Change the input below then click outside the input to trigger the change event.</p>
<input type="text" onchange="changeInput(this)">
<p id="output"></p>

<script>
function changeInput(event) {
document.getElementById("output").innerHTML = event.value;
}
</script>
</body>

</html>

reset event

The reset event is triggered when the form is reset.

There lies an input type called reset, which is not a submit button. It is
used to reset the form.

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>Javascript - reset event</title>
</head>

<body>
<h1>reset event in form element is triggered when the form is reset</h1>
<p>Set some value in the form and then reset it. The reset event is triggered.</p>
<form onreset="resetForm()">
<input type="text" name="name" placeholder="name">
<input type="text" name="email" placeholder="email">
<input type="reset" value="reset">
</form>

<script>
function resetForm() {
alert("form reset");
}
</script>
</body>

</html>

select event

The select event is triggered when a new input is selected.

In the example below, we are going to use the select element to select the
input field.

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>Javascript - select event</title>
</head>

<body>
<h1>select event is triggered when the user selects an option from a dropdown list</h1>
<p>Select an option from the dropdown list to see the result.</p>
<select name="cars" onchange="selectInput()">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>

<script>
function selectInput() {
alert("you selected: " + this.value);
}
</script>
</body>

</html>

5. Storage Event in JavaScript


The Storage Event is triggered when the storage area is changed.

Note: The storage event triggered only when the storage area of another
window is changed not the current window.

The following example shows how to use the Storage Event in JavaScript.

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>Javascript - storage event</title>
</head>

<body>
<h1>storage event is fired when the storage area changes</h1>
<p><b>Note</b>: This event is only fired when the storage area of other windows is changed and
not when the storage area of the current window is changed.</p>
<button onclick="addItemLocalStorage()">Add item to local storage</button>

<script>
// add new item to local storage
function addItemLocalStorage() {
var newWindow = window.open("");
newWindow.localStorage.setItem("name", "John");
newWindow.close();
}

function storageEvent() {
alert("Storage changed");
}
window.addEventListener("storage", storageEvent);
</script>
</body>

</html>

6. Media Events in JavaScript


Media events are events that are triggered by media elements. These
events are triggered when different actions are taken or occur on the
media element.

The list of media events is shown in the table below.

Event Description

abort Triggered when the loading of an audio/video is aborted.

canplay Triggered when the browser can start playing the audio/video.

canplaythrou Triggered when the browser can play through the audio/video without
gh stopping for buffering.

durationchan Triggered when the duration of the audio/video is changed.


ge

emptied Triggered when the current playlist is empty.

ended Triggered when the current playlist is ended.

error Triggered when an error occurs.

loadeddata Triggered when the browser has loaded the current frame of the
audio/video.

loadedmetad Triggered when the browser has loaded meta data for the audio/video.
ata
loadstart Triggered when the browser starts looking for the audio/video.

pause Triggered when the audio/video is paused.

play Triggered when the audio/video is played.

playing Triggered when the audio/video is playing.

progress Triggered when the browser is downloading the audio/video.

ratechange Triggered when the playing speed of the audio/video is changed.

sought Triggered when the user is finished moving/skipping to a new position in


the audio/video.

seeking Triggered when the user starts moving/skipping to a new position in the
audio/video.

stalled Triggered when the browser is trying to get media data, but data is not
available.

suspend Triggered when the browser is intentionally not getting media data.

timeupdate Triggered when the current playback position has changed.

volumechang Triggered when the volume has been changed.


e

waiting Triggered when the video stops because it needs to buffer the next frame.

7. Drag Events in JavaScript


Drag events are events that are triggered by drag and drop actions.

When you drag a draggable element, the browser fires the dragstart
event. This event is followed by a number of events, depending on the
type of drag action.

The list of drag events is shown in the table below.

Event Description

ondrag Triggered when an element is being dragged

ondragend event occurs when an element stops being dragged

ondragent event occurs when an element or text selection is being dragged over a valid
er drop target (every few hundred milliseconds).

ondraglea event occurs when an element or text selection leaves a valid drop target.
ve

ondragove event occurs when an element or text selection is being dragged over a valid
r drop target (every few hundred milliseconds).

ondragsta event occurs when an element is being dragged


rt

ondrop event occurs when an element or text selection is being dropped on a valid
drop target.

Here is an example that shows different drag events in action.

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>Javascript - drag and drop events</title>
</head>

<body>
<h1>Drag and drop events in javascript</h1>
<p>Drag the paragraph below.</p>
<p draggable="true" ondrag="onDrag()" ondragstart="dragStart()" ondragend="dragEnd()">Drag
me</p>
<textarea ondragenter="dragEnter()" ondragleave="dragLeave()"
ondragover="dragOver(event)"></textarea>
<p id="output"></p>
<script>
const output = document.getElementById("output");
function onDrag() {
output.innerHTML += "Dragging...<br>";
}
function dragStart() {
output.innerHTML = "Dragging started...<br>";
}
function dragEnd() {
output.innerHTML += "Dragging ended...<br>";
}
function dragEnter() {
output.innerHTML += "Dragging entered...<br>";
}
function dragLeave() {
output.innerHTML += "Dragging left...<br>";
}
</script>
</body>

</html>

8. Clipboard Events in JavaScript


Clipboard events are events that are triggered by the copy, cut, and paste
actions.

The list of clipboard events is shown in the table below.

Event Description
oncopy Triggered when the user copies text to the clipboard.

oncut Triggered when the user cuts text to the clipboard.

onpaste Triggered when the user pastes text from the clipboard.

copy event

When you copy text to the clipboard, the browser fires the oncopy event.

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>Javascript - oncopy events</title>
</head>

<body>
<h1>oncopy events is a javascript event that fires when the user copies text to the clipboard</h1>
<p oncopy="copy()">Copy me!</p>

<script>
function copy() {
alert("Copied!");
}
</script>
</body>

</html>

cut event

When you cut text to the clipboard, the browser fires the oncut event.

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>Javascript - oncut events</title>
</head>

<body>
<h1>oncut events is a javascript event that fires when the user cut the content of an element</h1>
<input type="text" oncut="cut()" value="Cut Me!">

<script>
function cut() {
alert("Text cut!");
}
</script>
</body>
</html>

paste event

When you paste text from the clipboard, the browser fires the onpaste
event.

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>Javascript - onpaste events</title>
</head>

<body>
<h1>onpaste events is a javascript event that fires when the user paste something in the input
field</h1>
<input type="text" onpaste="pasteHandler()">

<script>
function pasteHandler() {
alert("Paste event is fired");
}
</script>
</body>

</html>

You might also like