Custom Event in LWC

Question

I am trying to understand a LWC recipe which explains event bubbling below I have added a parent and a child component here contact object is being passed to child component and then upon clicking the anchor tag of child component it dispatches an event where instead of passing any object it just passed the bubbles: true and in parent component handled the event with event.target.contact

now the confusing part for me is contact was never passed at the child level when dispatching the event it was just bubbles: true then where the event.target.contact came from in parent? Can anyone please help me to understand this behavior?

Parent Component named EventBubbling

HTML:

<template>
    <lightning-card title="EventBubbling" icon-name="standard:logging">
        <template if:true={contacts.data}>
            <lightning-layout class="slds-m-around_medium">
                <!-- c-contact-list-item-bubbling emits a bubbling event so a single listener on a containing element works -->
                <lightning-layout-item
                    class="wide"
                    oncontactselect={handleContactSelect}
                >
                    <template for:each={contacts.data} for:item="contact">
                        <c-contact-list-item-bubbling
                            key={contact.Id}
                            contact={contact}
                        ></c-contact-list-item-bubbling>
                    </template>
                </lightning-layout-item>
                <lightning-layout-item class="slds-m-left_medium">
                    <template if:true={selectedContact}>
                        <img
                            src={selectedContact.Picture__c}
                            alt="Profile photo"
                        />
                        <p>{selectedContact.Name}</p>
                        <p>{selectedContact.Title}</p>
                        <p>
                            <lightning-formatted-phone
                                value={selectedContact.Phone}
                            ></lightning-formatted-phone>
                        </p>
                        <p>
                            <lightning-formatted-email
                                value={selectedContact.Email}
                            ></lightning-formatted-email>
                        </p>
                    </template>
                </lightning-layout-item>
            </lightning-layout>
        </template>
        <template if:true={contacts.error}>
            <c-error-panel errors={contacts.error}></c-error-panel>
        </template>
        <c-view-source source="lwc/eventBubbling" slot="footer">
            Child-to-grandparents communication using an event that bubbles and
            is handled on a higher level element in the DOM tree. Click an item
            in the list to see the recipe in action.
        </c-view-source>
    </lightning-card>
</template>

JS:

import { LightningElement, wire, track } from 'lwc';
import getContactList from '@salesforce/apex/ContactController.getContactList';

export default class EventBubbling extends LightningElement {
    @track selectedContact;

    @wire(getContactList) contacts;

    handleContactSelect(event) {
        this.selectedContact = event.target.contact;
    }
}

Child Component contactListItemBubbling

<template>
    <a href="#" onclick={handleSelect}>
        <lightning-layout vertical-align="center">
            <lightning-layout-item>
                <img src={contact.Picture__c} alt="Profile photo" />
            </lightning-layout-item>
            <lightning-layout-item padding="around-small">
                <p>{contact.Name}</p>
            </lightning-layout-item>
        </lightning-layout>
    </a>
</template>

JS:

import { LightningElement, api } from 'lwc';

export default class ContactListItemBubbling extends LightningElement {
    @api contact;

    handleSelect(event) {
        // 1. Prevent default behavior of anchor tag click which is to navigate to the href url
        event.preventDefault();
        // 2. Create a custom event that bubbles. Read about event best practices at http://developer.salesforce.com/docs/component-library/documentation/lwc/lwc.events_best_practices
        const selectEvent = new CustomEvent('contactselect', {
            bubbles: true
        });
        // 3. Fire the custom event
        this.dispatchEvent(selectEvent);
    }
}

Answer 1

Standard DOM events hold a reference to the DOM element that triggered them in the target attribute. In your example, event.target refers to a c-contact-list-item-bubbling element. This element has a contact HTML attribute (this comes from @api contact) so you can retrieve it by calling event.target.contact.