addEventListener skips adding the listener, applies function instead

Question

I've been trying to get some images to do a simple animation when the mouse enters and reversing it when it leaves. I defined the desired animations in CSS and tried to add the event listeners to the images themselves, but the listeners aren't added. As soon as the site loads up the images show one animation and that's that.

Here's my JavaScript code:

function BlurElements(element) {
    element.style.animation = 'blurIn 1s';
};
function unBlurElements(element) {
    element.style.animation = 'blurOut 1s';
};
let images = document.getElementsByTagName('img');
for(let i = 0; i < images.length; i++) {
    images[i].addEventListener('mouseover', BlurElements(images[i]));
    images[i].addEventListener('mouseleave', unBlurElements(images[i]));
};

And here's the HTML:

<!doctype HTML>
<main>
    <head>
        <link href="resources/css/style.css" type="text/css" rel="stylesheet">
        <meta charset="utf-8">
    </head>
    <body>
        <header>
            <nav>
                <img src="resources/media/logo.jpg">
                <a href="#disponibles">Cachorros</a>
                <a href="#plantel">Plantel</a>
                <a href="#about">Contacto</a>
            </nav>
        </header>
        <div id="body">
            <section id="landing">
                <section id="text">
                    <h1 class="header"></h1>
                    <p></p>
                </section>
            </section>
            <section id="disponibles">
                <h3 class="header">Disponibles</h3>
                <section id="pictures">
                    
                    <figure>
                        <img id="pic1" src="resources/media/capiovi.jpg" alt="Foto de Capioví">
                        <figcaption>
                            <h5>Capioví</h5>
                            <h5><a href="#Amazonas">Amazonas</a> / Leopoldo</h5>
                            <h5>17/12/2020</h5>
                        </figcaption>
                    </figure>
                    <figure>
                        <img src="resources/media/obera.jpg" alt="Foto de Oberá">
                        <figcaption>
                            <h5>Oberá</h5>
                            <h5><a href="#Amazonas">Amazonas</a> / Leopoldo</h5>
                            <h5>17/12/2020</h5>
                        </figcaption>
                    </figure>
                    <figure>
                        <img src="resources/media/azara.jpg" alt="Foto de Azara">
                        <figcaption>
                            <h5>Azara</h5>
                            <h5><a href="#Amazonas">Amazonas</a> / Leopoldo</h5>
                            <h5>17/12/2020</h5>
                        </figcaption>
                    </figure>
                </section>
            </section>
            <section id="plantel">
                <h3 class="header">Plantel</h3>
                <section id="pictures">
                    <figure id="Intro">
                        <img src="resources/media/intro.jpg" alt="Foto de Intro">
                        <figcaption>
                            <h5>Intro Stars Team</h5>
                        </figcaption>
                    </figure>
                    <figure id="Amazonas">
                        <img src="resources/media/amazonas.jpg" alt="Foto de Amazonas">
                        <figcaption>
                            <h5>Amazonas de Nuevos Ayres</h5>
                        </figcaption>
                    </figure>
                </section>
            </section>
            <footer id="about">
                <a><img src="resources/media/instagram.png"></a>
                <a><img src="resources/media/facebook.png"></a>
                <a><img src="resources/media/twitter.png"></a>
            </footer>
        </div>
        <script src="resources/js/script.js"></script>
    </body>

</main>

When I open DevTools I can verify there are no event listeners added to the document, but the function in the last event listener to supposedly be added is indeed applied to the content. Any help is much appreciated!!

You are calling the passed functions and assigning the return values as the listener callbacks. You can instead pass anonymous functions `images[i].addEventListener('mouseover', () => BlurElements(images[i]));`. See the docs: [Event listener with an arrow function](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#event_listener_with_an_arrow_function) — pilchard, Mar 02 '21 at 22:43
Does this answer your question? [How to pass arguments to addEventListener listener function?](https://stackoverflow.com/questions/256754/how-to-pass-arguments-to-addeventlistener-listener-function) — pilchard, Mar 02 '21 at 22:47
@pilchard great to see the mistake I was making. It all works now, and I'll keep that syntax bit in mind for the future! Thanks! — Oledtrix, Mar 02 '21 at 23:26

addEventListener skips adding the listener, applies function instead

0 Answers0