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

Question

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

Usando jQuery:

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

<a id="clickme" href="javascript:void(0);">click me</a> 

No usar jQuery:

<a id="clickme" href="javascript:void(0);" onclick="alert('clicked!');">click me</a> 

Answer 1

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 les han disparado en el orden en el que fueron registrados:

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

Ambos estarán invocarse en el caso click, en ese orden. El evento "real" onClick es anulado por el sistema de registro de jQuery. En la estructura de documento de vanilla, sin un sistema como jQuery en su lugar, solo puede haber un evento onClick.

Answer 2

Una de las diferencias es que la adición de los manipuladores con click de jQuery no elimina los controladores anteriores.

Answer 3

También es una separación más clara de código de UI (el HTML) y el código de lógica (el JavaScript). Hace que la lectura sea un poco más fácil.