animationEnd Eventlistener 触发多次

Question

Html:

<div id="click">Click</div>
<div id="animateElement">I get animated</div>

CSS:

#animateElement {
height: 100px;
height: 100px;
background: green;
}

.animate {
     animation: blue 2s linear forwards;
}

@keyframes blue {
    from {
        background: red;
    }

    to {
        background: blue;
    }
}

Javascript:

 document.getElementById('click').addEventListener('click', function (e) {
    document.getElementById('animateElement').classList.toggle('animate');
    document.getElementById('animateElement').addEventListener('animationend',function(e){
            alert('animated');

        });


}, false);

First Click is ok, next Clicks fires twice, third click 4 times etc.... Is there a way to prevent this? I tried to remove the eventlistener but i had no success...

Answer 1

Each time the click event listener is called, an additional animationend event listener is added to #animateElement . You can resolve this by de-nesting the registering of event listeners:

document.getElementById('click').addEventListener('click', function (e) {
    document.getElementById('animateElement').classList.toggle('animate');
}, false);

document.getElementById('animateElement').addEventListener('animationend',function(e) {
    alert('animated');
});

You might be interested in reading up on how event listeners work on the MDN Web Docs .