 Hello everyone. I am Sanjay Gupta. I welcome you on Sanjay Gupta Tech School. So in this module, I'm going to demonstrate a system event along with browser event. So this is part two of the previous module. So in previous module I just demonstrated system event. So this is the follow video which will be demonstrating browser event. So let's start with understanding browser events along with system event. So in previous module I just demonstrated the use of system event. So we saw in it. And like I handled it with the help of this method. Right. So it was our apex controller where we applied the SOQL and it was returning the list. And this is our JavaScript controller where I called the method of apex class and return the list to the component. Right. So after applying this system event, now I'm going to apply the browser event. So here you can see we have a tag that is lightning select. So first of all, the difference between system event and browser event. So system event works automatically. You don't need to relate them with a particular tag. You just need to handle them. But if you want to run the browser events, if you want to fire the browser event, so you need a tag. So whenever you do some interaction with the tag that is rendered on the UI, so then only your JavaScript method will be executed. So here I'm going to create one or ID named as select one. And here I'm going to call the event on change and when this event will be fired. So I'm going to call this method handle change. Right. So now I need to define this method in the JavaScript controller. So I'm moving here. So I pasted it and I'm just copying it. So this will be my handle change method. So in this handle change method, I need to write the code. So before that I'm going to create one more attribute. So what I did, I just created one attribute named as record ID. So what I'm going to do whenever I will be selecting an option from this dropdown. So this on change event will fire and this handle change method will be executed and the selected options value if I selected none so its value will be null. So I selected any account name so that corresponding ID will be processed and that value I need to store in this report ID. And I'm going to display it on the UI with this expression. So now here I need to write the code so that I can store value of that selected dropdown into record ID variable. So I'm just writing component dot set record ID, and here I'm writing component dot find select one. So basically I'm just finding the RID. So here you can see this component is having RID as select one. So I'm just finding that component and trying to get its value through this. Okay, so the selected options value will be fast and it will be stored in this record ID variable or attribute. So I just saved the code. Now I just need to execute it. So here I'm writing demo application and in this demo application I'm just going to call this component. So I clicked on preview. So component is getting low getting loaded and here you can see automatically on load it will be showing some accounts so here five account reports are displayed automatically. This is happening because we have this system even that is in it that executed automatically. Now, right now record ID is not showing anything, because we have not selected any option. So I'm going to select one option sample account for entire elements. Okay, so it should work. Let me check what is not working. So basically I just need to add C dot as well. So if you want to call any method that is defined in the JavaScript controller. So you need to write it like this. So I'm going here doing a refresh again. And I'm going to select account. So here you can see as I selected the account, the corresponding record ID populated automatically here. So this is browser event like whenever you change any account so it's corresponding ID will be fast and you can process it for further uses. If I go here and select any other account. So you can see ID is changing accordingly. So this is a browser event. Now, if you want to apply one more browser event like if you have a button and on click off that button you want to execute any method so that can also happen. So I'm just copying this method pasted it. So instead of handle change, I'm naming it as handle click. Right. And here I'm going to create a button. So I'm creating lightning button. Its label will be get ID and on click, it will be calling handle click. Right. And from here I'm just removing it. Right. So this time on change won't work. This button click will work. Right. So I'm moving here and doing a refresh. So you will see a button. So button is available here. Now I'm selecting one account so you can see ID is not displayed. Now I clicked on this get ID. So if I click on this get ID button so ID is fetching and it is displaying on the UI. So this way on particular markup or tag you can bind a particular method with the help of this browser event. So this is all about system event and browser event. So I hope you understood the difference like how we can implement them in lightning component. Thank you.