Ability to add listeners directly to objects like Modals/Collapse/etc

How about a public method to add listener(s) to an object, something like:

class Modal {
    //...

    on(event, callback) {
        this._element.addEventListener(`${event}${EVENT_KEY}`, callback);

        return this;
    }

    //...
}

This will allows us to do something like:

var myModal = new bootstrap.Modal(document.getElementById('myModal'));

myModal
    .on('shown', function (e) {
        // do something...
    })
    .on('hidden', function (e) {
        // do something...
    });

Instead of:

var myModal = new bootstrap.Modal(document.getElementById('myModal'));

myModal._element.addEventListener('shown.bs.modal', function (e) {
    // do something...
});
myModal._element.addEventListener('hidden.bs.modal', function (e) {
    // do something...
});

[alecpl]

I would love if that supported chaining. E.g.

let modal = new Modal(element)
    .on('shown', e => {  })
    .show()

[arcanedev-maroc]

Hi @XhmikosR, i’ve created a PR: #32184