JavaScript event listeners are great they allow you to execute code when the user clicks a button when he enters text into an input field when he hits a specific key on his keyboard or when he does a million other possible things we can always make something happen as a response today we're going to explore event listeners by looking at real code examples my name is Fabian and this is coding to go the channel where we learn the most relevant coding Concepts in just a few minutes I'm assuming you already have an HTML element that you want to interact with like a button and you also have a Javascript file that you have imported properly in your HTML hat using the defer attribute now to work with this button we need to get it into a JavaScript variable const button equals document. getet element by ID my button I basically search the document for the element that has the ID my button this ID has to be identical with the ID that I assigned in HTML now we can use button. add event listener this is a JavaScript function this function will receive two arguments the first one is the event type we want to listen to the event click make sure to write this as a string in quotation marks now we write comma to assign the second argument which is the function we want to call let's call it do something this function needs to be defined somewhere function do something for now we can show an alert hello world and this code should already work when we click on the button there's a popup saying hello world now what you do with this function is completely up to you let's look at a few examp examples you can create a simple Cookie Clickers clone by having a counter that increases every time you click the button a very common use case for event listeners would be to add and remove classes on click because these classes can have many different styles that we applied in CSS doing that will allow the user to change the design of the website but click is by far not the only event you need to know since you can apply an event listener to any HTML element they all have their own unique events that you can listen to the most basic event t that every element has our click for clicking Mouse over for when you hover over the element and mouse out when the mouse leaves the element but you can also detect keyboard inputs first we apply an event listener to the entire window the event that we are waiting for is key down this event will be triggered once any key on the keyboard is clicked by the way you don't have to write a separate function for the second argument you can simply Define your function directly inside the parenthesis then you don't have to come up with the name for it the interesting thing here is that we actually using the event object e this parameter is something very special when working with event listeners it is an object that holds a lot of information about the event that has been triggered let's console lock this event object and see what happens if I hit a key on my keyboard on the browser console we can see our keyboard event object this one has a lot of properties the letter F that I pressed now if you combine this key code property with if conditions and Loops you can already start developing simple browser games just ask if a certain key was pressed and then do something as a response each key has a unique key code that you can look up in the documentation when you need it or just console log the event. code and watch it being printed in the console my favorite event type is input because this is by far the most useful next to click the input event allows us to do something whenever something happens inside an input field select or text area every single time you enter a letter the input event is fired you can use this code for example to create a live display the heading will greet me because I'm assigning the event. target. value to the inner text of the heading the property that I used to implement this feature was the target the target property contains the information on what element the event was triggered which is the input field pretty cool now we know the first parameter is the event type it controls when to do something for example on click the second parameter is the function that controls what to do when the event is triggered but there's also a third parameter which is the options object this is an object where can provide additional options for the event listener now you can go down a real rabbit hole and read everything about these options but honestly you're not going to use them very often the most famous option that you might actually use would be the Boolean once if you set this to true then the event listener can only be triggered one time the rest of the events will be ignored this was coding to go and if you learned something new today like and subscribe to support our Channel you also might want to check out this video right here