JavaScript Events

Back to: JavaScript Tutorial For Beginners and Professionals

JavaScript Events with Examples

In this article, I am going to discuss JavaScript Events with Examples. Please read our previous article where we discussed JavaScript Popup Boxes in detail. At the end of this article, you will understand the What are JavaScript Events and when and how to create and use Event Models in JavaScript with examples.

What is Event Model in JavaScript?

The DOM event model provides notifications for certain events. For example, execute a JavaScript function when a button is clicked. The DOM event model consists of events and event listeners attached to the DOM objects. For better understanding please have a look at the following image.

Event Types in JavaScript

The DOM (Document Object Model) provides access to many events. They are as follows

1. Mouse events – mouse clicks, mouse moves, mouse over, …
2. Touch events – finger touch, touch start, end, move, …
3. Form events – field focus, value change, form submit, …
4. Keyboard events – key down, key up, keypress, …
5. DOM / UI events – node insert, node remove, load, resize, …

Full list of all DOM event types will discuss later in our DOM events topic

Note: You may also define custom event types

Common Event Types in JavaScript:

Mouse events

1. Click: When mouse is click on an element
2. mouseup: When the mouse button is released over the element
3. mousedown: When the mouse button is pressed over the element
4. mouseover: When the cursor of the mouse comes over the element
5. mouseout: When the cursor of the mouse leaves an element

DOM / UI events

1. load: When the browser finishes the loading of the page
2. unload: When the visitor leaves the current webpage, the browser unloads it
3. reset: When the user clicks on the reset button on the form.
4. select: When input text is selected
5. resize: When the visitor resizes the window of the browser
6. change: When the user modifies or changes the value of a form element

Touch events

1. Touchstart: The touchstart event occurs when the user touches an element.
2. touchend: The touchend event occurs when the user removes the finger from an element.
3. touchcancel: The touchcancel event occurs when the touch event gets interrupted
4. touchleave: The touchleave event is fired when a touch point is moved off the interactive area of an element.
5. touchmove: The touchmove event occurs when the user moves the finger across the screen.

Note: The touchend event will only work on devices with a touch screen.

Keyboard events

1. keydown: When user presses a key
2. keypress: When user presses a key
3. keyup: When the user released the key

Focus events

1. Focus: When the user focuses on an element
2. blur: When the user moves the focus away from a form element
3. focusin: The focusin event fires when an element is about to receive focus
4. focusout: The onfocusout event occurs when an element is about to lose focus

Event Handler Registration in JavaScript

In order to understand how to register event handler in JavaScript, please have a look at the following image.

How to Define JavaScript Event Handler in the HTML Code?

The JavaScript Event handling code can be specified in the HTML attributes such as onclick, onload, onmouseover, onresize, etc. To better understand, please have a look at the following image.

The JavaScript Event handling code can also be specified in the JavaScript code through the properties such as onclick, onresize,etc. In order to understand this better, please have a look at the below image.

Using addEventListener(…)

A more powerful way for attaching event handlers:

domElement.addEventListener(eventType, eventHandler, isCaptureEvent);

Here, isCaptureEvent: catch the “capture” or “bubbling” phase. Can attach multiple events in a chain

var button = document.getElementById("buttonOK");
        button.addEventListener("click", function () {
            console.log("You clicked me");
        }, false);

The “event” Object

The “event” object holds information about the event passed as parameter to the event handling function

btn.onclick = function (event) { alert(event); }

The event object contains information about:

1. The type of the event (e.g. ‘click’, ‘resize’, …)
2. The target of the event (e.g. the button clicked)
3. The key pressed for keyboard events
4. The mouse button / cursor position for mouse events

The “event” object is the only argument of the event handler

function onButtonClick(event) {
   console.log(event.target);
   console.log(event.type);
   console.log("(" + event.clientX + ", " + event.clientY + ")");
}

button.addEventListener("click", onButtonClick, false);

Capturing and Bubbling Events

Browser Events Chain

When the user clicks on an HTML element. For example on a button in the page, the event is also fired on all of its parents.

The button is still the target. But the click event is fired on all of its parents. The click event is fired on all elements in the chain

JavaScript Event Chains: Types

domElement.addEventListener(eventType, eventHandler, isCaptureEvent)

Capturing handlers go down the chain

1. The first executed handler is on the parent
2. The last executed handler is on the target

Bubbling handlers bubble up to the parent

1. The first executed handler is on the target
2. Then its parent’s, and its parent’s, etc.

In the next article, I am going to explain the Examples of Different JavaScript Events. Here, in this article, I try to explain JavaScript Events with examples. I hope this article will helps you with your need. I would like to have your feedback. Please post your feedback, question, or comments about this article.