JS Event Handlers

In this tutorial we will learn about Events and Event Handling in JavaScript.

What is an event?

An event is something that happens when we interact with the elements of a page. For example clicking a button is an event, hovering over a link is an event and so on.

What are event handlers?

These are special predefined JavaScript properties of an object (most cases elements in the document) that handles events when they occur.

Example of Event and Event Handler

Lets say we have a button in the page. When a user clicks the button we get the "click" event. This click event can be handled by "onclick" event listener in JavaScript.

How to add event handlers?

We can add event handlers to an element by either adding special attributes to the element or by creating scripts and then attaching it to the element.

Adding event handler in the HTML element

Lets say we have a button and we want to alert "Hello World" message when it is clicked.

One way of solving this is by adding the onclick event handler to the button.

<button onclick="window.alert('Hello World');">Click Me</button>

Output

Adding event handler in the script tag

In this we write the JavaScript code inside a script tag and then attach the logic to the onclick event handler.

<button onclick="greetings();">Click me</button>
<script>
function greetings() {
  window.alert("Hello World");
}
</script>

Adding event handling script in a separate JavaScript file

In this we write our event handling logic in a separate JavaScript file and then include it in the HTML file.

index.html file

<button id="mybtn">Click me</button>
<script src="/path/to/script.js"></script>

script.js file

//get the button by id
var btn = document.getElementById("mybtn");

//attach the event handler
btn.onclick = function() {
  window.alert("Hello World");
};

Events

Following are some of the common events.

onchange

This event occurs when user changes something in a form. For example, we can show an alert message when user changes the select option.

<select onchange="window.alert('Option changed');">
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
</select>

Output

ondblclick

This event occurs when a user double clicks.

<button ondblclick="window.alert('hello');">Double Click Me</button>

onload

This event occurs when the web page finishes loading.

// function to call when loading finishes
function greetings() {
  window.alert("Loading complete.");
}

//attach greetings function to the onload event handler
window.onload = greetings;

onresize

This event occurs when the window is resized.

// function to call when resizing finishes
function greetings() {
  window.alert("Resize complete.");
}

//attach greetings function to the onresize event handler
window.onresize = greetings;

onscroll

This event occurs when the user scrolls an area which is scrollable.

// function to call when scrolling finishes
function greetings() {
  window.alert("Scrolling complete.");
}

//get textarea by id
//assuming there is a textarea having id="mytextarea"
var textarea = document.getElementById("mytextarea");

//attach greetings function to the onscroll event handler
textarea.onscroll = greetings;

onsubmit

This event occurs when a form is submitted.

Form HTML

<form id="myform">
  <label>Username</label>
  <input type="text" name="username" id="username">
  <input type="submit" value="Submit">
</form>

JavaScript

//get the form by id
var form = document.getElementById("myform");

//attach the onsubmit event handler
form.onsubmit = function() {
  window.alert("Form submitted");

  //to prevent the page from reloading
  return false;
};