Showing posts with label JavaScript Events. Show all posts
Showing posts with label JavaScript Events. Show all posts

Tuesday, August 28, 2012

JavaScript Events


Events are actions that can be detected by JavaScript.

Example

Mouse Over Me
Click Me

Events

By using JavaScript, we have the ability to create dynamic web pages. Events are actions that can be detected by JavaScript.
Every element on a web page has certain 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.
Examples of events:
  • Clicking a button (or any other HTML element)
  • A page is finished loading
  • An image is finished loading
  • Moving the mouse-cursor over an element
  • Entering an input field
  • Submitting a form
  • A keystroke
To see all events recognized by JavaScript, go to our Complete Event Reference.
Events are normally used in combination with functions.

HTML Event Attributes

To assign events to HTML elements you can use the event attributes.
For a complete list of all available event attributes, go to our Complete Event Reference.

Example

Assign an onclick event to a button element:
<button id="myBtn" onclick="displayDate()">Try it</button>

Try it yourself »

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

Assign Events Using the HTML DOM

You can assign events to HTML elements within a script or a function:

Example

Assign an onclick event to a button element:
<script>

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

</script>

Try it yourself »

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

onload and onunload

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 browser version, and load the proper version of the web page based on the information.

The onload and onunload events can be used to deal with cookies.

Example

<body onload="checkCookies()" />

Try it yourself »

onfocus, onblur and onchange

The onfocus, onblur and onchange events are often used in combination with validation of form fields.
Below is an example of how to use the onchange event. The checkEmail() function will be called 
whenever the user changes the content of the field:

<input type="text" onchange="checkEmail()" />

onsubmit

The onsubmit event can be used to validate form fields before submitting it.

Below is an example of how to use the onsubmit event. The checkForm() function will be called when 
the user clicks the submit button in the form. If the field values are not accepted, the submit should be cancelled.

<form method="post" action="mySubmit.asp" onsubmit="checkForm()">

onmouseover, onmouseout

The onmouseover and onmouseout events can be used to trigger a function when the user mouses over, or out of, an HTML element.

Example

A simple onmouseover-onmouseout example:
Mouse Over Me

Try it yourself »

onmousedown, onmouseup and onclick

The onmousedown, onmouseup, and onclick events are all parts of a mouse-click. First when a mouse-button is clicked, the onmousedown event is triggered, then, when the mouse-button is released, the onmouseup event is triggered, finally, when the mouse-click is completed, the onclick event is triggered.

Example

A simple onmousedown-onmouseup example:
Click Me

Try it yourself »