Collections in Salesforce

 

SET:

A set is a collection of unique, unordered elements. It can contain primitive data types(String, Integer, Date, etc) or sObjects. If you need ordered elements use a List instead. You typically see Sets used to store collections of IDs that you want to use in a SOQL query.

Basics syntax:

Set<datatype> set_name = new Set<datatype> ();

Set<datatype> set_name = new Set<datatype> {value1, value2. . .] };

Examples:

Set<String> s = new Set<String> ();

Set<String> s = new Set<String> {'Jon', 'Quinton', 'Reid'};

As mentioned before one of the main characteristics of a Set is the uniqueness of elements. You can safely try to add the same element (e.g., 100, 'c', 125.25) to a Set more than once and it will just disregard the duplicate (without throwing an Exception). However, there is a slight twist when dealing with sObjects. Uniqueness of sObjects is determined by comparing fields in the objects. The following code will result in only one element in the Set.

 

Account acct1 = new account (Name='ACME Corp');

Account acct2 = new account (Name='ACME Corp');

Set<Account> s = new Set<Account> {acct1, acct2}; // Set will only contain 1 element

Different field values cause the objects to become unique.

Account acct1 = new account (Name='ACME Corp', BillingAddress='100 Main');

Account acct2 = new account (Name='ACME Corp');

Set<Account> s = new Set<Account>{acct1, acct2}; // Set will only contain 2 elements

 Set Methods

 There are a number Set methods so check out the docs for a complete list, but here are some of the more common ones you might use.

// create a new set with 3 elements

Set<String> s = new Set<String>{'Jon', 'Quinton', 'Reid'};

// adds an element IF not already present

s.add('Sandeep');

// return the number of elements

System.debug('=== number of elements: ' + s.size());

DEBUG|=== number of elements: 4

// removes the element if present

s.remove('Reid');

 // return the number of elements

System.debug('=== number of elements: ' + s.size());

DEBUG|=== number of elements: 3

// returns true if the set contains the specified element

System.debug('=== set contains element Jon: ' + s.contains('Jon'));

DEBUG|=== set contains element Jon: true

// output all elements in the set

for (String str : s)

  // outputs an element

  System.debug('=== element : ' + str);

DEBUG|=== element : Jon

DEBUG|=== element : Quinton

DEBUG|=== element : Sandeep

 

// makes a duplicate of the set

Set<String> s1 = s.clone();

// displays the contents of the set

System.debug('=== contents of s1: ' + s1);

DEBUG|=== contents of s1: {Jon, Quinton, Sandeep}

 // removes all elements

s1.clear();

 

// returns true if the set has zero elements

System.debug('=== is the s1 set empty? ' + s1.isEmpty());

DEBUG|=== is the s1 set empty? true

most of the time, we construct a Set of IDs from a query, trigger context, etc. and then use it as part of the WHERE clause in their SOQL query:

 Set<ID> ids = new Set<ID>{'0017000000cBlbwAAC','0017000000cBXCWAA4'};

List<Account> accounts = [Select Name From Account Where Id = :ids];

 

LISTS:

Lists are the mostly widely used collection so learn to love them (I do!!). A List is a collection of primitives, user-defined objects, sObjects, Apex objects or other collections (can be multidimensional up to 5 levels). Use a List (as opposed to a Set) when the sequence of elements is important. You can also have duplicate elements in a List. List are zero-based so the first element in the List is always 0.

The basic syntax for creating a new List is:

 List <datatype> list_name = new List<datatype>();]

List <datatype> list_name = new List<datatype>{value1, value2. . .]};

Examples:

 List<Integer> s = new List<Integer>();

List<String> s = new List<String>{'Hello', 'Quinton', 'Reid'};

 

// Create a nested List of Sets

List<List<Set<String>>> s2 = new List<List<Set<String>>>();

 

// Create a List of contact records from a SOQL query

List<Contacts> contacts = [SELECT Id, FirstName, LastName  FROM Contact LIMIT 10];

 

Lists and Arrays are pretty much interchangeable and you can mix and match them:

 

List<Contact> contacts = newContact[] {new(), newContact()};

List<String> s = new List<String>{'Hello', 'Quinton', 'Reid'};

String[] s1 = new String[]{'Hello', 'Quinton', 'Reid'};

System.debug('=== ' + s.get(0));                // DEBUG|=== Hello

