WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

JavaScript HTML DOM Events


The HTML DOM gives JavaScript the ability to react to HTML events.

Mouse Over Me
Click Me

Reacting to Events

We can execute JavaScript when an event occurs, such as when a user clicks on an HTML element.

To execute code when a user clicks an element, add JavaScript code to an HTML event attribute:

onclick=JavaScript

Example of HTML event:

  • 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 submitting an HTML form
  • When the user triggers a key press

In this example, when the user is <h1> Clicking on an element changes its content:

Example

<!DOCTYPE html>
<html>
<body>

<h1 onclick="this.innerHTML='Ooops!'">Click on text!</h1>

</body>
</html>
Try it Yourself »

This example calls a function from the event handler:

Example

<!DOCTYPE html>
<html>
<body>

<h1 onclick="changeText(this)">Click on this text!</h1>

<script>
function changetext(id)
{
    id.innerHTML="Ooops!";
}
</script>

</body>
</html>
Try it Yourself »

HTML Event Attributes

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

Example

Assign the onclick event to the button element:

<button onclick="displayDate()">Try it</button>
Try it Yourself »

In the above example, a function named displayDate will be executed when the button is clicked.


Use the HTML DOM to dispatch events

The HTML DOM allows you to assign events to HTML elements using JavaScript:

Example

Assign the onclick event to the button element:

<script>
document.getElementById("myBtn").onclick = displayDate;
</script>
Try it Yourself »

In the example above, a function named displayDate is assigned to the HTML element with id = "myBtn".

Javascript function will be executed when the button is clicked.


The onload and onunload Events

The onload and onunload events are triggered when the user enters or leaves the page.

onload event can be used to detect a visitor's browser type and browser version and load the correct version of the webpage based on this information.

The onload and onunload events can be used to process cookies.

Example

<body onload="checkCookies()">
Try it Yourself »

The onchange Event

The onchange event is often used in conjunction with validation of input fields.

Here is an example of how to use onchange. When the user changes the content of the input field, the upperCase () function is called.

Example

<input type="text" id="fname" onchange="upperCase()">
Try it yourself »

The onmouseover and onmouseout Events

The onmouseover and onmouseout events can be used to trigger functions when the user's mouse moves over or out of an HTML element.

Mouse Over Me

Try it Yourself »


The onmousedown, onmouseup and onclick Events

onmousedown, onmouseup and onclick make up all parts of the mouse click event. First, the onmousedown event is triggered when the mouse button is clicked, the onmouseup event is triggered when the mouse button is released, and finally, the onclick event is triggered when the mouse click is completed.

Click Me

Try it Yourself »


More Examples

onmousedown and onmouseup
Change a picture when a client holds down the mouse button.

onload
Show an alarm box when the page has completed loading.

onfocus
Change the foundation shade of an info field when it gets focus.

Mouse Events
Change the shade of a component when the cursor moves over it.




Welookups is optimized for learning.© Welookups 2018 -
All Right Reserved and you agree to have read and accepted our term and condition