JavaScript Tutorial

Javascript Events

JavaScript events are actions or occurrences that happen in the browser, such as a user clicking a button, hovering over an element, or the page finishing loading. By handling these events, you can execute JavaScript code in response to user interactions or other browser activities.

Here's an overview of JavaScript events:

Event Handlers:

Event handlers are functions that are executed when a specific event occurs. You can assign event handlers to HTML elements using the on prefix followed by the event name as an attribute. For example:

<button onclick="myFunction()">Click me</button>

Event Listeners:

Event listeners are functions that are attached to elements to listen for specific events. They provide a more flexible way to handle events and allow multiple event handlers to be attached to the same element. You can use the addEventListener method to attach event listeners. For example:

let button = document.querySelector("button");
button.addEventListener("click", myFunction);

Common Events:

There are numerous events available in JavaScript. Some commonly used events include:

Mouse Events

Event Performed

Event Handler

Description

click

onclick

When the mouse clicks on a dom element

mouseover

onmouseover

When the cursor of the mouse comes over the dom element

mouseout

onmouseout

When the cursor of the mouse leaves an dom element

mousedown

onmousedown

When the mouse button is pressed over the dom element

mouseup

onmouseup

When the mouse button is released over the dom element

mousemove

onmousemove

When the mouse movement takes place.

Keydown & Keyup

onkeydown & onkeyup

When the user press and then release the key

Form events

Event Performed

Event Handler

Description

focus

onfocus

When a user focuses on an element

submit

onsubmit

When a user submits the form

blur

onblur

When the focus goes away from a form element

change

onchange

When a user modifies or changes the value of a form element

Window/Document events

Event Performed

Event Handler

Description

load

onload

When the browser finishes the loading of the page(images, videos, libraries)

unload

onunload

When a visitor leaves the current webpage, the browser unloads it

resize

onresize

When a visitor resizes the window of the browser

Let's discuss some examples of the above-discussed events and their handlers.

Click Event

Input:-

Output:-

Keydown Event

Input:-

Output:-

Load Event

Input:-

Output:-

JavaScript addEventListener()

The addEventListener() method in JavaScript is used to attach an event handler to a specific element. It allows you to bind multiple event handlers to the same element without overwriting existing ones. Events are a crucial aspect of JavaScript as they enable interactivity and user-driven actions on web pages.

The addEventListener() method is a built-in function in JavaScript that provides a convenient way to handle events. By using this method, you can assign different event handlers to a specific element, and each handler will be executed independently, coexisting with any previously attached event handlers.

Syntax:- element.addEventListener(event, function, useCapture);

Parameter Values

event: It is a mandatory parameter. It can be defined as a string that tells the event's name.

Note:- Do not use any prefix such as "on" with the parameter value. For example, Use "click" instead of using "onclick".

function: It is also a mandatory parameter. It is a JavaScript function that responds over the event occurs.

useCapture: It is an optional parameter. It is a Boolean-type value that specifies whether the event is executed in the bubbling or capturing phase. Its possible values are true and false. When it is set to true, the event handler executes in the capturing phase. When it is set to false, the handler executes in the bubbling phase. Its default value is false.

Let's discuss some of the examples of using the addEventListener() method.

Input:-

Output(Before Click):-

Output(After Click):-

Event Bubbling or Event Capturing

Syntax:-

addEventListener(event, function, useCapture);

Now, we will understand the benefit of the third optional parameter of JavaScript's addEventListener(), i.e., useCapture.

In HTML DOM, Bubbling and Capturing are the two different ways of event propagation. We will understand these ways by taking an example.

Suppose we have a div element and a paragraph element inside it, and we are applying the "click" event to both of them using the addEventListener() method. Now the question is on clicking the paragraph element, which element's click event is handled first.

So, in Bubbling, the event for the paragraph element will be handled first, and then the div element's event will be handled. It means that in bubbling, the inner element's event is handled first, and then the outermost element's event will be handled.

Capturing the event for the div element will be handled first, and then the paragraph element's event will be handled. It means that in capturing the outer element's event is handled first, and then the innermost element's event will be handled.

Input:-

Output(Before Click):-

\

Output(Event Bubbling - After Click):-

Output(Event Capturing - After Click):-

JavaScript onclick event

