 Hello, everyone. I'm Sanjay Gupta. I welcome you on Sanjay Gupta Tech School. In this module, I'm going to explain what are events and lightning or a component development. Let's understand what are events and lightning component. So even driven programming is used in many languages and framework such as JavaScript and Java swing. So now you need to understand what events are. So if you have already knowledge of JavaScript and Java swing, so you can understand like if I have a button on the UI. And if I click on that button and on the click of that button, like if something is happening in the background, so that is called as event driven programming. So if you are doing any action and basis on that action, if any operation is happening and result is rendering on the UI, so that is considered as even driven programming. So this even driven programming is available in lightning components. So if you implement lightning component with aura, so basically a component registers that it may fire an event in its markup. So in lightning component, we create a marker file. So there we need to register the event. Then events are fired from the JavaScript controller actions that are typically triggered by a user interacting with the user interface. So like if you have a button and if you click on that button so on click of that button, let's say your controller method is executing so that method will be responsible to fire the event. So in component file we register the event and in JavaScript controller we fire the events. So this was the brief introduction. Now let's talk about how many types of events are available in lightning component. So we have these three categories. First is browser event. So browser events are like on change on click on blur. So if you are using any tag or any markup in your component. So on that markup you can have some events. So you need to call the JavaScript methods along with the tags. So those are known as browser events. Next is system event. So system events for them you don't need to use any tag you just need to register the event in the component file, and you need to write the method that will execute when that system event will be executed. So like we have in it render location change, etc. And in some of the examples I used in it as well. So that is system event. So you don't need to define any markup or tag for that. So these are known as system events. Next is custom event. So in lightning component lightning component with aura you can use two custom events one is component and one is application. So let's discuss these events one by one in detail. So first let's see how browser event works. So this is a lightning select tag or markup. So these are some attributes which are defined with this tag so name, label, and then on change. So this on change is basically a browser event. So whenever this lightning select will be rendered on the UI. So it will show you some options so it is basically used to show the pick list on the UI. So select any pick list value from the UI. So on change will be executed automatically and this on change event will be executed automatically and this method will be executed. And this method you need to define in the JavaScript controller. So upper part will be implemented in the component file and lower part will be implemented in the JavaScript controller. In the upcoming videos I will be demonstrating it with a practical example. So you can go through with that module so that you can understand the proper working of browser event. Next is system event. So in system event you don't need to use any markup or tag. You just need to register the event like aura handler name equals to in it. So this is your system event. So the value equals to this and action equals to seed or doing it. So this doing it is a function that you need to define in the JavaScript controller. So this unit is basically short form of initialize. So whenever your component loads in the browser. So this method will be executed automatically and whatever code you will write in the unit so it will be executed and the results will be generated. So this is the system event. This I also will be demonstrating in the separate module with proper example. Now let's talk about component event. So we have two custom events one is component event and one is application event. So a component event is fired from an instance of a component. The component event can be handled by the component that fired the event or by a component in the containment hierarchy that receives the event. So the component who is firing the event that component can handle that. And the components which are above in the hierarchy, like if any child component is firing the event so its parent can handle that event. So that is basically known as containment hierarchy. So if I go further. So these are the four steps. If you want to create component event so you need to follow these things. So first you need to create custom component event. Then you need to register component event. Then you need to fire component event and then you need to handle the component event. Right. So this I will also be demonstrating with a separate module with proper practical demonstration. So you can watch that demonstration later on. So important about component event. So here child component will pass parameter to event components attribute. So basically component will be having separate bundle and event will be having separate bundle you need to create event file separately. Right. So child component will pass parameters to even components attribute. So basically, through these events, if you want to pass values from one component to another. So component will be passing the values through event and event will pass that value to the component who will be handling that event. So basically from child to parent, if you want to pass the messages so these events will be beneficial. So child component will fetch those attributes from even component attributes component event works in a parent child hierarchy only. Right. So this is important. So child component will pass parameters to even component attributes and through even component attributes those attributes will be fast by parent component. Right. So this is an application event. So make sure you was the practical demonstration of component even because in this module I'm just explaining all type of events theoretically but later on I will be uploading practical demonstration modules as well. So an application event is fired from an instance of a component. The components that provide a handler for the event are notified. It goes to application first and then application broadcast it to each component in the application and can handle that even in any component. The difference between component event and application event is component event works in the parent child hierarchy only but your application event goes to the top and it will be broadcasted to all the components those are available under that application. Right. So this is the basic difference and those components can handle this application event. So again we have four steps for application event. So create custom application event then register application event then fire and then handle. So steps are same as we have in component event but the working is different. So even handling life cycle. So now this is a separate thing like what is the life cycle of even handling that we need to discuss. The next point says detect firing of event. So the framework detects the firing of an event. For example, the event could be triggered by a button click in a notifier component. Right. So, let's say the component which is firing the event. So that will be known as like that will be having the button and if you click on that button like you will be like even will be firing automatically and then the notifier will be detecting like event is fired or not. Then determine the type of event so it can be component event or it can be application event. So the parent or container component instance that fire the event is identified. This container component locates all relevant event handlers for further processing. So application event, like any component can have an event handler for this event. All relevant event handlers are located. Right. So, in component event like parent child relationship should be there but in application event. All the like relevant event handlers can like the components where you have defined the handler so through that it can be handled. Then executing a component event handler. So each of event handler defined in the container component for the event are executed by the handler controller, which can also set attributes or modify data to the component. So causing a real entering of the component and fire another event or invoke a client side or server side action. Right. So this is also important to know. The executing an application event handler. So all event handlers are executed when the event handler is executed. The event instance is passed to the event handler. The render component so after the event handlers and any callback actions are executed. The component might be automatically re-handled if it was modified during the event handling process. This is basically event handling cycle. So this way I gave you the brief overview, like what is event, how many types of events are available, and brief overview about each event. So, don't forget to watch the individual demonstration module so that you can understand how we can implement browser events, how we can implement system events, how we can implement component events and how we can implement application events. Thank you.