Qué es más correcto a la hora de diseñar la UI (JS)

Con JS si no recuerdo mal, si usas jQuery una vez creado el elemento, simplemente le añades el listener como a cualquier otro ya existente

Ej a un boton
$( "#target" ).click(function() {
alert( "Handler for .click() called." );
});

#3 Te faltó la palabra mágica "canvas" en #1.

Es muy probable que varios frameworks de videojuegos JS te den herramientas para hacer la interfaz en el canvas.

Si haces el juego a pelo seguramente te sea mucho mas sencillo hacerlo con HTML y CSS, aunque a mi personalmente no me atrae la idea de utilizar "tecnologias" tan diferentes para algo que forma parte del propio juego (o lo que sea).

#5 No se si hasta ahora se ha hecho el experimento con canvas, pero hay frameworks JS como Angular o React si no me equivoco que mantienen un modelo persistente de datos entre la lógica y la vista.

En otras palabras, no tendrías que meter la interfaz en el bucle de renderizado sino que la interfaz por si sola ya estaría atenta a los cambios que ocurren durante la ejecución de la lógica del juego.

Con lo cual podrías controlar lo que se muestra y lo que no como una máquina de estados (solo asignas el valor a la variable, la interfaz ya cambia sola), y lo mismo con datos dinámicos tipo puntuación del jugador, contadores varios, tabla de records, etc...).

Si quieres hacer juegos con JS te sale bastante mejor usar un framework que hacerlo a pelo. Tienes por ahí un montón. Yo te recomiendo Phaser (gratuito) e Impact (de pago). Y, sobre la UI, me parece mucho más lógico hacerla dentro del canvas.