What are Events?
Events are actions or occurrences that happen in the system where we do programming, which the system tells you about so that we can respond to these events in some way if desired. For example, if the user selects a button on a webpage, one might want to respond to that action by displaying a dialog box.
Understanding the basics of Events:
HTML
<!DOCTYPE html> <html lang="en"> Â Â <body> Â Â Â Â <button class="first">Button 1</button> Â Â Â Â <button class="second">Button 2</button> Â Â Â Â <button class="third">Button 3</button> Â Â Â Â Â Â <script> Â Â Â Â Â Â Â Â const firstBtn = document.querySelector(".first"); Â Â Â Â Â Â Â Â const secondBtn = document.querySelector(".second"); Â Â Â Â Â Â Â Â const thirdBtn = document.querySelector(".third"); Â Â Â Â Â Â Â Â Â Â firstBtn.addEventListener('click', ()=>{ Â Â Â Â Â Â Â Â Â Â Â Â console.log("Button 1 is Clicked"); Â Â Â Â Â Â Â Â }); Â Â Â Â Â Â Â Â secondBtn.addEventListener('click', ()=>{ Â Â Â Â Â Â Â Â Â Â Â Â console.log("Button 2 is Clicked"); Â Â Â Â Â Â Â Â }); Â Â Â Â Â Â Â Â Â Â thirdBtn.addEventListener('click', ()=>{ Â Â Â Â Â Â Â Â Â Â Â Â console.log("Button 3 is Clicked"); Â Â Â Â Â Â Â Â }); Â Â Â Â Â Â </script> </body> Â Â </html> |
Output:
Button 1 is Clicked Button 2 is Clicked Button 3 is Clicked
When button 1 is clicked, we get the output in the console as Button 1 is Clicked and similarly depending on the button which is clicked. Here we have an event handler that is associated with the button which looks for the click event.
In JavaScript, we have an event object which has all the information associated with the event which can be used to find out which event is being fired. Consider the example above and now we make the following modifications.
HTML
<!DOCTYPE html> <html lang="en"> Â Â <body> Â Â Â Â <button class="first">Button 1</button> Â Â Â Â <button class="second">Button 2</button> Â Â Â Â <button class="third">Button 3</button> Â Â Â Â Â Â <script> Â Â Â Â Â Â Â Â const firstBtn = document.querySelector(".first"); Â Â Â Â Â Â Â Â const secondBtn = document.querySelector(".second"); Â Â Â Â Â Â Â Â const thirdBtn = document.querySelector(".third"); Â Â Â Â Â Â Â Â Â Â firstBtn.addEventListener('click', (e)=>{ Â Â Â Â Â Â Â Â Â Â Â Â console.log(e.target); Â Â Â Â Â Â Â Â }); Â Â Â Â Â Â Â Â Â Â secondBtn.addEventListener('click', (e)=>{ Â Â Â Â Â Â Â Â Â Â Â Â console.log(e.target); Â Â Â Â Â Â Â Â }); Â Â Â Â Â Â Â Â Â Â thirdBtn.addEventListener('click', (e)=>{ Â Â Â Â Â Â Â Â Â Â Â Â console.log(e.target); Â Â Â Â Â Â Â Â }); Â Â Â Â </script> </body> </html> |
Output:
Button 1 Button 2 Button 3
We have passed in the event object as a parameter to the function which is to be executed when the event is fired. The target attribute tells us the element that fires the event hence we get our desired answer. This is how we can use the event object in JavaScript to know which element is fired or what type of element is being fired.
If we replace the e.target with just e we would get the event object as the output that can be used to extract any information about the event.
HTML
<!DOCTYPE html> <html lang="en"> Â Â <body> Â Â Â Â <button class="first">Button 1</button> Â Â Â Â <button class="second">Button 2</button> Â Â Â Â <button class="third">Button 3</button> Â Â Â Â Â Â <script> Â Â Â Â Â Â Â Â const firstBtn = document.querySelector(".first"); Â Â Â Â Â Â Â Â const secondBtn = document.querySelector(".second"); Â Â Â Â Â Â Â Â const thirdBtn = document.querySelector(".third"); Â Â Â Â Â Â Â Â Â Â firstBtn.addEventListener('click', (e)=>{ Â Â Â Â Â Â Â Â Â Â Â Â console.log(e.type); Â Â Â Â Â Â Â Â }); Â Â Â Â Â Â Â Â Â Â secondBtn.addEventListener('click', (e)=>{ Â Â Â Â Â Â Â Â Â Â Â Â console.log(e.type); Â Â Â Â Â Â Â Â }); Â Â Â Â Â Â Â Â Â Â thirdBtn.addEventListener('click', (e)=>{ Â Â Â Â Â Â Â Â Â Â Â Â console.log(e.type); Â Â Â Â Â Â Â Â }); Â Â Â Â </script> </body> Â Â </html> |
Output:
click click click
