JavaScript Events

When a user interacts with your website (such as clicks a link, presses a key, or submits information), an event occurs. Some other examples of events include entering text in an input box, or making selection. At times, the web browsers set off certain events during page loading and unloading.

JavaScript offers event handles which are also known as event listeners that allow you to track events and perform specific tasks.

The names of event handlers always start with ‘on’ word. Therefore, the event handler for click event is named onclick, the event handler for load event is named onload, and the event handler for the blur event is named onblur.

How can you assign an event handler?

The easiest way to assign an event handler is to include them in the start tag of the HTML element by specifying the event-handler attributes.

Use the onclick attribute to assign a click handler for the button element.

Example:

<button type="button" onclick="alert(Introduction to JavaScript)">Click Here</button>

To distinguish the JavaScript from HTML, you can specify the event handler in the external JavaScript file or within the tags.

Example:

<button type="button" id="thisBtn">Click Here</button>

<script>

	function sayIntro() {

alert(' Introduction to JavaScript!');

	}

	document.getElementById("thisBtn").onclick = sayIntro;

</script>

Tip: You can also write onclick as onClick, ONCLICK, or OnClick due to the case-insensitive property of HTML. However, the value specified is case-sensitive.

The JavaScript events can be classified as mouse events, keyboard events, form events, and document events. Let’s discuss them:

Mouse Events: When a user performs actions such as clicking on a specific element or moving the mouse pointer, the mouse event is triggered.

Some mouse events and their respective event handlers are mentioned below:

The Click Event (onclick): When a user clicks on a specific element, the click event takes place. The onclick event handler helps you handle the click event.

Example:

<button type="button" onclick="alert('Clicked a button!');">Click Here</button>

<a href="#" onclick="alert('Clicked a link!');">Click Here</a>

The Contextmenu Event (oncontextmenu): When a user clicks the right mouse button to launch the context menu, the contextmenu event takes place. The oncontextmenu event handler helps you handle the contextmenu event.

Example:

<button type="button" oncontextmenu="alert('Right-clicked a button!');">Right Click Here</button>

<a href="#" oncontextmenu="alert('Right-clicked a link!');">Right Click Here</a>

The Mouseover Event (onmouseover): When a user moves the mouse pointer over an element, the mouseover event takes place.

The onmouseover event handler helps you handle the mouseover event.

Example:

<button type="button" onmouseover="alert('Placed mouse pointer over a button!');">Place Mouse Here</button>

<a href="#" onmouseover="alert('Placed mouse pointer over a link!');">Place Mouse Here</a>

The Mouseout Event (onmouseout): When a user moves the mouse pointer outside the element, the mouseout event takes place.

The onmouseout event handler helps you handle the mouseout event.

Example:

<button type="button" onmouseout="alert('Moved out of the button!');">Place Mouse Inside Me and Move Out</button>

<a href="#" onmouseout="alert('Moved out of the link!');">Place Mouse Inside Me and Move Out</a>

Keyboard Events: When a user presses the keyboard keys, the keyboard event is triggered.

Some keyboard events and their event handlers are mentioned below:

The Keydown Event (onkeydown): When a user presses down a keyboard key, the keydown event takes place.

The onkeydown event handler helps you handle the keydown event.

Example:

<button type="button" onmouseout="alert('Moved out of the button!');">Place Mouse Inside Me and Move Out</button>

<a href="#" onmouseout="alert('Moved out of the link!');">Place Mouse Inside Me and Move Out</a>

The Keyup Event (onkeyup): When a user presses the key on the keyboard. The onkeyup event handler helps you handle the keyup event.

Example:

<button type="button" onmouseout="alert('Moved out of the button!');">Place Mouse Inside Me and Move Out</button>

<a href="#" onmouseout="alert('Moved out of the link!');">Place Mouse Inside Me and Move Out</a>

The Keypress Event (onkeypress): When a user presses the keyboard key that has a character value assigned to it, the keypress event takes place. The arrows keys and keys such as Esc, Control, Shift, Alt don’t trigger the keypress event. However, they cause the keydown and keyup event.

The onkeypress event handler helps you handle the keypress event.

Example:

<button type="button" onmouseout="alert('Moved out of the button!');">Place Mouse Inside Me and Move Out</button>

<a href="#" onmouseout="alert('Moved out of the link!');">Place Mouse Inside Me and Move Out</a>

Form Events: When a user attempts to change the form control values by choosing options in the select box or entering value in the text box, the form event takes place.

Some form events and their event handlers are mentioned below:

The Focus Event (onfocus): When a user aims to highlight an element, the focus event takes place. The onfocus event handler helps you handle the focus event.

Example:

<script>

function highlightInput(elm){

elm.style.background = "red";

};

</script>

<input type="text" onfocus="highlightInput(this)">

<button type="button">Button</button>

Here, the value of this keyword refers to the element for which the handler has been specified.

The Blur Event (onblur): When the user changes the focus from the element of the form, the blur event takes place. The onblur event handler helps you handle the blur event.

Example:

<input type="text" onblur="alert('Text input loses focus!')">

<button type="button">Enter</button>

The Change Event (onchange): When a user modifies the value of the form element, the change event takes place.

The onchange event handler helps you handle the change event.

Example:

<select onchange="alert('Selection Modified!');">

	<option>Select</option>

	<option>English</option>

	<option>Maths</option>

</select>

The Submit Event (onsubmit): When a user submits the form present on the webpage, the submit event takes place. The onsubmit event handler helps you handle the submit event.

Example:

<form action="action.php" method="post" onsubmit="alert('Form data will be submitted to the server!');">

<label> Enter your Fathers Name</label>

	<input type="text" name="f-name" required>

	<input type="submit" value="Submit">

</form>

Document/Window Events: When a user resizes the browser windows, or the page has loaded successfully, the document or window events take place.

Some document/window events and their event handlers are mentioned below:

The Load Event (onload): When a web page has been loaded completely, the load event takes place. The onload event handler helps you handle the load event.

Example:

<body onload="window.alert("Page loaded successfully!");">

	<h1>Welcome!</h1>

	<p>This is a JavaScript tutorial.</p>

</body>

The Unload Event (onunload): When a user abandons a web page, the unload event takes place. The onunload event handler helps you handle the unload event.

Example:

<body onunload="alert("Do you want to leave this web page?");">

	<h1>Welcome!</h1>

	<p>This is a JavaScript tutorial.</p>

</body>

The Resize Event (onresize): When a user attempts to change the size of the web browser window (maximise or minimise), the resize event takes place. The onresize event handler helps you handle the resize event.

Example:

<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>