System.debug('=== ' + s1.get(0));              //DEBUG|=== Hello

System.debug('=== ' + s[0]);                     //DEBUG|=== Hello

System.debug('=== ' + s1[0]);                    //DEBUG|=== Hello

 

List Methods:

There are a number List methods so check out the docs for a complete list, but here are some of the more common ones you might use.

 List<String> s = new List<String>{'Jon', 'Quinton', 'Reid'};

 

// adds an element

s.add('Sandeep');

 

// adds an element

s.add('Sandeep');

 

// return the number of elements

System.debug('=== number of elements: ' + s.size());

DEBUG|=== number of elements: 5

 

// displays the first element

System.debug('=== first element: ' + s.get(0));

DEBUG|=== first element: Hello

 

// removes the first element

s.remove(0);

 

// return the number of elements

System.debug('=== number of elements: ' + s.size());

DEBUG|=== number of elements: 4

 

// makes a duplicate of the set

List<String> s1 = s.clone();

 

// displays the contents of the set

System.debug('=== contents of s1: ' + s1);

DEBUG|=== contents of s1: (Quinton, Reid, Sandeep, Sandeep)

 

// replace the last instance of 'Sandeep' with 'Pat'

s1.set(3,'Pat'); // displays the contents of the set

System.debug('=== contents of s1: ' + s1);

DEBUG|=== contents of s1: (Quinton, Reid, Sandeep, Pat)

 

// sorts the items in ascending (primitive only)

s1.sort();

 

// displays the contents of the set

System.debug('=== sorted contents of s1: ' + s1);

DEBUG|=== sorted contents of s1: (Pat, Quinton, Reid, Sandeep)

// removes all elements

s.clear();

 

// returns true if the set has zero elements

System.debug('=== is the list empty? ' + s.isEmpty());

DEBUG|=== is the list empty? true

 

 You can use a List of Strings in the same sort of way you would a Set as part of a SOQL query:

 

List<String> ids = new List<String>{'0017000000cBlbwAAC','0017000000cBXCWAA4'};

List<Account> accounts = [Select Name From Account Where Id IN :ids];

Since SOQL queries return Lists of records, you can use them directly for iteration:

 

for (Account a : [Select Id, Name From Account Limit 2]) {

System.debug('=== ' + a.Name);

}

You can also use the List in a traditional for loop:

 List<Account> accounts = [Select Id, Name From Account Limit 2];

for (Integer i=0;i<accounts.size();i++) {

System.debug('=== ' + accounts.get(i).Name);

}

 

MAP :

A Map is a collection of key-value pairs. Keys can be any primitive data type while values can include primitives, Apex objects, sObjects and other collections. Use a map when you want to quickly find something by a key. Each key must be unique but you can have duplicate values in your Map.

 The basic syntax for creating a new Map is:

Map<key_datatype, value_datatype> map_name = new map<key_datatype, value_datatype>();

 

Map<key_datatype, value_datatype> map_name = new map<key_datatype, value_datatype>{key1_value =>  value1_value [, key2_value =>  value2_value. . .]};

Examples:

Map<Integer, String> m = new Map<Integer, String>{5 => 'Jon', 6 => 'Quinton', 1 => 'Reid'};

Map<ID, Set<String>> m = new Map<D, Set<String>>();

// creates a map where the key is the ID of the record

Map<Id, Account> aMap = new Map<Id, Account>([Select Id, Name From Account LIMIT 2]);

Map Methods : 

There are a number Map methods so check out the docs for a complete list, but here are some of the more common ones you might use.

Map m = new Map{5 => 'Jon', 6 => 'Quinton', 1 => 'Reid'};

// displays all keys

System.debug('=== all keys in the map: ' + m.keySet());

DEBUG|=== all keys in the map: {1, 5, 6}

 

// displays all values

System.debug('=== all values in the map (as a List): ' + m.values());

DEBUG|=== all values in the map (as a List): (Reid, Jon, Quinton)

 

// does the key exist?

System.debug('=== does key 6 exist?: ' + m.containsKey(6));

DEBUG|=== does key 6 exist?: true

 

// fetches the value for the key

System.debug('=== value for key 6: ' + m.get(6));

DEBUG|=== value for key 6: Quinton

// adds a new key/value pair

m.put(3,'Dave');

// returns the number of elements

