JavaScript Events

Events in JavaScript, refer to actions that are detected by a JavaScript program when you perform a particular task. For example, onclick event is detected by the program when you click the mouse button. Here, the following code fragment shows how to create an event handler in JavaScript:

onEvent = "code to handle the event"

You will learn all about events in JavaScript in detail, divided into following tutorials:

JavaScript Events Example

Here is an example, shows event handling in JavaScript. This example will display the data when you click on the button Click Here:

<!DOCTYPE html>
<html>
<head>
   <title>JavaScript Event Handling Example</title>
</head>
<body>

<p id="event_para1">Click on the <b>Date</b> button to replace me with today's date and time.</p>
<button onclick="getElementById('event_para1').innerHTML=Date()">Date</button>

</body>
</html>

Here is the output displayed by the above JavaScript event handling example program. This is the initial output:

Now click on the Date button to change the output as shown in the following figure:

Here is the live demo output produced by the above event handling example program.

Click on the Date button to replace me with today's date and time.

Now here is another example which will change the content of it's own element:

<!DOCTYPE html>
<html>
<head>
   <title>JavaScript Events Example</title>
</head>
<body>

<button onclick="this.innerHTML=Date()">Date</button>

</body>
</html>

Here is the output produced by the above JavaScript event handling program. This is the initial output:

This is the output produced after clicking on the Date button.

Here is the live demo output of the above event handling example in JavaScript.

JavaScript Online Test

« Previous Tutorial Next Tutorial »