Confusingly Add An A Bubbling Event Listener

Question

In the listener that has been added to the section element, ensure that the text input elements are the only children that trigger the background-changing behavior.

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) => {
  e.target.style.backgroundColor = 'rgb(255, 255, 0)';
});

Answer 1 · 2017-04-05T22:12:49Z

April 5, 2017 10:12pm

This is where you add a "filter".

Since the event may have bubbled up from any element in the section, you could perform a test on the event target to see if it is a text input element. For the purpose of this exercise, I think it would be sufficient to just check the tagName. Apply the style change based on the test.

Welcome to the Treehouse Community

Looking to learn something new?

Michael Lawinger

Michael Lawinger

Confusingly Add An A Bubbling Event Listener

1 Answer

Steven Parker

Steven Parker

This is where you add a "filter".