SF-PD2 User Interface Practice Question
A developer is building a Lightning Web Component that includes a lightning-button. The button's click handler is defined as an arrow function in the component's JavaScript file. The developer wants to pass the event object to the handler to access the event's target. Which syntax should be used in the component's HTML template to correctly bind the handler and pass the event?
⚠ Common exam trap
The trap here is assuming that you need to explicitly pass the event object or use parentheses, as in other frameworks like React or Vue.
Answer choices
Why each option matters
Answer the question above first, then reveal the full breakdown to understand why each option is right or wrong.
Correct answer & explanation
✓
<lightning-button onclick={handleClick} label="Click"></lightning-button>
The correct syntax is to use onclick={handleClick} without parentheses or the event object. Lightning Web Components automatically pass the event object to the handler when the event occurs. The handler can then access event.target and other properties. The other options incorrectly attempt to invoke the function during template rendering or use unsupported syntax.
Answer analysis
Option-by-option breakdown
For each option: why learners choose it and why it is or isn't the right answer here.
- ✗
<lightning-button onclick={handleClick.bind(this)} label="Click"></lightning-button>
Why it's wrong here
While .bind(this) can be used in some frameworks, in LWC it is unnecessary because arrow functions or class methods automatically have the correct this context when bound via the template. Using .bind(this) in the template is not supported and will cause a compilation error. The standard syntax is to reference the handler directly.
- ✓
<lightning-button onclick={handleClick} label="Click"></lightning-button>
Why this is correct
In Lightning Web Components, event handlers are bound using the onclick attribute without parentheses or the event object. The framework automatically passes the event as the first argument to the handler. The handler can then access event.target. This is the standard and correct syntax for binding a click handler in LWC.
- ✗
<lightning-button onclick={handleClick()} label="Click"></lightning-button>
Why it's wrong here
Similar to the previous option, this invokes the handler immediately and does not pass the event. The parentheses cause the function to be called during template evaluation, which is not how LWC event binding works. The correct approach is to provide the function name without parentheses, and the framework will pass the event object automatically.
- ✗
<lightning-button onclick={handleClick(event)} label="Click"></lightning-button>
Why it's wrong here
This syntax attempts to call the handler immediately during template rendering, which is incorrect. In LWC, you do not invoke the handler with parentheses in the template. The framework expects a function reference, not a function call. Using this syntax would result in an error or the handler being invoked at render time without an event.
About these practice questions
Courseiva writes every SF-PD2 question from scratch — 226 in total, each with an explanation and a wrong-answer breakdown. None are copied from real exams or dumps. Learn why practice questions differ from exam dumps →
JA
Written and reviewed by Johnson Ajibi, MSc IT Security
Senior Network & Security Engineer · founder of Courseiva
Last reviewed September 2026 · checked against the official Salesforce exam blueprint
This SF-PD2 practice question is part of Courseiva's free Salesforce certification practice question bank. Courseiva provides original exam-style practice questions with explanations, topic-based practice, mock exams, readiness tracking, and study analytics to help learners prepare for the SF-PD2 exam.