JavaScript Events: Capture, Target, Bubble

JavaScript Events: Capture, Target, Bubble

JavaScript events and event handling. In this Javascript events tutorial, you'll understand the life cycle of the events, the execution phase of event handlers, and how to manipulate default browser behavior when an event is fired.

Events are actions occurring on a webpage due to various types of interaction from the user. These include interactions such as mouse click, keypress, scroll, resize, etc. The user interactions are usually performed on an HTML element, and when any type of interaction is performed, an event is fired. This event will simply follow its life cycle(event propagation) unless an event-handler is registered to perform any operation in response to the event.

The standard DOM Events has 3 phases of event propagation:

  • Event Capturing phase: the event goes down to the element.
  • Event Target phase: the event has reached the element.
  • Event Bubbling phase: the event is bubbled up from the element.

Note that not every DOM event bubbles up. There are some exceptions to this. The focus event doesn't bubble up the DOM tree.

In this article, we will understand the life cycle of the events, the execution phase of event handlers, and how to manipulate default browser behavior when an event is fired.

javascript webdev

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

JavaScript Tutorial: if-else Statement in JavaScript

This JavaScript tutorial is a step by step guide on JavaScript If Else Statements. Learn how to use If Else in javascript and also JavaScript If Else Statements. if-else Statement in JavaScript. JavaScript's conditional statements: if; if-else; nested-if; if-else-if. These statements allow you to control the flow of your program's execution based upon conditions known only during run time.

The essential JavaScript concepts that you should understand

The essential JavaScript concepts that you should understand - For successful developing and to pass a work interview

JavaScript Memory Management System

The main goal of this article is help to readers to understand that how memory management system performs in JavaScript. I will use a shorthand such as GC which means Garbage Collection. When the browsers use Javascript, they need any memory location to store objects, functions, and all other things. Let’s deep in dive that how things going to work in GC.

What is “this” in Javascript? | Explaining this keyword in Javascript!

In this JavaScript tutorial, we will learn about what is “this” keyword in JavaScript. You'll understand this and its mechanism, in depth. The this keyword in JavaScript has often been a source of much confusion for beginners to the language.

Building a Powerful Virtual Machine in JavaScript

This JavaScript tutorial explains how to build a powerful Virtual Machine in JavaScript. A flexible, extensible, register-based virtual machine. Support for signed, unsigned and floating point operations. A call stack. Interrupt capabilities. Ability to do memory mapping for IO. An assembly language with macro and module support. A higher level, C like language. We'll use and expand the library from the parser combinators from scratch series. And finally, to be able to take the whole thing into the browser and exend it to create a sort of fantasy console - an emulator for a machine that never existed