DHTML - HTML Events

« Previous Chapter Next Chapter »

HTML events can trigger actions in a browser.

HTML Events

Every element on an HTML page has events which can trigger a JavaScript.

For example, we can use the onClick event of a button element to indicate that a function will run when a user clicks on the button. We define the events in the HTML tags.

Examples of events:

  • A mouse click
  • A web page or an image loading
  • Mousing over a hot spot on the web page
  • Selecting an input field in an HTML form
  • Submitting an HTML form
  • A keystroke

In the following example, Content of the h1 element will change when a user clicks on it:

Example

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

You can also add the script in the head section, and then call a function from the event handler:

Example

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

More About HTML Events

For all HTML events, look at our complete HTML DOM Event Object Reference.

More Examples

onmousedown and onmouseup
Change an image when a user holds down the mouse button.

onload
Display an alert box when the page has finished loading.


« Previous Chapter Next Chapter »
Have Any Suggestion? We Are Waiting To Hear from YOU!

Your Query was successfully sent!