Events are actions which occur independently of the currently executing program. Events are created within the computer, by the user, and across the network. Javascript supports event-driven programming, where events are expected and processed (“handled”) by the program (with an “event handler”) when notified of a happening in the environment.
When used within a web page — which is constructed on a “document object model” (DOM) — Javascript can react to DOM events. Some common events include:
- a user clicks the mouse or presses a key
- the web page has completed loading
- an image on the web pages has completed loading
- the mouse moves over a display element
- an input field is changed
- an HTML form is submitted
DOM events comprise the following categories:
- mouse, trackpad, pointer, and touch
- keyboard
- HTML frame/object
- HTML form
- user interface
- mutation (changes in the structure of the document)
- progress
- a few others, of interest only in very specific domains
Event Names
Event names are action-oriented and descriptive — like “on click” — so program code becomes easier to read and maintain. Following are a few very common events which occur on web pages:
| Event Name | Event Description |
| onchange | An HTML element has been changed |
| onclick | The user has clicked on an HTML element |
| onmouseover | The user has moused into an HTML element |
| onmouseout | The user has moused out of an HTML element |
| onkeydown | The user has depressed a key |
| onlead | The web browser has finished loading the page |
These are but a few events; see the complete list of DOM events (some of which are browser-specific).
Event Circumstances
Javascript event handlers can verify user actions, sanity-check user form input, and respond to browser actions. (This can be both in-line Javascript and Javascript encapsulated into functions, as shown above.) Javascript can also prevent events from being sent or even being handled. An event handler can be invoked each time a web page finishes loading or when the page is closed (typically to prevent unsaved input from being lost).
Connecting Javascript to HTML on a Web Page
Javascript code is added to the HTML of a web page by populating the event handler attributes, which may be added to HTML elements. Both single- and double-quotes are allowed:
<element event='JavaScript'>
<element event="JavaScript">The following shows the HTML description of a button with an onclick event handler of Javascript code that returns the data from the Date() function.
<button onclick="this.innerHTML = Date()">Click for Current Date</button>That’s all well and good for little bits of Javascript, but more typically the handler points to a function (which can be dozens or hundreds of lines of code) as in the following:
<button onclick="displayDateTime()">Click for Current Date</button>More actionable than the code snippets above is the following is a complete example of connecting HTML and Javascript on a web page. Note that the Javascript functions are created in the head section of the web page and invoked later by a button event handler in the body section.
<html>
<head>
<!--
! Javascript functions are created in the head section
! of the web page. showTime() takes no parameters and
! returns an English sentence with the current time.
-->
<script type="text/javascript">
function showTime() {
alert("It's " + new Date().toLocaleTimeString('en-US') + " right now.")
}
</script>
</head>
<body>
<p>Click the button!</p>
<!--
! The showTime() function is used as the event handler
! for this button. All modern web browsers support this.
-->
<form>
<input type="button" value="What time is it?" onclick="showTime()" />
</form>
</body>
</html>Interactively work with this example preloaded at JSFiddle.
Conclusion
This blog post covered Javascript events: what they are, some common events that occur on web pages, a complete list of DOM events, and an example of how to connect the web page’s HTML with event-driven Javascript.
To learn more about Javascript, check out other Javascript blog posts and enroll in our Javascript Nanodegree programs, including Intermediate Javascript.
Source Code
Complete source code, when needed to expand upon the snippets above, will be included below, ready for use in an online Javascript tester like PlayCode.
