¿Cuál es la diferencia entre usar onclick de jQuery y el atributo onclick?

2 minutos de lectura

¿Cuál es la diferencia entre las siguientes dos piezas de HTML (disculpas si hay algún error tipográfico mientras escribo esto a mano alzada)?

Usando jQuery:

<script type="text/javascript">
    $(document).ready(function() {
        $("#clickme").click(function() {
            alert("clicked!");
        });
    });
</script>

<a id="clickme" href="https://stackoverflow.com/questions/398760/javascript:void(0);">click me</a>

Sin usar jQuery:

<a id="clickme" href="https://stackoverflow.com/questions/398760/javascript:void(0);" onclick="alert('clicked!');">click me</a>

  • Solo una nota: nunca debes poner código JavaScript en el href atributo. Crea enlaces que no hacen nada en los navegadores que no tienen habilitado JavaScript y rompe con la idea de la mejora progresiva (o la degradación elegante, por así decirlo).

    – José Conde

    8 de abril de 2011 a las 7:12

  • @Joseph Earl Sí, pero el punto de poner javascript:void(0) es que se supone que no debe hacer nada. El evento onclick se maneja a través de jQuery en este ejemplo.

    –Kevin Pang

    08/04/2011 a las 15:32

avatar de usuario
Adán Bellaire

Una gran diferencia es que los eventos de jQuery se manejan en un registro que se analiza en el evento de clic. Fundamentalmente, esto significa que se le permite asignar múltiples devoluciones de llamada y hacer que se activen en el orden en que se registraron:

<script type="text/javascript">
    $(document).ready(function() {
        $("#clickme").click(function() {
            alert("clicked!");
        });
        $("#clickme").click(function() {
            alert("I concur, clicked!");
        });
    });
</script>

Ambos serán invocados en el click evento, en ese orden. El Real” onClick El evento es anulado por el sistema controlado por registro de jQuery. En la estructura del documento vainilla, sin un sistema como jQuery, solo puede haber uno onClick evento.

  • +1. Buena respuesta. La normalización de eventos (que creo que jQuery hace) es otra diferencia.

    – set

    11 de septiembre de 2009 a las 0:08

También es una separación más clara del código de la interfaz de usuario (HTML) y el código lógico (JavaScript). Hace que leer cada uno sea un poco más fácil.

Una de las diferencias es que agregar controladores con jQuery’s click no elimina los controladores anteriores.

¿Ha sido útil esta solución?

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Configurar y más información
Privacidad