System.debug('=== size after adding Dave: ' + m.size());

DEBUG|=== size after adding Dave: 4

 

// removes an element

m.remove(5);

System.debug('=== size after removing Jon: ' + m.size());

DEBUG|=== size after removing Jon: 3

 

// clones the map

Map m1 = m.clone();

System.debug('=== cloned m1: ' + m1);

DEBUG|=== cloned m1: {1=Reid, 3=Dave, 6=Quinton}

 

// removes all elements

m.clear();

// returns true if zero elements

System.debug('=== is m empty? ' + m.isEmpty());

DEBUG|=== is m empty? true

Maps are used very frequently to store records that you want to process or as containers for "lookup" data. It's very common to query for records and store them in a Map so that you can "do something" with them. The query below creates a Map for you where the key is the ID of the record. This makes it easy to find the record in the Map based upon the ID.

 Map<Id,Account> accountMap = new Map<Id, Account>(

  [Select Id, Name From Account LIMIT 2]);

System.debug('=== ' + accountMap);

 

// keySet() returns a Set we can iterate through

for (Id id : accountMap.keySet()) {

  System.debug('=== ' + accountMap.get(id).Name);

}

You'll use Maps quite a bit when writing triggers. For before update and after update triggers there are two trigger context variables named oldMap and newMap. The oldMap contains a list of sObject before they were modified. The newMap contains a list of sObject with the updated values. You typically use these Maps to make some sort of comparison inside the trigger:

 

for (Id id : Trigger.newMap.keySet()) {

  if (Trigger.oldMap.get(id).LastName != Trigger.newMap.get(id).LastName) {

    System.debug('=== the last name has changed!!');

    // handle the name change somehow  

  }

}

 

Convert list to Map of id as key and value as list<sobjects>

List<Contact>listcontacts = [Select id, name, Accountid, Phone from Contact];

Map<Id, list<contact>MapAcc = new Map<Id, list<contact>();

For(contact c: listcontacts){

   If(MapAcc.containkey(c.Accountid)){

      List<contact>oldcon = MapAcc.get(c.Accountid);

      Oldcon.add(c);

      MapAcc .put(c.Accountid,oldcon);

   }

   Else {

            List<contact>newcon = new list<contact>();

            Newcon.add(c);

            MapAcc.put(c.Accountid,newcon);

            }

}

Converting from a List to Set:

List<String> lStrings = new List<String>{'a','b','c','d','e'};

Set<String> sStrings = new Set<String>(lStrings);

 

Converting from a Set to a List

Set<String> sStrings = new Set<String>{'a','b','c','d','e'};

 List<String> lStrings = new List<String>(sStrings);

 

Converting list to Map with id as key and value as sobject

 

List<Lead> leadList = [SELECT Id, Name FROM Lead];

 

Map<Id, Lead> leadMap = new Map<Id, Lead>([SELECT Id, Name FROM Lead]);

 

Or,

Map<Id, Lead> mapFromList = new Map<Id, Lead>(leadList);

 

 

 

 

 

Salesforce Lightning Aura interview Questions Part-1

 

What are the different programming models available for Lightning components?

For Lightning components, there are two different programming models. The first is to build out Aura components using the Aura framework, and the second is to use the newer Lightning Web Components (LWC) framework.

• Aura Framework: Aura is a user interface framework for creating dynamic web apps for mobile and desktop devices, with a scalable long-lived lifecycle to allow the development of growth-oriented apps. It allows for the creation of partitioned multi-tier components that connect the client and server. Aura, which has been around since 2013, allows developers to create apps that are not dependent on Salesforce data, allowing for minimal disruption to day-to-day customers. Because programs don't have to be optimized for each device, Aura allows for more efficient development. 

• Lightning Web Components Framework: Lightning Web Components is a W3C Web Components standard implementation. It supports the aspects of Web Components that work well in browsers and only adds what's required to work in all Salesforce-supported browsers. It is a collection of advanced lightweight frameworks based on the most recent web standards. It's a reusable code-based document object model element. It's used to create sophisticated interfaces without the need for JS or the creation of a library. This functionality makes it simple to use and faster, saving developers a lot of time and work on the web stack.

Why would you choose one programming model over the other?

Lightning Web Components should be the go-to approach for development due its increased performance, ease of development and alignment with modern web standards. However, there are some scenarios where Aura components are still required, these include building community templates and URL accessible components, although LWC is quickly reaching feature parity.

