HTML Elements
Page 10
Event Examples
Introduction
This page executes close to one hundred event listener examples for HTML5 including cut, copy, paste, form event listeners, window event listeners, mouse event listeners and media event listeners. Most examples display both HTML markup and JavaScript, for your instruction.
Window Event Examples
This section displays JavaScript and markup
which adds, and implements,
onload, onbeforeunload, onbeforeprint
and onafterprint event listeners for
the window.
Window Add Event Listeners
Within the body tag add event listeners, as follows. NOTE this Web page activates the following event listeners. You should see them in action here.
<body onload="loadExamples()" onbeforeunload="unloadExamples(event)" onbeforeprint="printBefore()" onafterprint="printAfter()" >
Window Event Listeners
Within the header's script tags add functionality to execute before the Web page unloads, before and after the printer page displays.
/**
* Save a few elements
* to modify with JavaScript later.
*/
function loadExamples(){
eDebug = document.getElementById("eDebug");
cbBox = document.getElementById("cb");
}
/*
* Just prevent the default
* which allows an alert
* box to display when
* the user leaves the Web page.
* @param ev: Event Listener
/
function unloadExamples(ev){
// Prevent default
// allows user to leave
// page without a warning.
ev.preventDefault();
}
/**
* Here you can modify page
* for printing.
* The print dialog may, or may not,
* cover your page, but it will show a preview.
*/
function printBefore(){
eDebug.innerHTML = "Page 10 Print Format";
}
/**
* Displays after print page
* executed, regardless
* whether or not you printed
* the page.
*/
function printAfter(){
eDebug.innerHTML = "Page 10 Printer Invoked";
}
This section displays the print dialog, a message before and after the print dialog displays. Notice the simple, neat, technique to render Google icons.
See Print Information Below.
Tap the printer icon.
Tap the printer icon,
type CRL+P or your device's print option.
You may exit the printer dialog, to see what onafterprint, displays.
Printer Markup
Display Google's printer icon, if you like, as follows.
Inside the header, link to Google's style sheet.
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" >
Google inserts the printer icon, where
the word print
is entered within the span element.
The value assigned to the font-size
attribute, determines the size of the icon.
I also centered the icon with the following style:
text-align:center; margin:0px auto 0px auto; display:block;
Inside the Web page's body, add the following markup.
<span class="material-icons" style="font-size:88px;" > print </span>
Printer JavaScript
<body
onbeforeprint="printBefore()"
onafterprint="printAfter()"
>
...
/**
* Here you can modify page
* for printing.
* The print dialog may, or may not,
* cover your page, but it will show a preview.
*/
function printBefore(){
eDebug.innerHTML = "Page 10 Print Format";
}
/**
* Displays after print page
* executed, regardless
* whether or not you printed
* the page.
*/
function printAfter(){
eDebug.innerHTML = "Page 10 Printer Invoked";
}
Clipboard Events
The following example applies
copy, cut, paste for form input events.
The following input box doesn't
need to add event listeners for
oncopy, oncut or onpaste.
The input box
in the Web browser appears to include
oncopy, oncut or onpaste, by default.
Select the text:
- CRL+C, right click copy, or mobile selection icon > copy.
- CRL+X, right click cut, or mobile menu > cut.
- CRL+P, right click paste, or mobile menu > paste.
Currently oncopy, oncut and onpaste
are not implemented for all elements and all browsers.
Cut, Copy, Paste: Markup
<form <label for="iCopy" style="display:block;" > Copy, Cut, Paste, Focus, Blur Events: </label> <input id="iCopy" type="text" class="box" style="background-color:blue;" value="Edit, Copy, Past." onblur="inputBlur(event)" onfocus="inputFocus(event)" > <input id ="iPaste" type="text" class="box" style="background-color:green;" value="Paste here." onblur="inputBlur(event)" onfocus="inputFocus(event)" > </form>
Cut, Copy, Paste: JavaScript
The following JavaScript doesn't implement cut, copy or paste. The code simply highlights or lowlights selected and deselected elements.
/**
* @param ev: Event Listener
* React when element loses focus.
*/
function inputBlur(ev){
ev.currentTarget.style.color = "#888888";
}
/**
* @param ev: Event Listener
* React when element has focus.
*/
function inputFocus(ev){
ev.currentTarget.style.color = "red";
}
Form Event Examples
The following example applies
select, blur, focus,
validation errors, textual input, and submission events,
for form
input elements.
Markup: Form Events
<form
action="https://code.7Thunders.biz/h5/elements/e10submit.php"
method="post"
>
<label
for="eDate">
Enter Date, Select All Text:
</label>
<input
type="date"
class="box"
style="color:black;"
id="eDate"
onselect="inputSelect(event)"
>
<input
class="box"
type="text"
style="color:black;"
value="Select this text!"
onselect="inputSelect(event)"
onblur="inputRestore(event)"
>
<label
class="blk"
for="iv"
>
You Must Fill Out Field & Context Menus Below:
</label>
<input
id="iv"
type="text"
class="box"
style="color:red;"
oninvalid="inputInvalid(event);"
required
>
<input
id="iv"
type="text"
class="box"
style="color:red;"
oninvalid="alert('You must fill out this field!');"
required
>
<label
class="blk"
for="ie"
>
Input and Submit
</label>
<p
style="width:100%; text-align:center;"
id="pDebug">
</p>
<input
id="ie"
name="ie"
class="box"
style="color:black;"
type="text"
oninput="inputText(event)"
value="Add Text to POST here."
>
<input
class="box"
style="color:black;"
type="submit"
value="Submit"
>
</form>
JavaScript: Form Events
/**
* @param ev: Event Listener
* React when everything in element
* is selected.
*/
function inputSelect(ev){
ev.currentTarget.style.fontSize = "200%";
ev.currentTarget.style.backgroundColor = "red";
}
/**
* @param ev: Event Listener
* React when user enters any text.
*/
function inputText(ev){
pDebug.innerHTML = "You entered: "+ev.currentTarget.value;
}
/**
* @param ev: Event Listener
* React when user changes anything in the input elementt.
*/
function inputChange(ev){
pDebug.innerHTML = "You changed: "+ev.currentTarget.value;
}
/**
* @param ev: Event Listener
* Highlight when something's invalid.
*/
function inputInvalid(ev){
pDebug.innerHTML = "You must fill red outlined fields.";
ev.currentTarget.style.border = "solid 2px red";
}
Mouse Event Listeners
This section simply reacts to mouse events including click, double click, mouse down, mouse move, mouse out, mouse over, mouse up and mouse wheel.
If you're viewing this with a mobile device, please see the next page. The next page, HTML Elements: Touch Events also demonstrates how to make a graphic interactive for either mobile or desktop devices.
Mouse Click, Move...
Mouse: Markup
Note ondragstart="return false"
prevents dragging this image.
By default all images may be dragged.
<img
class ="example"
onclick ="mouseEvents('You clicked.',false)"
ondblclick ="mouseEvents('You double clicked.',true)"
onmousedown ="mouseEvents('Mouse down.', true)"
onmousemove ="mouseEvents('Mouse move.', true)"
onmouseout ="mouseEvents('Mouse out.', true)"
onmouseover ="mouseEvents('Mouse over.', true)"
onmouseup ="mouseEvents('Mouse up.', true)"
onwheel ="mouseEvents('Mouse wheel.',true)"
ondragstart ="return false"
src="../../assets/tex-spectrum.png"
alt="Spectrum of Colors"
>
Mouse: JavaScript
/**
* Respond to mouse events.
* Display a message.
* @param s: String
* @param bClear: Boolean
* Either append displayed string
* or replace displayed string
* based on bClear.
*/
function mouseEvents(s,bClear){
if(bClear == true){
pMouse.innerHTML = s;
}
else{
pMouse.innerHTML += s;
}
}
Media Event Listeners
The following media event examples include
oncalplay, oncanplaythrough, onemptied, onended, onerror, onloadeddata,
onloadedmetadata, onloadstart, onpause, onplay, onplaying, onprogress, onseeked,
onseeking, onsuspend, ontimeupdate, onvolumechange
and onpaused. See the markup and JavaScript
below.
Media Events Display Here.
Media: Markup
<video
class ="ex"
id ="vid"
oncanplay ="mediaEvents('Can Play.', true)"
oncanplaythrough="mediaEvents('Can Play Through.', true)"
onemptied ="mediaEvents('Media File Unavailable.', true)"
onended ="mediaEvents('Media File Ended.', true)"
onerror ="mediaEvents('Media File Error.', true)"
onloadeddata ="mediaEvents('Media File Data Loaded.', false)"
onloadedmetadata="mediaEvents('Media File Meta Data Loaded.', false)"
onloadstart ="mediaEvents('Media File Load Started.', false)"
onpause ="mediaEvents('Media Paused.', true)"
onplay ="mediaEvents('Media Ready to Play.', true)"
onplaying ="mediaEvents('Media Playing.', false)"
onprogress ="mediaEvents('Media File Progressing.', true)"
onseeked ="mediaEvents('Media Stopped.', true)"
onseeking ="mediaEvents('Time Slider is Moving.', false)"
onsuspend ="mediaEvents('Media Suspended.', true)"
ontimeupdate ="mediaEvents('Time Slider is Moving.', true)"
onvolumechange ="mediaEvents('User is Changing Volume Slider.',true)"
controls
loop
poster="still-art-gallery.png"
>
<source
src="loop-art-gallery.mp4"
type="video/mp4"
>
Your browser does not support the video tag.
</video>
Media: JavaScript
/**
* Respond to media events.
* Display a message.
* @param s: String
* @param bClear: Boolean
* Either append displayed string
* or replace displayed string
* based on bClear.
*/
function mediaEvents(s,bClear){
if(bClear == true){
pMedia.innerHTML = s;
}
else{
pMedia.innerHTML += s;
}
}
Toggle Event Listeners
Just tap the left pointing arrow to see more information. No JavaScript's needed. See the HTML5 markup below.
Details
Email Seven Thunders for Web development.
Enjoy learning HTML5, JavaScript, PHP and MySQL, tips and tricks, right here.
Toggle: HTML Markup
<details> <summary> Details </summary> <p> <a href="mailto:Support@7Thunders.biz" title="email Seven Thunders">Email Seven Thunders </a> for Web development. </p> <p> Enjoy learning HTML5, JavaScript, PHP and MySQL, tips and tricks, right here. </p> </details>
Summary
This page executed close to one hundred event listener examples for HTML5 including cut, copy, paste, form event listeners, window event listeners, mouse event listeners and media event listeners. Most examples displayed both HTML markup and JavaScript, for your instruction.
If you're viewing this with a mobile device, please see the next page. The next page also demonstrates how to make a graphic interactive for either mobile or desktop devices.
Unusual HTML5 Skills
See the markup, CSS and results of various HTML5 elements, with styles and some unusual or seldom used techniques.
