Forma correta para atribuição de um evento de Click Listener.

Olá eu estou tendo alguns problemas para adicionar um evento de Click Listener em uma pagina dinâmica. O elemento ao qual eu quero adicionar esse evento é criados posteriormente ao carregamento da pagina.

Inicialmente eu tentei atribuir o evento utilizando o código a baixo, porem recebo um erro no console, dizendo que o elemento não existe (obviamente ele não foi criado ainda).

document.querySelector(seletor).addEventListener('click', function (event){
    //função
});

A forma atual que estou utilizando e que funciona é usando jQuery, porem gostaria de utilizar Javascript puro.

Meu código com jQuery

$(document).on('click', seletor, function(event) {
    //função
});

Utilizando apenas JS sem nenhum framework, eu cheguei na seguinte solução, utilizando MutationObserver.

function esperarElemento(selector){
    var observador = new MutationObserver(function(mutations) {
        var element= document.querySelector(selector);
        if (element !== null){
            document.querySelector(selector).addEventListener('click',           function (event){
                    //função
            });
            observador .disconnect();
        }
    });
    observador .observe(document.documentElement, { childList: true, subtree: true });
}

//chamo a função
esperarElemento(selector);

Mas essa forma não me parece muito certa, pois eu fico observado todas as mudanças no DOM

Existe uma forma correta mais elegante de atribuir um evento a um elemento que ainda não existe?