What is the purpose of adding and then immediately removing an event listener?

Question

I came across the following on github, which forms part of a Class dedicated to managing the behaviour for a drawer-style side navigation.

closeSideNav() {
    this.sideNav.classList.remove('side-nav--visible');
    this.sideNavContent.classList.add('side-nav__content--animatable');
    this.sideNavContent.style.transform = 'translateX(-102%)';

    let onSideNavClose = () => {
        this.sideNav.removeEventListener('transitionend', onSideNavClose);
    }
    this.sideNav.addEventListener('transitionend', onSideNavClose);
}

The first three lines of the function need no explanation, but I'm a bit confused by the last three. At first it I thought the transitionend event listener was added and then immediately removed - perhaps signalling to another piece of code not shown here - but now I'm really not used to this pattern.

What's the purpose of these lines?

Jonas Wilms · Accepted Answer · 2017-09-16 12:14:38Z

4

it is not immediately removed. Its removed after it triggered once . Thats a common pattern for one-time UI actions, e.g. the navigation can just be closed once, a second button press makes no sense and can confuse the running animations etc.

answered Sep 16, 2017 at 12:14

Jonas Wilms

139k20 gold badges164 silver badges164 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

verism Over a year ago

OK, I see - so the listener is removed once the css animations have finished. But as far as I can tell (indubitably incorrectly), all that occurs once the transitions are complete is the removal of the recently applied listener. I understand that animations require a level of management, but I'm failing to see how this code actually helps.

Pointy Over a year ago

@verism it probably has a lot to do with what goes on inside onSideNavClose.

verism Over a year ago

@Pointy Isn't onSideNavClose being defined inside the closeSideNav function?

Pointy Over a year ago

@verism oh, durr; sorry, no coffee yet. Well it's not clear; maybe it's just an example or something. Perhaps you should be asking the author of that code, who'd probably know for sure why it's there.

Collectives™ on Stack Overflow

What is the purpose of adding and then immediately removing an event listener?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related