TLDR;
jQuery implementó históricamente varias formas de escuchar que ciertos elementos del DOM estuviesen listos (ready).
Son los siguientes:
$( handler )
$( document ).ready( handler )
$( "document" ).ready( handler )
$( "img" ).ready( handler )
$().ready( handler )
A partir de la versión 3, jQuery quiso poner un poco de orden en medio de ese lío y decidió que la forma recomendada es la primera, declarando todas las demás obsoletas.
Realmente, lo que tú preguntas no tiene nada que ver con esto. En jQuery la escucha de elemntos por tipo (body, html), se hace exactamente como la tienes. O sea, que esto es correcto y no obsoleto:
$("html").click(function() {
//Aquí bloque de código
});
Y esto también:
$("body").click(function() {
//Aquí bloque de código
});
Ahora bien, en Javascript se recomienda siempre someter el bloque de código a una escucha de que el DOM haya sido cargado. Y ahí si entra tu duda, porque como complemento a tu código conviene poner un bloque que escuche el document.ready y para ello hay que usar la sintaxis que recomienda jQuery a partir de la versión 3:
$(function() {
$("html").click(function() {
console.log('Listener de html: ¡Funciona!');
});
$("body").click(function() {
console.log('Listener de body: ¡También funciona!');
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<button>Click aquí</button>
</body>
Como aporte, te dejo aquí traducción de la documentación de jQuery sobre este caso de obsolescencia concreto:
jQuery ofrece varias formas de adjuntar una función que se ejecutará
cuando el DOM esté listo. Todas las siguientes sintaxis son
equivalentes:
$( handler )
$( document ).ready( handler )
$( "document" ).ready( handler )
$( "img" ).ready( handler )
$().ready( handler )
A partir de jQuery 3.0, solo se recomienda la primera sintaxis; las
otras sintaxis siguen funcionando pero están en desuso. Esto se debe a
que la selección no influye en el comportamiento del método
.ready(), que es ineficaz y puede dar lugar a suposiciones
incorrectas sobre el comportamiento del método. Por ejemplo, la
tercera sintaxis funciona con "document" que no selecciona nada. La
cuarta sintaxis espera a que el documento esté listo pero implica
(incorrectamente) que espera a que las imágenes estén listas.
También hay $(document).on("ready", handler), obsoleto a partir de
jQuery 1.8 y eliminado en jQuery 3.0. Tenga en cuenta que si el DOM
está listo antes de que se adjunte este evento, el controlador no se
ejecutará.
El método .ready() se usa típicamente con una función anónima:
$( document ).ready(function() {
// Handler for .ready() called.
});
Que es equivalente a la forma recomendada de llamada:
$(function() {
// Handler for .ready() called.
});
Rendimiento del evento
Cuando asignas eventos de escucha debes hilar fino, porque no es lo mismo asignar ciertos eventos de escucha globales (a todo el body por ejemplo) que asignarlo a elementos más específicos. Si abusas de esa práctica tu código podría verse gravemente ralentizado.
Esto viene claramente explicado en la documentación de jQuery en el apartado Event performance:
En la mayoría de los casos, un evento como un clic ocurre con poca
frecuencia y el rendimiento no es una preocupación importante. Sin
embargo, los eventos de alta frecuencia, como el movimiento del mouse
o el desplazamiento, pueden dispararse docenas de veces por segundo, y
en esos casos se vuelve más importante usar los eventos con prudencia.
El rendimiento se puede aumentar reduciendo la cantidad de trabajo
realizado en el propio controlador, almacenando en caché la
información que necesita el controlador en lugar de volver a
calcularla, o limitando la cantidad de actualizaciones de página
reales mediante setTimeout.
Adjuntar muchos controladores de eventos delegados cerca de la parte
superior del árbol del documento puede degradar el rendimiento. Cada
vez que ocurre el evento, jQuery debe comparar todos los selectores de
todos los eventos adjuntos de ese tipo con cada elemento en la ruta
desde el objetivo del evento hasta la parte superior del documento.
Para obtener el mejor rendimiento, adjunte eventos delegados en una
ubicación de documento lo más cerca posible de los elementos de
destino. Evite el uso excesivo de document o document.body para
eventos delegados en documentos grandes.
jQuery puede procesar selectores simples de la etiqueta de formulario
#id.class muy rápidamente cuando se utilizan para filtrar eventos
delegados. Entonces, "#myForm", "a.external" y "button" son
selectores rápidos. Los eventos delegados que utilizan selectores más
complejos, en particular los jerárquicos, pueden ser varias veces más
lentos, aunque siguen siendo lo suficientemente rápidos para la
mayoría de las aplicaciones. Los selectores jerárquicos a menudo se
pueden evitar simplemente adjuntando el controlador a un punto más
apropiado del documento. Por ejemplo, en lugar de $( "body" ).on( "click", "#commentForm .addNew", addComment ) utilice $( "#commentForm" ).on( "click", ".addNew", addComment ).
Preguntas relacionadas
