document.addEventListener("click", (e) => console.log(e.target))
So let me begin with this: I am by no means an expert on javaScript(not yet anyway), this is simply a neat little trick I learned and found useful, so if I don't make something clear or don't use the right verbiage I apologize, I'm still learning and this explanation here is to help me better understand how everything works and hopefully you. Now that being said, I'll try and explain what this code is doing.
First, "document" is simply setting the scope of the command, basically within your whole document you want the command to happen.
Next, we use "addEventListener" which is one of the commands javaScript uses to interact with events in the real world, it "listens" for the event that you specify and runs the code you set in response.
The next part within the parentheses is "click" in quotations, here you are setting what event your addEventListener function is listening for (i.e. "submit","keydown","mouseover", ect.) followed by a "," which separates one parameter from another.
Next, we add an anonymous function with "e" as a variable within parentheses, normally these could be empty if you just want to run your code on click or whatever you set for your event but we need to reference the event variable later, this function variable could be named anything we want "e" is just short for event in this case.
Then, we use arrow function syntax to target the last bit of the code, which is console.log(), console.log simply outputs whatever you specify in the parentheses to the console (usually a variable or a string) this is very useful for debugging.
Finally, in console.log we have "e.target" which is the variable we just set in the anonymous function followed by "target" using dot notation, which is just saying to target whatever event is pointing to when the event is triggered (whatever you click on).
Lastly, so what this code is saying is "Within the scope of my document, listen for a click and when that click is triggered, whatever was clicked on we want its information printed to the console".
I have found this pretty useful for locating the spot I want something to show up on my webpage within the HTML code without having to scroll through each element until it highlights or for just finding an ID of an element without having to search for it.
I hope this helps!
Top comments (2)
Not bad. Has a very specific use case I guess but if it helps you find html elements easier then that’s good. Look into developer.mozilla.org/en-US/docs/W... to help remove an event listener if a condition is met. This will help application performance if you ever do use this in a production app.
I also recommend learning how to separate html markup into template literals assigned to a variable in a JS file. Then having your main JS file import those markup variables, query selecting ids in your index.html and using variableName.innerHTML = importedMarkupVariable to render the html. Check out my vanilla JS small web app for made using this sort of Separations of Concerns. github.com/Thesnowmanndev/Random-S... You can also look at previous small apps I made in that same repo.
Sorry if this reply is not formatted, I am on mobile web browser.
Thanks! I'll definitely check this out! I appreciate the feedback!