Is it possible to use Aura Components with Lightning Web Components and vice versa?

Aura components can't be used in Lightning Web. You can, however, incorporate Lightning Web components into Aura components.

What is Lightning Component Framework and What is Aura Framework?

Lightning Component framework is a UI framework for developing single page applications for mobile and desktop devices.

·       It uses JavaScript on the client side and Apex on the server side. 

·       Lightning Component framework makes developing apps that work on both mobile and desktop devices far simpler than many other frameworks.

·        Lightning component Framework is based on Aura Framework.

·       Aura Framework is design by Salesforce which is open-source framework for creating ui components.

         What is Lightning App Builder?

Lightning app builder is used to create lightning pages for Salesforce Lightning experience and mobile apps. The Lightning App Builder is a point-and-click tool. Lightning Pages are built using Lightning components which are compact, configurable, and reusable elements that you can drag and drop into regions of the page in the Lightning App Builder.

 We can create different types of pages using lightning app builder,

 1)App Page

2)Home Page

3)Record Page.

 What is the use of $A.enqueueAction(action) and how to call server side action from client side?

$A.enqueueAction(action  ) adds the server-side controller action to the queue of actions to be executed.The actions are asynchronous and have callbacks.

 When we call a server-side controller i.e (Apex controller) method from a client-side controller i.e (Javascript controller), Apex controller method return results. In the javascript controller, We use action.setCallback which runs after the apex method execution gets completed in the apex controller.

What is Value provider and What is action provider in Salesforce Lightning component?

 Value provider is a way to access data, with value provider "v" we can fetch value of attribute from component markup in javascript controller. Value provider is denoted with v(view) and action provider is denoted with "c "(controller).

Value provider:

This value provider enables us to access value of component attribute in component markup and javascript controller.

<aura:component>

 <aura:attribute type="string" name="myfirstattribute" default="first text"/> 

{!v.myfirstattribute}

</aura: component>

Action provider:

This enable us to handle actions, event, handlers for the component.

Ex:<aura: handler  name="init" value="{!this}" action="{!c.doinit}"/>

In JavaScript controller,

({

doinit:function (component, event, helper) {

// some operations here

}

})

 What are Attributes in Salesforce Lightning component?

Attributes act like a variable to store different types of values.

Name and type are mandatory.

 <aura:attribute name="fruits" type="String[]" default="['apple','mango',’Banana’,'orange']" />

What is the use of interface force:hasRecordId and flexipage:availableForAllPageTypes in   Salesforce Lightning component?

By using force:hasRecordId interface in lightning component we can assign the id of the current record to lightning component. This interface adds an attribute named "recordId" to the component. The type of attribute is string and has 18-character Salesforce record ID.

To make our component available for record page and any other type of page, we need to implement the interface flexipage:availableForAllPageTypes.

 What is the use of interface Lightning:actionOverride in Salesforce Lightning component?

Lightning:actionOverride  interface Enables a component to be used as an override for a standard action. We   can override the View,New, Edit, and Tab standard actions on most standard and all custom components. The component needs to implement the interface Lightning:actionOverride after which the component appear in the Lightning Component Bundle menu of an object action Override Properties panel.

 What is the use of interface of flexipage:availableforrecordHome in Salesforce Lightning component?

Interface flexipage:availableForRecordHome make the component available for record pages only.

 What is the use of interface force:appHostable in Salesforce Lightning component?

Interface force:appHostable in component allow it to be used as a custom tab in Lightning Experience or the Salesforce mobile app.

In the Salesforce Lightning component, what is the difference between force:lightningQuickAction and force:lightningQuickActionWithoutHeader?

force:lightning - QuickAction allows you to use the component in Lightning Experience or the Salesforce mobile app as a custom action. Component interface shows in a panel with typical action controls, such as a Cancel button, when force:lightningQuickAction is used in a component.

 force:lightningQuickActionWithoutHeader - The component can be used as a custom action in Lightning Experience or the Salesforce mobile app thanks to the force:lightningQuickActionWithoutHeader interface. When force:lightningQuickAction is used in a component, the component interface appears in a panel without any normal action controls, such as a cancel button.

 What is the use of aura:handler  init event in Salesforce Lightning component?

