What does E mean in this code "e.target"

Question

This is the question

"In the listener that has been added to the section element, ensure that the text input elements are the only children"

I am assuming it's a section, but I could not see such a section in the index.html file

This is the answer I found in the community

if (e.target.tagName == 'INPUT') {

In the listener that has been added to the section element, ensure that the text input elements are the only children

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>JavaScript is an exciting language that you can use to power web servers, create desktop programs, and even control robots. But JavaScript got its start in the browser way back in 1995.</p>
            <hr>
            <p>Things to Learn</p>
            <ul>
                <li>Item One: <input type="text"></li>
                <li>Item Two: <input type="text"></li>
                <li>Item Three: <input type="text"></li>
                <li>Item Four: <input type="text"></li>
            </ul>
            <button>Save</button>
        </section>
        <script src="app.js"></script>
    </body>
</html>

app.js

let section = document.getElementsByTagName('section')[0];

section.addEventListener('click', (e) => {
    if (e.target.tagName == 'input') {
  e.target.style.backgroundColor = 'rgb(255, 255, 0)';
});

Answer 1 · 2018-09-04T21:24:52Z

September 4, 2018 9:24pm

Hi there, Davindar Singh ! The "e" is a common naming convention for the Window.event object. You are accessing the target property on that. Now the question might be why not use event.target? And you could, but if you use Firefox you will still have to pass in the event explicitly. Microsoft made the Window.event object global in Edge, Google followed suit with Chrome, and Apple then followed with Safari. So if you had something like:

section.addEventListener('click', () => {  // here we don't pass in the event object
    if (event.target.tagName == 'input') {
    event.target.style.backgroundColor = 'rgb(255, 255, 0)';
});

It should still work in Edge, Chrome and Safari, but it will not work in Firefox and will throw errors telling you that event is undefined. So we need to pass in that event. You could rewrite it without the "e" as event and that would also work, but you do need to pass in the event. So you could rewrite that as:

section.addEventListener('click', (event) => {  // here we pass in the event object
    if (event.target.tagName == 'input') {
    event.target.style.backgroundColor = 'rgb(255, 255, 0)';
});

Here's a bit of short documentation on Window.event, though somewhere I found a more detailed explanation once, but cannot find it again right now.

Also, I believe the "section" they are referring to are the <section></section> tags that start before the <h1> and end after the <button>.

Hope this helps!

Answer 2 · 2018-09-04T21:19:41Z

September 4, 2018 9:19pm

e means event. e.target is the element that triggered the event.

Welcome to the Treehouse Community

Looking to learn something new?

Davindar Singh

Davindar Singh

What does E mean in this code "e.target"

2 Answers

Jennifer Nordell

Jennifer Nordell

KRIS NIKOLAISEN

KRIS NIKOLAISEN