+ Start a Discussion
Inbox OutboxInbox Outbox 

LWC: event.target vs event.detail


1.When child component trigger an event it comes as detail if event trigger by DOM then comes as target.
2. event.target comes from html element
event.detail comes from custom event we write

I don't understand this from a code point. Both the codes are almost same. We are using combobox with onchange handler in both the components.
 Why did we use event.detail in the first component but we used event.target in the second component?
I have two components below. In one component we have event.detail and another we have event.target. 
Can someone please explain based on the below code?
Component 1: Wire service with getPicklistValues adapter 
HTML:
<template>
    <lightning-card title="getPicklistValues Demo">
        <div class="slds-var-p-around_medium">
            <lightning-combobox
            name="Industry"
            label="Industry"
            value={selectedIndustry}
            placeholder="Select Industry"
            options={industryOptions}
            onchange={handleChange} ></lightning-combobox>
        </div> 
        <p>selectedIndustry:{selectedIndustry}</p>
    </lightning-card>
    <lightning-card title="getPicklistValues Demo with type">
        <div class="slds-var-p-around_medium">
            <lightning-combobox
            name="Type"
            label="Type"
            value={selectedType}
            placeholder="Select Type"
            options={typeOptions}
            onchange={handleTypeChange} ></lightning-combobox>
        </div> 
        <p>selectedType:{selectedType}</p>
    </lightning-card>
</template>
JS:
 import { LightningElement, wire } from 'lwc';
import { getObjectInfo, getPicklistValues} from 'lightning/uiObjectInfoApi'
import INDUSTRY_FIELD from '@salesforce/schema/Account.Industry'
import TYPE_FIELD  from '@salesforce/schema/Account.Type'
import ACCOUNT_OBJECT from '@salesforce/schema/Account'
export default class GetPIcklistValuesDemo extends LightningElement {
    selectedIndustry = '';
    selectedType=''
    industryOptions=[]
    typeOptions=[]
    @wire(getObjectInfo, {objectApiName:ACCOUNT_OBJECT})
    objectInfo
    @wire(getPicklistValues, { recordTypeId:'$objectInfo.data.defaultRecordTypeId', fieldApiName:INDUSTRY_FIELD})
    industryPicklist({data, error}){
        if(data){
            console.log(data)
            this.industryOptions = [...this.generatePicklist(data)]
        }
        if(error){
            console.error(error)
        }
    }
    generatePicklist(data){
        return data.values.map(item=>({ label: item.label, value: item.value }))
    }
    handleChange(event) {
        this.selectedIndustry = event.detail.value;
    }
    /***second picklist for type */
    @wire(getPicklistValues, { recordTypeId:'$objectInfo.data.defaultRecordTypeId', fieldApiName:TYPE_FIELD})
    typePicklist({data, error}){
        if(data){
            console.log(data)
            this.typeOptions = [...this.generatePicklist(data)]
        }
        if(error){
            console.error(error)
        }
    }
    handleTypeChange(event) {
        this.selectedType = event.detail.value;
    }
}
Component 2: Wire service with getPicklistValuesByRecordType adapter 
HTML:
<template>
    <lightning-card title="getPicklistValuesByRecordType Adapter">
        <div class="slds-var-p-around_medium">
            <template if:true={ratingOptions}>
                <lightning-combobox
                name="rating"
                label="Rating"
                value={selectedRating}
                placeholder="Select Rating"
                options={ratingOptions}
                onchange={handleChange}></lightning-combobox>
                <p>selectedRating: {selectedRating}</p>
            </template>
            
            <template if:true={industryOptions}>
                <lightning-combobox
                name="industry"
                label="Industry"
                value={selectedIndustry}
                placeholder="Select Industry"
                options={industryOptions}
                onchange={handleChange}></lightning-combobox>
                <p>selectedIndustry: {selectedIndustry}</p>
            </template>
        </div>
    </lightning-card>
</template>
JS:
import { LightningElement, wire } from 'lwc';
import {getPicklistValuesByRecordType, getObjectInfo} from 'lightning/uiObjectInfoApi'
import ACCOUNT_OBJECT from '@salesforce/schema/Account'
export default class GetPicklistValuesByRecordTypeDemo extends LightningElement {
    ratingOptions
    industryOptions
    selectedRating
    selectedIndustry
    @wire(getObjectInfo, {objectApiName:ACCOUNT_OBJECT})
    objectInfo
    @wire(getPicklistValuesByRecordType, {objectApiName:ACCOUNT_OBJECT, 
        recordTypeId:'$objectInfo.data.defaultRecordTypeId'})
        picklistHandler({data, error}){
            if(data){
                console.log(data)
                this.ratingOptions = this.picklistGenerator(data.picklistFieldValues.Rating)
                this.industryOptions = this.picklistGenerator(data.picklistFieldValues.Industry)
            }
            if(error){
                console.error(error)
            }
        }
    picklistGenerator(data){
        return data.values.map(item=>({"label":item.label, "value":item.value}))
    }
    handleChange(event){
        const {name, value} = event.target
        console.log(name +'==>' +value)
        if(name === 'industry'){
            this.selectedIndustry = value
        }
        if(name === 'rating'){
            this.selectedRating = value
        }
    }
}
 
Best Answer chosen by Inbox Outbox
Yogendra JangidYogendra Jangid
Hi 
Though you are getting value from event.target in lightning-combobox, but you as per documentation you should use event.detail
https://developer.salesforce.com/docs/component-library/bundle/lightning-combobox/documentation

Now coming back to your question, since LWC is architectured on shadow dom, and if you are listening within same component it hardly matters if you use event.target or event.detail. But event.detail is more broader term which defines the scope of event. So once the event crosses the dom and still if you wish to get the event payload, it comes in detail form. This is because the shadow dom doesn't allow to expose the actual element who fired the event but the event is retargeted to the component dom.
To know more on event.detail or event.target and understand the event retargetting you can refer to following blog
Configuring Events and Propagation in LWC (https://inevitableyogendra.blogspot.com/2021/05/configuring-events-and-propagation-in-lwc.html)

Hope this clarifies your doubt of when to use event.target and when event.detail. If this answers your question, please mark my answer as the best answer. Thanks.