¿Hay algún caso en el que tenga que utilizar el atributo de evento en línea / enlace anticipado en HTML / JavaScript?

Question

En mi respuesta a la siguiente pregunta SO: ¿Qué significa el enlace de eventos? , hice un comentario de pasada que elel uso de JavaScript en línea / enlace anticipado para enlazar eventos de JavaScript era 'a menudo equivocado'

Por ejemplo:

<input id="MyButton" type="button" value="clickme" onlick="Somefunction()" />

Estaba defendiendo el enfoque de "vinculación tardía" en el que no se hace referencia a JavaScript en el marcado, que entiendo es una práctica recomendada establecida.Sin embargo, los comentaristas afirmaron que hubo ocasiones que requirieron su uso, y me pregunté cuáles podrían ser.

Sin entablar una discusión sobre los méritos relativos de ninguno de los dos, ¿alguien puede pensar en alguna circunstancia que dicte que use el atributo onclick (por ejemplo) en lugar de un enfoque de enlace tardío?

Muchas gracias

Answer 1

Creo que muchos desarrolladores harán esto por ignorancia o falta de conocimiento (que es, por supuesto, común) y los desarrolladores restantes lo harán porque es más conveniente usar atributos HTML-JS que el enlace tardío, si sabe que ciertos objetos y funciones siempre se cargan en cada página y simplemente 'estarán allí'.

Creo que esto es especialmente cierto cuando dicho HTML proviene de una devolución de llamada AJAX. Tomemos un ejemplo en el que una solicitud AJAX vuelve con una respuesta HTML y ese HTML se inserta en la página. Ahora, el desarrollador ingenuo pensaría en estas líneas:

• No tengo idea de qué elementos hay dentro de ese HTML de respuesta, por lo que no sé qué enlaces tardíos necesito agregar.
• ¡Quizás deba agregarlos todos por si acaso! ¿O escribir un script de análisis que detecte elementos y se vincule a los que encuentre?
• Pero, ¿qué sucede si necesito vincularme a algo que aún no existe? ¡Es hora de escribir JavaScript en línea largo!

Todo esto se puede eliminar mediante el uso de una especie de enlace omnipresente que se aplica a todos los elementos actuales y futuros de la página. En jQuery, el equivalente es live() . En lugar de escribir:

$('.foo').click(function(){...});

Podría escribir:

$('.foo').live('click', function(){...});

Ahora, todos los elementos con el nombre de clase 'foo' ejecutarán la función al hacer clic, incluidos los elementos que no existen actualmente . Muy útil para interfaces dinámicas AJAX.

Puede que ya lo sepas, pero solo estoy señalando que cualquier cosa que los atributos JS puedan hacer, JS puro puede hacerlo mejor, y consideraría esa mejor práctica.

Answer 2

los comentaristas afirmaron que hubo ocasiones que requirieron su uso

Supongo que soy uno de esos comentaristas. Lo que realmente dije fue que los oyentes en línea " son una opción razonable en determinadas circunstancias ". No creo que haya ningún caso en el que sea "necesario" (que entiendo en este contexto que significa obligatorio).

Agregar oyentes en línea es simplemente aplicar la misma lógica en el servidor para agregar oyentes que se aplicaría en el cliente y tiene ventajas en eso:

1. El marcado puede crearse y almacenarse en caché o usarse como páginas estáticas; todos los clientes no agregan oyentes una y otra vez cuando se descargan las páginas
2. Los problemas relacionados con la demora entre el elemento que está disponible y el oyente agregado por DOMReady o las funciones de carga o "scripts inferiores" se eliminan por completo
3. Se eliminan los caprichos de varias funciones DOMReady de "navegador cruzado" con respaldo de carga; no existe la posibilidad de que tales funciones no agreguen oyentes si no se utilizan

Por supuesto, esto no significa que todos los oyentes deban agregarse en línea y que la adición dinámica de oyentes es una tontería, solo señalo que es un método viable que resuelve ciertos problemas y es una solución perfectamente razonable en muchos casos.

Si cree que la "vinculación temprana" de los oyentes es buena, hágalo lo antes posible: colóquelos en línea. :-)

PD. También creo que dije que no me gustaba el uso de "vinculante" en este contexto, ya que los oyentes no están vinculados a elementos en ningún sentido real. Son simplemente funciones que se llaman cuando un elemento recibe un evento relacionado. El único tipo de enlace es que la palabra clave this del oyente puede configurarse para hacer referencia al elemento relacionado (que es coherente en todos los navegadores para oyentes en línea, pero no necesariamente para los que se agregan más adelante).

Answer 3

Razones por las que los atributos onclick son malos:

onclick="foo()"

• Su paso en una cadena de código que se evalúa en tiempo de ejecución cuando se hace clic en el elemento.Esto es ineficiente y utiliza los horrores de eval
• Está obligado a almacenar la función foo en el alcance global, contaminando así el alcance global con toda su lógica de manejo de eventos.