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...
});

Start by reading the Modal and Collapse component implementations and how their element events are currently exposed through _element. Compare the requested chained on(event, callback) API with the existing event naming conventions and determine which components would need consistent support. Done means the scope and public API are defined and covered by appropriate component behavior tests.