This is also called as the constructor of lightning component. The init event is called once the component construction is over. As an example if I am creating a simple registration page and I want to display some default text value after page load in my input boxes I can do this by calling the javascript controller method and setting some default value in the attributes.                       

Basic Syntax:

<aura:handler  name="init" value="{!this}" action="{!c.doinit}"/>

 What is the use of aura:handler change event in the Salesforce Lightning component?

The change event is called when the value in one of the attribute changes.

As an Example If i am having  attribute " Anyname", on change of attribute "Anyname" if I want to call javascript method i can do this as:

Syntax:

<aura:attribute name="Anyname" type="String" />

<aura:handler  name="change" value="{!v.Anyname}" action="{!c.doinit}"/>

What are types of events in Salesforce Lightning component?

 Event – Any kind of interaction that happen in a webpage either automatically or by human interaction is an event.

 Types of events:

Component event: It is an event that is fired by component. A component event can be handled by component itself or it can be handled by any other component which is present in the hierarchy that receives the event.

 Application event: it is generally like broadcast message. If you send a broadcast, then all the receivers that are configured to accept that broadcast message receive that message. Similarly, an application event is fired by a component and all other components that have the handler defined to receive that event are notified when the event is fired. Application events are not bound by any hierarchy or relationship.

 Standard Out of the Box Events - These are some events that are provided to us by the framework that we can make use of without creating them. One example is the Show Toast event.

 What are the phases of Application event and how it is handled?

 1. Default Phase

2. Bubble Phase

3. Capture Phase

 Create the Event

Create the Application Event by selecting File > New > Lightning Event in the Developer Console and add the following code:

 <aura:event type="APPLICATION" description="Event template">

  <aura:attribute name="message" type="String" />

</aura:event>

Save it as LightningSimpleEvent.

 Fire the Event

In the component that needs to fire the event, add the following lines as part of the markup:

 <aura:registerEvent name="appEvent" type="c:LightningSimpleEvent"/>

 in the controller:

 var appEvent = $A.get("e.c:LightningSimpleEvent");

appEvent.setParams({ "message" : "Special Message" });

appEvent.fire();

 Handle the Event

For the component handling the event, we need to add the following to the component markup:

 <aura:handler event="c:LightningSimpleEvent" action="{!c.handleApplicationEvent}"/>

And we also add a method called handleApplicationEvent in the controller:

 

handleApplicationEvent : function (component, event, helper) {

  var message = event.getParam("message");

  component.set("v.receivedMessage", message);

}

 

Application Events in Default Phase

I created a small application to observe how Application Events work. It looks like this:

 

We have an application that contains two components. The two components, in turn, contain two more components to a create a total six components inside an application. Each component (as well as the application) has the ability to fire the application event we defined above (LightningSimpleEvent) through a button click, and each component also handles the same event and logs to the console when the event is handled.

 What happens when we click the Send Event button on Application 1:0? We see the following in the console:

 

As you can see, the two innermost components 43:0 and 70:0 got to handle the event first and then their parent 22:0. Next, the innermost components 124:0 and 151:0 followed by their parent 103:0. Finally the top level application gets to handle the event.

 What happens if I click one of the innermost buttons?

 

Exactly the same. It doesn’t matter where the event came from in the hierarchy. All components will get a chance to handle it.

Application Events in Bubble Phase

The example we saw above was handling events in “default” phase. When placing a handler, you have the option to handle the event in the “bubble” phase:

 <aura:handler event="c:LightningSimpleEvent" action="{!c.handleApplicationEvent}" phase="bubble"/>

 Before discussing what the bubble phase is, let’s change all the handlers in our example application to have phase="bubble". When I click 70:0 while all the handlers are handling in the bubble phase, I see the following in the console:

 

 

As you can see, in the bubble phase the event was first handled by the innermost component, the one that was clicked. Next, the parent got to handle the event and then the parent’s parent.

 Clicking 22:0 does something similar — firing component handles first and then we go all the way up to the root:

 

 The element that fires an event gets a chance to handle it first, its parent element second, grandparent third and so on until the application root gets to handle the event.

 Application Events in Capture Phase

We’ll start by doing exactly what we’ve been doing so far: code an example. For the next experiment, I changed all my event handlers to have phase="capture" instead of phase="bubble". Let’s observe what happens when we send an event from 70:0:

 

 As you can see, when the components were handling the event in the “capture” phase, the application root got to handle the event first, and then the event travelled down to the component that actually fired it. The component that fired the event got to handle it last.

