About me

I am a full stack .net developer with 5 years of experience in front-end and back-end technologies like HTML, CSS, Jquery, Angular, Typescript, Bootstrap, C#, MSSQL and Mongodb. I have done Btech Computer engineering from Sigma Institute of Engineering & Technology that comes under GTU (Gujarat Technological University). I have worked on web applications, Web APIs, Windows Forms, Web Forms, Tray applications and corporate websites. Programming is my hobby and I have starting writing blog to provide a platform for those who want to grow their careers as a fullstack .NET developers.

Javascript Events

What is Javascript Event?

Whatever happens with the webpage and the HTML elements of the webpage is called an event For example loading of web page elements, clicking any element, mouse over to any web page element, etc.

A javascript event is a handler that can be attached to a particular web page element so that some javascript code executes whenever an event occurs. 

For Example: If we want to show HTML div on some button click, we can attach a javascript onclick event to that button and write javascript code to display the division inside that event.

Javascript Event Listeners

Javascript Event Listeners are used to attach an event to a particular HTML element inside which we can write a set of javascript code that needs to be executed on the occurrence of that event.

Javascript Event Listeners are added using the addEventListener() method as shown in the below image:

addEventListener() Method
addEventListener() Method

Some Javascript Events

Below are some of the javascript events that are used in almost every web application:

Javascript events
Javascript events

  1. Page Events

    As shown in the image, the most commonly used page-level events are: DOMContentLoaded, load, and resize events.

    DOMContentLoaded vs load event

    DOMContentLoaded event occurs whenever the document tree is ready i.e it occurs when all the HTML tags are read by the browser and a hierarchy is being generated (DOM Tree).

    load event occurs whenever all the HTML element sources (like images, all the scripts, etc) are loaded

    resize event occurs whenever the browser window's size changes.

    Example: Consider the below javascript code:

    Example of Javascript Page Events
    Example of Javascript Page Events

    Check the output of this example on jsfiddle.

    The output of the Javascript Page Events example
    The output of the Javascript Page Events example

    Note: In a webpage, it is always good to write code in window load event as it occurs after every element is completely loaded.

  2. Mouse Events

    Mouse event includes click, mouseover, mouseenter, and mouseleave events. As names suggest, these events occur whenever an element is clicked, the mouse moves over the element, the mouse enters the element, and when the mouse leaves the element.

    Example: Consider the below example:

    Mouse Events Example HTML & Output
    Mouse Events Example HTML & Output

    Let's show an alert on each of these events for the buttons. Javascript code for this would be as below:

    Javascript code for the mouse events' example
    Javascript code for the mouse events' example

    Check this example on jsfiddle.

  3. Keyboard Events

    The keypress event occurs whenever the user types i.e press any key. With this event, we can get the unicode value of the key pressed.

    Example: To show the unicode of the pressed key while typing in a textbox

    The HTML and javascript code for this will be as shown below:

    Example of keypress event
    Example of keypress event

    Check this example on jsfiddle. Try this same example using keyup and keydown event.

  4. Form Events

    The form event change ocurrs whenever a value changes in a form element. Focus event occurs whenever the focus is on that element and blur event occurs on losing focus from the element.

    Example: Consider below example

    Example of form events
    Example of form events

    Here, I have created an input textbox and I am showing an alert on change event and changing the border styling on focus and blur event. I have used 2px solid red on focus because jsfiddle applies its styling for the textbox on focus. So, 2px makes the red border more visible on focus. Check this example on jsfiddle.

Hope you got a clear idea of the javascript events. For any queries and feedback, you can write to me at [email protected]. To get notified for the releases, subscribe through email.