Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript JavaScript and the DOM (Retiring) Traversing the DOM Sibling Traversal

Simon Sporrong
Simon Sporrong
35,097 Points
Posted by Simon Sporrong
Simon Sporrong
35,097 Points

Can someome please explain the "e"?

Hello!

I got the task to work but I have a hard time understanding what the "e" does. I know it's more basic but I can't wrap my head around what it does and why we need it. Thank you!

app.js 
const list = document.getElementsByTagName('ul')[0];

list.addEventListener('click', function(e) {
  if (e.target.tagName == 'BUTTON') {

  }
});
index.html 
<!DOCTYPE html>
<html>
    <head>
        <title>JavaScript and the DOM</title>
    </head>
    <link rel="stylesheet" href="style.css" />
    <body>
        <section>
            <h1>Making a Webpage Interactive</h1>
            <p>Things to Learn</p>
            <ul>
                <li><p>Element Selection</p><button>Highlight</button></li>
                <li><p>Events</p><button>Highlight</button></li>
                <li><p>Event Listening</p><button>Highlight</button></li>
                <li><p>DOM Traversal</p><button>Highlight</button></li>
            </ul>
        </section>
        <script src="app.js"></script>
    </body>
</html>

3 Answers

andren
andren
28,558 Points
andren
andren
28,558 Points

The e is a parameter for the anonymous function, it tells JavaScript to assign the first argument that is passed to function to a variable called e within the function. When an event listener is called it is automatically passed an event object as the first argument. The event object contains various info about the event that just occurred.

So e ends up being set equal to that event object.

Simon Coates
Simon Coates
28,694 Points
Simon Coates
Simon Coates
28,694 Points

e is the event. it's how information is provided about what just happened. I don't think you need it all the time (sometimes the method firing is all you need to know), but in this instance, it provides useful information about the target (e.target.tagName).

(andren's explanation of how e represents the event is accurate. it doesn't have to be called e.)

Tommy Gebru
Tommy Gebru
30,164 Points
Tommy Gebru
Tommy Gebru
30,164 Points

function functionName(parameter){codeblock gets executed}

*Arguments & Values are often mistaken for the same thing, when passed in a function: Parameters refer to a value (like a variable) Arguments are the valuesof the parameter (like the value of a variable)

In this case "e" is a parameter or shorthand for the word "event", we use to describe the variable but it can be anything like "whatami"

So this makes the argument something like a click event that occurs and triggers the actual function.