DOM (Document Object Model) – Events List
JavaScript reacts:
– When a web page has loaded / unloaded (onload – onunload)
– When an image has been loaded (onload – onunload)
– When an input field is changed (onchange)
– When the mouse moves over an element (onmouseover – onmouseout)
– When a user clicks the mouse (onmousedown – onmouseup – onclick )
– When a input field is focused (onfocus)
When an HTML form is submitted
When a user strokes a key
A JavaScript can be executed when an event occurs, like when a user clicks on an HTML element.
Example:
<!DOCTYPE html> <html> <body> <h1 onclick="this.innerHTML='Ooops!'">Click on this text!</h1> </body> </html>
To assign events:
// The function
function upperCase()
{
... you want to do ...
}
// HTML Event Attributes -> direct
<button onclick=function(){displayDate()}>Try it</button>
// Assign Events Using the HTML DOM -> indirect
document.getElementById("myBtn").onclick=function(){displayDate()};
Complete list
// DOM is loaded or unloaded, the page is loaded or unloaded <body onload="upperCase()"> <body onunload="upperCase()"> // The content of an input form is changed <input type="text" id="fname" onchange="upperCase()" // Mouse Over - Mouse Out <div onmouseover="upperCase()" onmouseout="upperCase()">Mouse Over Me</div> // Mouse Down - Mouse Up - Mouse Click <div onmousedown="upperCase()" onmouseup="upperCase()" onclick="upperCase()">Mouse Over Me</div> // OnFocus <input type="text" onfocus="upperCase()">
