revision:
The onpagehide event occurs when the user is navigating away from a webpage.
<element onpagehide="script"></element>
script: the name of the script to use when the event has been triggered.
example 1
<body onpagehide="onPageHide()">
<p>Note: Due to various browser settings, this event may not always work as expected.<p/>
<script>
function onPageHide() {
alert ("Thanks, please come back again.");
}
</script>
example 2
<h3 id="hID"></h3>
<script>
document.getElementsByTagName("body")[0].onpagehide = function() {
makeFun()};
function makeFun(){
document.getElementById("hID").innerHTML = "Thank you!";
}
</script>
The onpageshow event occurs when a user navigates to a webpage.
Supported HTML tags:<body>
The onpageshow event is similar to the "onload event", except that it occurs after the onload event when the page first loads. The onpageshow event occurs every time the page is loaded, whereas the onload event does not occur when the page is loaded from the cache.
<element onpageshow="script"></element>
script: the script to be run on onpageshow.
<p class="spec">This example uses the HTML DOM to assign an "onpageshow" event to a body element.</p>
<h3 style="margin-left:3vw;" id="demo"></h3>
<script>
document.getElementsByTagName("BODY")[0].onpageshow = function() {myFunction()};
function myFunction() {
document.getElementById("demo").innerHTML = "Welcome To My Homepage!";
};
/* This is equivalent to assigning the event to the window object:
window.onpageshow = function() {
document.getElementById("demo").innerHTML = "Welcome To My Homepage!";
};
*/
</script>
example 2
<body onpageshow="myPage()">
<h1 style="color:green;text-align:center;">My first webpage
<script>
function myPage() {
alert("Welcome to GeeksForGeeks!");
}
</script>
</body>
The onpaste attribute fires when the user pastes some content in an element.
The onpaste attribute is part of the event attributes and can be used on any HTML element. It is mostly used on <input> elements with type="text".
There are three ways to paste some content in an element:1/ press CTRL + V; 2/ select "Paste" from the Edit menu in your browser; 3/ right click to display the context menu and select the "Paste" command
<element onpaste="script"></element>
script: the script event runs when the onpaste attribute is called.
codes:
<input style="margin-left:3vw;" type="text" onpaste="textPaste()" value="Try to paste something in here" size="40">
<p class="spec" id="demo"></p>
<script>
function textPaste() {
document.getElementById("demo").innerHTML = "You pasted text!";
}
</script>
I'm a paragraph element with some dummy text. I'm a paragraph element with some dummy text. I'm a paragraph element with some dummy text. I'm a paragraph element with some dummy text. I'm a paragraph element with some dummy text.
codes:
<textarea style="margin-left:3vw;" placeholder="Paste above text here" onpaste="pasteFn()" rows='8'
cols="50" required></textarea>
<script>
function pasteFn() {
document.querySelector('textarea').style.background = 'lightgreen';
}
</script>
The onpause attribute defines a script to be run when the audio/video is paused either by the user or programmatically.
The onpause attribute is part of the event attributes and can be used on the following elements:<audio> and <video>.
The onplay attribute is used to define a script to run when the audio/video has been started or is no longer paused.
<element onpause="script"></element>
script: the script event runs when the onpause attribute is called.
Play and pause the audio file.
codes:
<p class="spec">Play and pause the audio file.</p>
<audio style="margin-left:3vw;"" id="myAudio" controls onpause="pauseAudio()">
<source src="../pics/horse.wav" type="audio/wav">
Your browser does not support the audio element.
</audio>
<script>
function pauseAudio() {
alert("The audio file has been paused");
}
</script>
Play and pause the video.
codes:
<p class="spec">Play and pause the video.</p>
<video style="margin-left:3vw" id="myVideo" width="320" height="176" controls onpause="pauseVideo()">
<source src="../pics/Wuzhen-20-10_02.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
<script>
function pauseVideo() {
alert("The video has been paused");
}
</script>
The onplay event occurs when the audio/video has been started or is no longer paused.
Supported HTML tags: <audio> and <video>.
<element onplay="script"></element >
script: this attribute contains a "single value script", which works when the onplay event attribute is called
Press play.
codes:
<div>
<p class="spec">Press play.</p>
<video style="margin-left:3vw;" width="400" height="auto" controls onplay="playV()">
<source src="../pics/Wuzhen-20-10_02.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
<p id="vid-1" style="color:red"></p>
</div>
<script>
function playV() {
document.getElementById("vid-1").innerHTML = ("The video has started to play");
}
</script>
Press play.
codes:
<div>
<p class="spec">Press play.</p>
<audio style="margin-left:3vw;" controls onplay="playA()">
<source src="../pics/horse.wav" type="audio/wav">
Your browser does not support the audio element.
</audio>
<p id="aud-1" style="color:red"></p>
</div>
<script>
function playA() {
document.getElementById("aud-1").innerHTML = ("The audio started to play");
}
</script>
The onplaying event occurs when the audio/video is playing after having been paused or stopped for buffering.
Supported HTML tags: <audio> and <video>.
<element onplaying="script"></element>
script: this attribute contains a "single value script", which works when the onplaying event attribute is called.
play, pause and then play the video again.
codes:
<p class="spec">play, pause and then play the video again.</p>
<video style="margin-left:3vw;" width="400" height="auto" controls onplaying="playVid()">
<source src="../pics/Wuzhen-20-10_02.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
<script>
function playVid() {
alert("The video is now playing");
}
</script>
Play, pause and then play the audio again.
codes:
<p class="spec">Play, pause and then play the audio again.</p>
<audio style="margin-left:3vw;" controls onplaying="playAud()">
<source src="../pics/horse.wav" type="audio/wav">
Your browser does not support the audio element.
</audio>
<script>
function playAud() {
alert("The audio is now playing");
}
</script>
The onprogress event occurs when the browser is downloading the specified audio/video.
Supported HTML tags: <audio>, <video>.
During the loading process of an audio/video, the following events occur, in this order: onloadstart, ondurationchange, onloadedmetadata, onloadeddata, onprogress, oncanplay, oncanplaythrough.
<element onprogress="script"></element>
script: this attribute contains a "single value script", which works when the onprogress event attribute is called.
example 1
<video style="margin-left:3vw;" width="300" height="auto" controls onprogress="videoDown()">
<source src="Wuzhen-20-10_02.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
<script>
function videoDown() {
alert("downloading video");
}
</script>
example 2
<audio style="margin-left:3vw;" controls onprogress="audioDown()">
<source src="horse.wav" type="audio/wav">
Your browser does not support the audio element.
</audio>
<script>
function audioDown() {
alert("downloading audio");
}
</script>