The onclick event is commonly used in JavaScript to trigger a function when a user clicks on an element. It provides a way to execute JavaScript code in response to a click event, allowing for various functionalities such as form validation, displaying warning messages, and more.

In JavaScript, you can dynamically add the onclick event to any HTML element during runtime. It can be applied to all HTML elements except for <html>, <head>, <title>, <style>, <script>, <base>, <iframe>, <bdo>, <br>, <meta>, and <param>. These tags do not support the onclick event.

Now, we will see the syntax of using the onclick event in HTML and in javascript (without addEventListener() method).

In HTML

<element onclick = "myFunc()"> 

In the below example, we are using the HTML onclick attribute and assigning a JavaScript function to it. When the user clicks the button, the defined function will get executed, and an alert box will be displayed.

Input:-   

Output(Before Click):-

Output(After Click):-

In Javascript

object.onclick = function() { myJavaScript }; 

In the below example, we are using JavaScript onclick event. Here we will be using the onclick event with the paragraph element.

When a user clicks on the paragraph element, the defined function will get executed, and the text of the paragraph and background color of the text gets changed.

Input:-

Output(Before Click):-

Output(After Click):-

In JavaScript by using the addEventListener() method

object.addEventListener("click", myJavaScript );

In the below example, we will be using JavaScript's addEventListener() method to bind a click event to the paragraph element. When the user clicks the paragraph element, the text of the paragraph and font-size of elements gets changed.

Input:-   

Output(Before Click):-

Output(After Click):-

JavaScript dblclick event

The dblclick event fires an event on the double click of an element. The event fires when an element is clicked two times in a very short duration of time.

Now, we will see the syntax of creating double click events in HTML and in javascript (with and without using addEventListener() method)

In HTML

<element ondblclick = "myFunc()"> 

Input:-

Output(Before Click):-

Output(After Click):-

In Javascript

object.ondblclick = function() { myJavaScript }; 

Input:-

Output(Before Click):-

Output(After Click):-

In JavaScript by using the addEventListener() method

object.addEventListener("dblclick ", myJavaScript );

Input:-   

Output(Before Click):-

Output(After Click):-

JavaScript onload Event

The onload event in JavaScript is used to execute a specific function when a webpage or a specific element has finished loading. It can be utilized to perform actions once all the content, including images, videos, libraries, and other external resources, have been fully loaded.

In HTML, the onload attribute is commonly used with the <body> tag to execute a JavaScript code block once the entire webpage's content has been loaded. However, it can also be applied to other HTML elements as needed.

It's important to note that there are two variations of the onload event: document.onload and window.onload. The main distinction between the two is that document.onload is triggered before the loading of external content, such as images and libraries, whereas window.onload fires when the entire page has finished loading, including CSS files, script files, images, and external libraries.

Syntax:-

window.onload = myFunc()

Example 1-

In the below example, there is a div element with a height of 100px and a width of 100px. Here, we are using the window.onload() to change the background color, width, and height of the div element after loading the full web page.

The background color is set to 'yellow', and the width and height are set to 150px each.

Input:- 

Output:-

Example 2-

Below is a small and simple example of using the HTML onload attribute with the defined function in JavaScript. In this example, the alert() function gets called whenever the document refreshes.

Input:-   

Output:-

JavaScript onresize event

The onresize event in JavaScript is triggered when the window is resized. It allows you to execute JavaScript code in response to the resizing of the browser window. You can utilize properties such as window.outerWidth and window.outerHeight to track the dimensions of the window.

Additionally, you can use properties like innerWidth, innerHeight, clientWidth, clientHeight, offsetWidth, and offsetHeight to retrieve the size of an element.

In HTML

<element onresize = "myFunc()"> 

In the below example, we will be using the HTML onresize attribute. Here, we are using the window.outerWidth and window.outerHeight events of JavaScript to get the height and width of the window.

Input:-

Output(Before resize):-

Output(After resize):-

In Javascript

bject.onresize = function() { myJavaScript  };    

Input:-   

Output(Before resize):-

Output(After resize):-

In JavaScript with addEventListener() method

object.addEventListener("resize", myJavaScript ); 

Input:-   

Output(Before Resize):-

Output(After Resize):-


Go back to Previous Course