function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Sanjeet Kumar 32Sanjeet Kumar 32 

lighting:

Please help
I  want to handle the click event for a lighting:button component

The onClick attribute for the component reference a javascript function in which resource in the component bundle?

1.heper.js
2.Controller.js
3.Rendered.js
4.handler.js 
Khan AnasKhan Anas (Salesforce Developers) 
Hi Sanjeet,

Greetings to you!

The following diagram describes what happens when a user clicks a button that requires the component to retrieve data from the server.
User-added image
  1. User clicks a button or interacts with a component, triggering a browser event. For example, you want to save data from the server when the button is clicked.
  2. The button click invokes a client-side JavaScript controller, which provides some custom logic before invoking a helper function.
  3. The JavaScript controller invokes a helper function. A helper function improves code reuse but it’s optional for this example.
  4. The helper function calls an Apex controller method and queues the action.
  5. The Apex method is invoked and data is returned.
  6. A JavaScript callback function is invoked when the Apex method completes.
  7. The JavaScript callback function evaluates logic and updates the component’s UI.
  8. User sees the updated component.

Put functions that you want to reuse in the component’s helper. Helper functions also enable specialization of tasks, such as processing data and firing server-side actions.

A helper function can be called from any JavaScript code in a component’s bundle, such as from a client-side controller or renderer.

Helper functions are similar to client-side controller functions in shape, surrounded by parentheses and curly braces to denote a JavaScript object in object-literal notation containing a map of name-value pairs. A helper function can pass in any arguments required by the function, such as the component it belongs to, a callback, or any other objects.

Renderer: Renderer service in lightning component bundle modify the DOM elements which is created by framework for a component. We use custom renderer to change or override the  default rendering behaviour of the component.

Handler: Handler is used for handle standard and custom events. We can create our custom lightning event and also use standard events, the standard lightning event is automatically fired when related event is fire. Use <aura:handler> in the markup of the handler component.

Using a Helper in a Renderer
Add a helper argument to a renderer function to enable the function to use the helper. In the renderer, specify (component, helper) as parameters in a function signature to enable the function to access the component's helper. These are standard parameters and you don't have to access them in the function. 

I hope it helps you.

Kindly let me know if it helps you and close your query by marking it as solved so that it can help others in the future. It will help to keep this community clean.

Thanks and Regards,
Khan Anas
Naveen KNNaveen KN
Hi Sanjeet, 

Write the onclick method handler in your component bundle 
<lightning:button label=''customButton" onclick='{c.myEvent}'/>

in your  controller.js file write the code to handle the event

this event myEvent in the controller.js file

Naveen