Code By Code – Lightning Framework – Chapter 9 – Handling Browser Events And Controller File

Code By Code – Lightning Framework – Chapter 9 – Handling Browser Events And Controller File

Chapter 9

Topics for this chapter:

  • Handling Browser Events
  • Using Javascript controller file

Browser Events

The lightning framework uses event-driven programming model. We need to write handlers which respond to the event as they occur.
Events can be triggered by the user or can automatically be fired by the framework.
Browser events can be fired on user interaction with webpage like on click of a button or on drop-down value selection change.
You can declare these events in markup and handle in controller file.

Using Controller File To Handle Browser Events

A client-side controller handles events being fired by the component markup. It’s a JavaScript resource that defines the functions for all of the component’s actions.

Every method in the controller file accepts three parameters which are being supplied by the framework itself. These parameters are:
component—The component to which the controller belongs.
event—The event that the action is handling.
helper—The component’s helper. A helper contains functions that can be reused by any JavaScript code in the component bundle.

Helper File

Put functions that you want to reuse in the component’s helper.js. These functions can be called from multiple controller/helper functions.

Helper file helps in moving heavy lifting from the client-side controller. Helper functions also enable specialization of tasks, such as processing data and firing server-side actions.

Helper methods cannot be called directly from component markup and must be invoked from controller, renderer or helper file.

Update CarSearchForm Component

Update CarSearchForm component file with below changes. These changes include: – Declaring a boolean variable to control the visibility of the “New” button, as new record create “e.force:createRecord” event is not supported in the lightning standalone app. – Declaring a list variable to hold Car Types. – Adding aura:if code snippet using the boolean variable to control the visibility of “New” button. – Adding aura:iteration code snippet to iterate over Car Types list.

Component File


Controller File


Lightning Component Development Day3 - App, Attributes, Looping, Conditional Markup, Handling Events

Test your knowledge

Handling Browser Events In Javascript Controller

Next In This Guide

Manish Choudhari

I am a certified Salesforce Application & System Architect and Developer working on Salesforce Technology since 2014. Currently, I have 14 Salesforce certifications along with OCPJP (Oracle Certified Profession JavaSE6 Programmer) working in Salesforce.com Hyderabad as a Technical Engineer. Writing technical blogs, learning new technologies and frameworks and sharing knowledge is my hobby.

Leave a Reply

Close Menu