revision:
The onscroll event occurs when an element's scrollbar is being scrolled.
Supported HTML tags: <address>, <blockquote>, <body>, <caption>, <center>, <dd>, <dir>, <div>, <dl>, <dt>, <fieldset>, <form>, <h1> to <h6>, <html>, <li>, <<menu>, <object>, <ol>, <p>, <pre>, <select>, <tbody>, <textarea>, <tfoot>, <thead>, <ul>.
<element onscroll="script"></element>
script: the attribute works when the script is triggered.
Try the scrollbar in div.
Scrolled 0 times.
codes:
<p class="spec">Try the scrollbar in div.</p>
<div id="one" style="margin-left:3vw;" onscroll="myScroll()">In my younger and
more vulnerable years my father gave me some advice that I've been turning over
in my mind ever since.
<br><br>
'Whenever you feel like criticizing anyone,' he told me, just remember that all
the people in this world haven't had the advantages that you've had.'</div>
<p class="spec">Scrolled <span id="demo">0</span> times.</p>
<script>
var x = 0;
function myScroll() {
document.getElementById("demo").innerHTML = x += 1;
}
</script>
<style>
#one{ border: 1px solid black; width: 25vw; height: 10vw; overflow: scroll; }
</style>
Try the scrollbar in div.
codes:
<p class="spec">Try the scrollbar in div.</p>
<div id="twoone" style="margin-left:3vw;" onscroll="scrollMe()">In my younger
and more vulnerable years my father gave me some advice that I've been turning
over in my mind ever since.
<br><br>
'Whenever you feel like criticizing anyone,' he told me, just remember that all
the people in this world haven't had the advantages that you've had.'</div>
<script>
function scrollMe() {
document.getElementById("two").style.background = "green";
}
</script>
<style>
#two{ border: 1px solid black; width: 25vw; height: 10vw; overflow: scroll; }
</style>
The onsearch attribute fires when a user presses the "ENTER" key or clicks the "x" button in an <input> element with type="search".
Supported HTML tags: <input type="search">
<element onsearch="script"></element >
script: the script to be run on onsearch.
Write something in the search field and press "ENTER".
codes:
<p class="spec">Write something in the search field and press "ENTER".</p>
<input style="margin-left:3vw;" type="search" id="myInput" onsearch="searchF()">
<p class="spec" id="demo_a"></p>
<script>
function searchF() {
var x = document.getElementById("myInput");
document.getElementById("demo_a").innerHTML = "You are searching for: " + x.value;
}
</script>
codes:
<input style="margin-left:3vw;" type="search" id="mine" onsearch="searchWhat()">
<p class="spec" id="where"></p>
<script>
function searchWhat() {
var x = document.getElementById("mine");
document.getElementById("where").innerHTML = "searching content: " + x.value;
}
</script>
The onseeked attribute defines a script to run when the user is finished moving/skipping to a new position in the audio/video.
The onseeked attribute is part of the event attributes and can be used on the following elements: <audio> and <video>. Use the currentTime property of the Audio/Video Object to get the current playback position.
<element onseeked="script"></element>
script: the script to be run on onseeked.
Move to a new position in the audio
codes:
<p class="spec" id="audio-1">Move to a new position in the audio</p>
<audio style="margin-left:3vw;" id="myAudio" controls onseeked="seekContent()">
<source src="../pics/horse.wav" type="audio/wav">
Your browser does not support the audio element.
</audio>
<script>
function seekContent() {
document.getElementById("audio-1").innerHTML = "You moved to position "
+ document.getElementById("myAudio").currentTime;
}
</script>
Move to a new position in the video:
codes:
<p class="spec" id="video-1">Move to a new position in the video:</p>
<video style="margin-left:3vw;" id="myVideo" width="320" height="176" controls
onseeked="seekVideo()">
<source src="../pics/Wuzhen-20-10_02.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
<script>
function seekVideo() {
document.getElementById("video-1").innerHTML = "You moved to position " +
document.getElementById("myVideo").currentTime;
}
</script>
The onseeking attribute defines a script to run when the user starts moving/skipping to a new position in the audio/video.
The onseeking attribute is part of the event attributes and can be used on the following elements: <audio> and <video>.
Use the "currentTime" property of the Audio/Video Object to get the current playback position.
<element onseeking="script"></element>
script: the script to be run on onseeking.
Move to a new position in the audio:
codes:
<div>
<p class="spec" id="demo-aa">Move to a new position in the audio:</p>
<audio style="margin-left:3vw;" id="myAudio-1" controls onseeking="myFunction()">
<source src="../pics/horse.wav" type="audio/wav">
Your browser does not support the audio element.
</audio>
</div>
<script>
function myFunction() {
document.getElementById("demo-aa").innerHTML = "You moved to position " + document.getElementById("myAudio-1").currentTime;
}
</script>
Move to a new position in the video:
codes:
<p class="spec" id="demo-1">Move to a new position in the video:</p>
<video style="margin-left:3vw;" id="myVideo" width="320" height="176" controls
onseeking="myFunc()">
<source src="../pics/Wuzhen-20-10_02.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
<script>
function myFunc() {
document.getElementById("demo-1").innerHTML = "You moved to position " +
document.getElementById("myVideo").currentTime;
}
</script>
The onselect event occurs after some text has been selected in an element.
The onselect event is mostly used on <input type="text"> or <textarea> elements.
<element onselect="script"></element >
script: the script to be run on onselect.
Select some of the text:
codes:
<p class="spec">Select some of the text: <input type="text"
value="Hello world!"
onselect="selectFunction()"></p>
<script>
function selectFunction() {
alert("You selected some text!");
}
</script>
Select some text:
codes:
<p class="spec">Select some text: <input type="text" value="Hello world!" onselect="selectText()"></p>
<p class="spec" id="demo-bb"></p>
<script>
function selectText() {
document.getElementById("demo-bb").innerHTML = "You selected
some text!";
}
</script>
The onstalled attribute defines a script to run when the browser is trying to get media data, but data is not available.
The onstalled attribute is part of the event attributes and can be used on the following elements: <audio> and <video>.
<element onstalled="Script"></element>
script: the script to be run on onstalled.
codes:
<video style="margin-left:3vw;" controls id="videoID">
<source src="../pics/Wuzhen-20-10_03.mp4" type="video/mp4">
</video>
<p class="spec" id="pep-1"></p>
<script>
document.getElementById("videoID").addEventListener("stalled",
someFunc);
function someFunc() {
document.getElementById("pep-1").innerHTML = "Data of this
media not available";
}
someFunc();
</script>
The event attribute onstorage is triggered when the web datastore is updated.
<element onstorage="script"></element>
script: the script to be run on onstorage.
The onsubmit attribute fires when a form is submitted. Supported HTML tags: <form>
<element onsubmit="script"></element>
script: the script to be run on onsubmit.
Example 1
When you submit the form, a function is triggered which alerts some text.
codes:
<p class="spec">When you submit the form, a function is
triggered which alerts some text.</p>
<form style="margin-left:3vw;" action="action_page.php"
onsubmit="subFunction()">
<p class="spec">Enter name: <input type="text"
name="fname"></p>
<input type="submit" value="Submit">
</form>
<p class="spec" style="margin-left:3vw;"id="idea-1"></p>
<script>
function subFunction() {
alert("the form has been submitted");
}
</script>
codes:
<form style="margin-left:3vw;" onsubmit = "easyGoing()">
<p class="spec"> First Name:<input type = "text"
value = "" /><br/>
Last Name:<input type = "text" value = ""/></p><br/>
<input type = "submit" value = "Submit"/>
</form>
<script>
function easyGoing() {
alert("Form submitted successfully.") ;
}
</script>
The onsuspend attribute defines a script to run when the browser is intentionally not getting media data. This event occurs when the loading of the media is suspended (prevented from continuing). This can happen when the download has completed, or because it has been paused for some reason.
The onsuspend attribute is part of the event attributes, and can be used on the following elements: <audio> and <video>.
<element onsuspend="script"></element>
script: the script to be run on onsuspend.
codes:
<audio style="margin-left:3vw;" controls id="audioID">
<source src="../pics/horse.wav" type="audio/wav">
</audio>
<script>
document.getElementById("audioID").addEventListener("suspend",
audioFun);
function audioFun() {
document.getElementById('sus-1').innerHTML = "media loading is suspended"
}
</script>