In Listener, old listener_controller event is still being triggered on target field change

[nayminlwin]

Describe the bug When using Listener with target field and then changing the target field more than once will trigger the old controller instance's asyncLoadData function. This causes the browser to throw an error FormData constructor: Argument 1 is not an object. since the controller's element is already detached.

To Reproduce Steps to reproduce the behavior:

1. Create a Screen with a single checkbox
2. Create a Listener that targets the checkbox
3. Check/uncheck the checkbox more than once

Expected behavior No client side error occurred.

Desktop (please complete the following information):

• OS: Windows 11
• Browser Firefox
• Version 121.0.1

Server (please complete the following information):

• Platfrom Version: 14
• Laravel Version: 10
• PHP Version: 8.2
• Database: MariaDB
• Database Version: 10

Additional context Seems like the problem's caused by stale event handler pointing to the asyncLoadData. I tried removing the event handler on disconnect to solve it through my own custom controller like follows.

    eventHandles = {};
    connect() {
        this.targets.forEach(name => {
            document.querySelectorAll(`[name="${name}"]`)
                .forEach((field) => {
                    this.eventHandles[field] = () => this.asyncLoadData();
                    field.addEventListener('change',  this.eventHandles[field])
                });
        });
    }
    disconnect() {
        this.targets.forEach(name => {
            document.querySelectorAll(`[name="${name}"]`)
                .forEach((field) =>
                    field.removeEventListener('change', this.eventHandles[field])
                );
        });
    }

Not sure if this is the preferred approach though. If so, I can submit a pull request.