Splidejs / splide

Splide is a lightweight, flexible and accessible slider/carousel written in TypeScript. No dependencies, no Lighthouse errors.
https://splidejs.com
MIT License
4.83k stars 418 forks source link

Splide is creating a large sum of event listeners #1155

Open felixranesberger opened 1 year ago

felixranesberger commented 1 year ago

Checks

Version

4.1.4

Description

If multiple Splide instances are created on a page, Splide creates multiple events for every instance. Can all instance events be grouped to a single event type?

Screenshot 2023-04-18 at 11 19 38

Example code that could fix the issue

type ResizeEventCallback = () => void

const onResizeEvents: ResizeEventCallback[] = [];

window.addEventListener('resize', () => {
    onResizeEvents.forEach(callback => callback());
})

const useScreen = () => ({
    onResize(callback: ResizeEventCallback) {
        onResizeEvents.push(callback);
    }
});

const { onResize } = useScreen();
onResize(() => {
    // do some stuf
});

Reproduction Link

No response

Steps to Reproduce

Create mutliple Splide sliders

Expected Behaviour

Splide creates a single event listener for all Splide instances of that event type.

Webberjo commented 1 year ago

I think this might be an issue with how you're creating your keydown event listener and not with Splide.

felixranesberger commented 1 year ago

I think this might be an issue with how you're creating your keydown event listener and not with Splide.

Can you elaborate a bit further? Because I'm not creating any keydown event-listeners in my code. When I check the event origin, the keydown events are created by the splide esm bundle.