An event is something that occurs when a user interacts with a web page, like clicking a link or button, entering text into a field, making a selection in a dropdown, pressing a key, moving the mouse, or submitting a form. Sometimes, events are triggered by the browser itself, such as when a page loads or unloads.
When an event happens, you can use a JavaScript event handler (or listener) to detect it and perform a specific task or set of tasks. Event handlers typically start with the word "on"; for instance, an event handler for a click event is called onclick
, for a load event it's onload
, and for a blur event it's onblur
, and so forth.
There are various ways to assign an event handler. The easiest way is to add them directly to the opening tag of HTML elements using special event-handler attributes. For example, to assign a click handler to a button element, you can use the onclick
attribute, like this:
<button type="button" onclick="alert('Hello World!')">Click Me</button>
Alternatively, to maintain a separation between JavaScript and HTML, you can configure the event handler in an external JavaScript file or within the <script>
and </script>
tags, like this:
<button type="button" id="myBtn">Click Me</button>
<script>
function sayHello() {
alert('Hello World!');
}
document.getElementById("myBtn").onclick = sayHello;
</script>
Note: Because HTML attributes aren't case-sensitive, onclick
can also be written as onClick
, OnClick
, or ONCLICK
. However, the value is case-sensitive.
In general, events can be grouped into four main categories — mouse events, keyboard events, form events, and document/window events. There are many other events, which we'll cover in later chapters. The following section provides a brief overview of the most useful events one by one, along with real-life practice examples.
A mouse event is triggered when the user clicks on an element or moves the mouse pointer over an element, and so on. Here are some of the most important mouse events and their event handlers.
The click event occurs when a user clicks on an element on a web page, typically form elements and links. You can handle a click event with an onclick
event handler.
The following example will display an alert message when you click on the elements.
<button type="button" onclick="alert('You have clicked a button!');">Click Me</button>
<a href="#" onclick="alert('You have clicked a link!');">Click Me</a>
The contextmenu event happens when a user right-clicks on an element to open a context menu. You can manage a contextmenu event with an oncontextmenu
event handler.
The following example will display an alert message when you right-click on the elements.
<button type="button" oncontextmenu="alert('You have right-clicked a button!');">Right Click on Me</button>
<a href="#" oncontextmenu="alert('You have right-clicked a link!');">Right Click on Me</a>
The mouseover event happens when a user moves the mouse pointer over an element.
You can manage the mouseover event with the onmouseover
event handler. The following example will display an alert message when you hover over the elements.
<button type="button" onmouseover="alert('You have placed mouse pointer over a button!');">Place Mouse Over Me</button>
<a href="#" onmouseover="alert('You have placed mouse pointer over a link!');">Place Mouse Over Me</a>
The mouseout event happens when a user moves the mouse pointer outside of an element.
You can manage the mouseout event with the onmouseout
event handler. The following example will display an alert message when the mouseout event occurs.
<button type="button" onmouseout="alert('You have moved out of the button!');">Place Mouse Inside Me and Move Out</button>
<a href="#" onmouseout="alert('You have moved out of the link!');">Place Mouse Inside Me and Move Out</a>
A keyboard event is triggered when the user presses or releases a key on the keyboard. Here are some of the most important keyboard events and their event handlers.
The keydown event happens when the user presses a key on the keyboard.
You can manage the keydown event with the onkeydown
event handler. The following example will display an alert message when the keydown event occurs.
<input type="text" onkeydown="alert('You have pressed a key inside text input!')">
<textarea onkeydown="alert('You have pressed a key inside textarea!')"></textarea>
The keyup event happens when the user releases a key on the keyboard.
You can manage the keyup event with the onkeyup
event handler. The following example will display an alert message when the keyup event occurs.
<input type="text" onkeyup="alert('You have released a key inside text input!')">
<textarea onkeyup="alert('You have released a key inside textarea!')"></textarea>
The keypress event occurs when a user presses a key on the keyboard that corresponds to a character value. For instance, keys like Ctrl, Shift, Alt, Esc, Arrow keys, etc., won't trigger a keypress event but will trigger a keydown and keyup event.
You can manage the keypress event with the onkeypress
event handler. The following example will display an alert message when the keypress event occurs.
<input type="text" onkeypress="alert('You have pressed a key inside text input!')">
<textarea onkeypress="alert('You have pressed a key inside textarea!')"></textarea>
A form event is triggered when a form control gains or loses focus, or when the user modifies a form control value, such as by typing text in a text input or selecting an option in a select box. Here are some of the most important form events and their event handlers.
The focus event happens when the user gives focus to an element on a web page.
You can manage the focus event with the onfocus
event handler. The following example will highlight the background of a text input in yellow when it receives focus.
<script>
function highlightInput(elm){
elm.style.background = "yellow";
}
</script>
<input type="text" onfocus="highlightInput(this)">
<button type="button">Button</button>
Note: The value of the this
keyword within an event handler refers to the element that has the handler attached to it (i.e., where the event is currently being delivered).
The blur event happens when the user removes focus from a form element or a window.
You can manage the blur event with the onblur
event handler. The following example will display an alert message when the text input element loses focus.
<input type="text" onblur="alert('Text input loses focus!')">
<button type="button">Submit</button>
To remove focus from a form element, first click inside it and then press the tab key on the keyboard, focus on something else, or click outside it.
The change event happens when a user alters the value of a form element.
You can manage the change event with the onchange
event handler. The following example will display an alert message when you change the option in the select box.
<select onchange="alert('You have changed the selection!');">
<option>Select</option>
<option>Male</option>
<option>Female</option>
</select>
The submit event occurs exclusively when the user submits a form on a web page.
You can manage the submit event with the onsubmit
event handler. The following example will display an alert message while submitting the form to the server.
<form action="action" method="post" onsubmit="alert('Form data will be submitted to the server!');">
<label>First Name:</label>
<input type="text" name="first-name" required>
<input type="submit" value="Submit">
</form>
Events are also triggered in situations when the page has loaded or when the user resizes the browser window, and so on. Here are some of the most important document/window events and their event handlers.
The load event happens when a web page has finished loading in the web browser.
You can manage the load event with the onload
event handler. The following example will display an alert message as soon as the page finishes loading.
<body onload="window.alert('Page is loaded successfully!');">
<h1>This is a heading</h1>
<p>This is paragraph of text.</p>
</body>
The unload event happens when a user exits the current web page.
You can manage the unload event with the onunload
event handler. The following example will display an alert message when you attempt to leave the page.
<body onunload="alert('Are you sure you want to leave this page?');">
<h1>This is a heading</h1>
<p>This is paragraph of text.</p>
</body>
The resize event happens when a user resizes the browser window. It also occurs when the browser window is minimized or maximized.
You can manage the resize event with the onresize
event handler. The following example will display an alert message when you resize the browser window to a new width and height.
<p id="result"></p>
<script>
function displayWindowSize() {
var w = window.outerWidth;
var h = window.outerHeight;
var txt = "Window size: width=" + w + ", height=" + h;
document.getElementById("result").innerHTML = txt;
}
window.onresize = displayWindowSize;
</script>
Sign up to receive the latest updates and exclusive offers right in your inbox.