As <file-pond> is a custom element we can use jQuery like we would with other HTML elements.

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

<form action="/upload" method="POST">
    <file-pond>
        <label for="my-file">Drop files here, or <u>browse</u></label>
        <input id="my-file" type="file" name="files" required />
    </file-pond>

    <button type="submit">Upload</button>
</form>

<script type="module">
    // filepond imports
    import { defineFilePond } from 'filepond';
    import { locale } from 'filepond/locales/en-gb.js';

    // defines <file-pond> element
    defineFilePond({
        locale,
    });

    // listen for changes
    $('file-pond').on('change', function (event) {
        console.log(event.target.entries);
    });
</script>

We can create a FilePond element like we can any other element.

// create a file pond element
const $element = $('<file-pond>', {
    on: {
        change: function (event) {
            console.log(event);
        },
    },
});

// add it to the body
$element.appendTo('form');