1. Home
  2. JavaScript HTML DOM event

The best JavaScript HTML DOM event Tutorial In 2024, In this tutorial you can learn Examples,React to events,Examples,Examples,HTML Event Attributes,Examples,Use the HTML DOM to assign an event,Examples,onload and onunload event,Examples,onchange event,Examples,onmouseover and onmouseout events,Examples,onmousedown, onmouseup and onclick event,Examples,More examples,

JavaScript HTML DOM event

HTML DOM JavaScript, HTML has the ability to react to events.

Examples

Mouse Over Me
Click Me

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:

onclick= JavaScript

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

<! DOCTYPE html>
<Html>
<Body>
<H1 onclick = "this.innerHTML = 'Ooops!'"> Click on the text! </ H1>
</ Body>
</ Html>

In this case to call a function from the event handler:

Examples

<! DOCTYPE html>
<Html>
<Head>
<Script>
function changetext (id)
{
id.innerHTML = "Ooops!";
}
</ Script>
</ Head>
<Body>
<H1 onclick = "changetext (this)"> click on the text! </ H1>
</ Body>
</ Html>


HTML Event Attributes

To assign events to HTML elements, you can use the event attributes.

Examples

Assigned to the button element onclick event:

<button onclick = "displayDate () "> Click here </ button>

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:

<Script>
. document.getElementById ( "myBtn") onclick = function () {displayDate ()};
</ Script>

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.

Examples

<body onload = "checkCookies () ">


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.

Examples

<input type = "text" id = "fname" onchange = "upperCase ()">


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.

Examples

A simple onmouseover-onmouseout instance:

Mouse Over Me


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:

Thank You

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.

Hot Tools

Other Tools

Online Tutorial

Website Navigation

JavaScript HTML DOM event
10/30