❮ Htmldom Examples Index ❯

HTML DOM - Events

HTML DOM allows JavaScript to react to HTML events.

Example

Reacting to Events

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

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

Examples of HTML events:

When a user clicks the mouse
When the web page has loaded
When an image has been loaded
When the mouse moves over an element
When an input field is changed
When an HTML form is submitted
When a user triggers a keypress

In this example, the content of the <h1> element changes when the user clicks on it:

Example

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

In this example, a function is called from the event handler:

Example

<script>
function changetext(id){
    id.innerHTML="Ooops!";
}
</script>
<h1 onclick="changetext(this)">Click on this text!</h1>

HTML Event Attributes

To assign an event to an HTML element, you can use event attributes.

Example

Assign an onclick event to a button element:

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

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

Assigning Events Using HTML DOM

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

Example

Assign an onclick event to a button element:

document.getElementById("myBtn").onclick=function(){displayDate()};

In the above example, the function named displayDate is assigned to the HTML element with id="myBtn". The function will be executed when the button is clicked.

onload and onunload Events

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

The onload event can be used to check the visitor's browser type and version, to load the appropriate version of the web page based on this information.

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

Example

<body onload="checkCookies()">

onchange Event

The onchange event is often used for input field validation.

The following example demonstrates how to use onchange. The upperCase() function is called when the user changes the content of the input field.

Example

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

onmouseover and onmouseout Events

The onmouseover and onmouseout events can be used to trigger functions when the mouse pointer moves over or leaves an element.

Example

A simple onmouseover-onmouseout example:

<div onmouseover="mOver(this)" onmouseout="mOut(this)">Mouse Over Me</div>

onmousedown, onmouseup, and onclick Events

The onmousedown, onmouseup, and onclick events are all phases of a mouse click. The onmousedown event is triggered when a mouse button is clicked, the onmouseup event is triggered when the mouse button is released, and the onclick event is triggered when the mouse click is completed.

Example

A simple onmousedown-onmouseup example:

<div onmousedown="mDown(this)" onmouseup="mUp(this)">Click Me</div>
<script>
function mDown(obj) {
    obj.style.backgroundColor = "#1ec5e5";
    obj.innerHTML = "Release Me";
}

function mUp(obj) {
    obj.style.backgroundColor = "#D94A38";
    obj.innerHTML = "Thank You";
}
</script>

HTML DOM Event Object Reference

For a complete description and examples of each event, visit our HTML DOM Reference.

❮ Htmldom Examples Index ❯