JavaScript HTML DOM event
HTML DOM JavaScript, HTML has the ability to react to events.
Examples
React to events
We can execute JavaScript when the event occurs, such as when the user clicks on the HTML element.
To execute code when a user clicks on an element, add a JavaScript code to the HTML event attributes:
HTML Event examples:
- When the user clicks the mouse
- When the page is loaded
- When the image is loaded
- When the mouse moves over the element
- When the input field is changed
- When you submit an HTML form
- When the user triggers the key
In this example, when a user on the <h1> element when clicked, will change its contents:
Examples
<Html>
<Body>
<H1 onclick = "this.innerHTML = 'Ooops!'"> Click on the text! </ H1>
</ Body>
</ Html>
try it"
In this case to call a function from the event handler:
Examples
<Html>
<Head>
<Script>
function changetext (id)
{
id.innerHTML = "Ooops!";
}
</ Script>
</ Head>
<Body>
<H1 onclick = "changetext (this)"> click on the text! </ H1>
</ Body>
</ Html>
try it"
HTML Event Attributes
To assign events to HTML elements, you can use the event attributes.
Examples
Assigned to the button element onclick event:
try it"
In the above example, the function named displayDate will execute when the button is clicked.
Use the HTML DOM to assign an event
HTML DOM allows you to use JavaScript to assign events to HTML elements:
Examples
Assigned to the button element onclick event:
. document.getElementById ( "myBtn") onclick = function () {displayDate ()};
</ Script>
try it"
In the above example, the function is assigned to a named displayDate id = myButn "HTML element.
Click the button when the Javascript function will be executed.
onload and onunload event
onload and onunload event is triggered when the user enters or leaves the page.
onload event can be used browser type and version of browser the visitor is detected, and based on this information to load the correct version of the page.
onload and onunload event can be used to handle cookie.
onchange event
onchange event often combined input field validation to use.
Here is an example of how to use the onchange. When the user changes the contents of the input field, calls upperCase () function.
onmouseover and onmouseout events
onmouseover and onmouseout events can be used to trigger functions when the user's mouse moves to the top of the HTML element or elements removed.
onmousedown, onmouseup and onclick event
onmousedown, onmouseup and onclick constitute all parts of the mouse click event. First, when you click the mouse button, the trigger onmousedown event when the mouse button is released, it will trigger onmouseup event, and finally, when the completion of a mouse click, it will trigger the onclick event.
Examples
A simple onmousedown-onmouseup instance:
More examples
onmousedown and onmouseup
When the user presses the mouse button, the replacement of an image.
onload
When the page is finished loading, display a message box.
onfocus
When the input field has the focus, change the background color.
Mouse events
When the pointer moves over the element, change its color; when the pointer moves out of the text, its color will change again.