AddEventListener não serve?

Na aula o professor usa certo código para selecionar um elemento de id navbar, mas eu queria entender por que não é possível utilizar o método que aprendi no curso de javascript (pre-requisito desse).

Código que o instrutor usa, e funciona no meu site:

$('#navbar').on('show.bs.collapse', function () {
    console.log('funcionando');
})

dessa maneira toda vez que a navbar é colapsada a mensagem funcionando aparece no console.

O código baseado no método que aprendido curso anterior:

var navbar = document.querySelector("#navbar");

navbar.addEventListener('show.bs.collapse', function () {
    console.log('funcionando com outro metodo');
})

Esse script já não funciona como esperado. Eu verifiquei pelo console, e a variável navbar tem o mesmo valor que a query $('#navbar') retornatia, a div a ser colapsada.

Não há nenhum erro no console.

Desde já agradeço!