If the event was fired by 22:0, the application root would get to handle it in the capture phase first, 22:0 would get to handle it second, and no other components would be able to handle the event during the capture phase:

 What is Application event Lifecycle?

·       Whenever an application event is fired, the capture phase is the first to begin.

·        The event is first “captured” by the outermost component, the application root. If the application root has a phase="capture" handler attached to it, it will be able to handle the event.

·       Once the application root has handled the event, the event will continue travelling down to the component that fired it and will be handled the next component in line — the child of the application root that leads to the target component. If the child has a phase="capture" handler, it will be able to handle the event.

·       The event continues to flow down until it reaches the component that fired the event. Since the event has now reached the target, the “capture” phase is complete.

·       The bubble phase begins right after capture is complete. In the bubble phase, the event is first received by the component that fired it. If the component has a handler for the event with phase="bubble", it will get a chance to handle it.

·       Next, the event “bubbles” to the parent. If the parent has a phase="bubble" handler, the parent gets to handle it.

·       The “bubbling” continues until the event has bubbled to the application root where the event can be handled with a phase="bubble" handler. You can probably see by now why this phase is called “bubble” — the event is rising up just like a bubble in water rises to the top.

·       Once the bubble and capture phases are complete, the third phase is the default phase. In this phase, like we saw earlier, all components as well as the root get a chance to handle the event.

The above lifecycle is broken if we use stopPropagation() somewhere in the capture or bubble phases.    

What are the phases of Component event and how it is handled?

 1.     Capture Phase

2 .   Bubble phase

 Creating Component Events

Just like application events, component events need to be defined in an event file that looks like this:

 <aura:event type="COMPONENT" description="Event template">

  <aura:attribute name="message" type="String" />

</aura:event>

 Firing Component Events

A component event needs to be registered in the component markup:

 <aura:registerEvent name="compEvent" type="c:LightningComponentEvent"></aura:registerEvent>

 The firing component also needs the following code to fire the event:

var evt = component.getEvent('compEvent');

evt.fire();

Handling Component Events

<aura:handler name="compEvent" event="c:LightningComponentEvent" action="{!c.handleEvent}"></aura:handler>

 The phase attribute is optional — the framework will handle events in the bubble phase by default. To handle component events propagating in the capture phase, phase="capture" needs to added to the aura:handler.

 

Capture and Bubble Phases in Component Events

Like we discussed, capture and bubble phases in component events work just like they work in application events. One handling the event in the bubble phase, and one in the capture phase:

 

<aura:handler name="compEvent" event="c:LightningComponentEvent" action="{!c.handleEventCapture}" phase="capture"></aura:handler>

<aura:handler name="compEvent" event="c:LightningComponentEvent" action="{!c.handleEventBubble}" phase="bubble"></aura:handler>

 

Let’s see what happens when we click one of the innermost components:

 

 You can see very clearly how the event was captured by the component and how it bubbled back to application root. If we click 22:0:

 

 

As expected, the parents all get the event in both phases, but there is no way for either the children or other sub-trees to handle the event.

 stopPropagation()

Stop propagation has a very simple job: Stop the capture and bubble process wherever it is. For an experiment, I used the following event handler in the component 22:0

 <aura:handler name="compEvent" event="c:LightningComponentEvent" action="{!c.handleEventBubble}" phase="bubble"></aura:handler>

I modified the action associated with this handler to stop the propagation of events:

 handleEventBubble: function (component, event, helper) {

  console.log('event in bubble phase received by outer controller: '

    + component.getGlobalId());

  event.stopPropagation();

}

Whenever component 22:0 handles compEvent in the bubble phase, the propagation would stop and no other components will receive the event. Let’s send the event from component 70:0 and see what happens:

 

 

As you can see, the capture phase was completed successfully, but the bubble phase was interrupted and the event never bubbled to the application root.

 What happens if we call event.stopPropagation() in the capture handler in component 22:0? Let’s have a look:

 

 

The capture phase began with the application root handling the event, continued with the component 22:0 handling the event but the cycle was stopped because the handler in component 22:0 called the stopPropagation() method. The capture phase was never completed and the bubble phase never started.

 

MORE QUESTIONS TO COME ..........