jQuery.click () vs onClick


559

Tengo una gran aplicación jQuery, y estoy usando los dos métodos siguientes para eventos de clic.

Primer metodo

HTML

<div id="myDiv">Some Content</div>

jQuery

$('#myDiv').click(function(){
    //Some code
});

Segundo método

HTML

<div id="myDiv" onClick="divFunction()">Some Content</div>

Llamada a la función de JavaScript

function divFunction(){
    //Some code
}

Utilizo el primer o segundo método en mi aplicación. ¿Cuál es mejor? ¿Mejor para el rendimiento? Y estándar?


99
Puede obtener información sobre las diversas formas de adjuntar controladores de eventos y sus ventajas / desventajas aquí: quirksmode.org/js/introevents.html . jQuery es solo un buen contenedor para el registro avanzado de eventos.
Felix Kling

12
Recuerde poner la función de clic dentro de $ (document) .ready (function ().
joan16v

Respuestas:


559

Utilizando $('#myDiv').click(function(){ es mejor ya que sigue el modelo estándar de registro de eventos. (jQuery usa internamenteaddEventListener y attachEvent).

Básicamente, registrar un evento de manera moderna es la forma discreta de manejar eventos. También para registrar más de un oyente de eventos para el objetivo puede llamar addEventListener()al mismo objetivo.

var myEl = document.getElementById('myelement');

myEl.addEventListener('click', function() {
    alert('Hello world');
}, false);

myEl.addEventListener('click', function() {
    alert('Hello world again!!!');
}, false);

http://jsfiddle.net/aj55x/1/

¿Por qué usar addEventListener? (De MDN)

addEventListener es la forma de registrar un detector de eventos como se especifica en W3C DOM. Sus beneficios son los siguientes:

  • Permite agregar más de un controlador para un evento. Esto es particularmente útil para bibliotecas DHTML o extensiones de Mozilla que necesitan funcionar bien incluso si se usan otras bibliotecas / extensiones.
  • Le brinda un control más preciso de la fase cuando el oyente se activa (captura frente a burbujeo)
  • Funciona en cualquier elemento DOM, no solo en elementos HTML.

Más información sobre el registro de eventos modernos -> http://www.quirksmode.org/js/events_advanced.html

Otros métodos, como establecer los atributos HTML , por ejemplo:

<button onclick="alert('Hello world!')">

O propiedades del elemento DOM , ejemplo:

myEl.onclick = function(event){alert('Hello world');}; 

son viejos y se pueden sobrescribir fácilmente.

Atributo HTMLSe debe evitar el , ya que hace que el marcado sea más grande y menos legible. Las preocupaciones sobre el contenido / estructura y el comportamiento no están bien separadas, lo que hace que sea más difícil encontrar un error.

El problema con las propiedades del elemento DOM método de es que solo un controlador de eventos puede vincularse a un elemento por evento.

Más sobre el manejo tradicional de eventos -> http://www.quirksmode.org/js/events_tradmod.html

Referencia de MDN: https://developer.mozilla.org/en-US/docs/DOM/event


13
Digamos que ejecuta el $('#myDiv').click(function(){código primero, luego genera 20 filas de HTML dinámicamente a partir de JavaScript y cada fila tiene un botón que, cuando se hace clic, se requiere JavaScript para ejecutar esa misma función. Si lo hace primero, no funcionará ya que el controlador de eventos se ha agregado antes de que se haya generado el HTML. Parece más fácil simplemente agregar el onclick="functionName()"HTML generado dinámicamente y luego el botón funciona de inmediato. ¿O conoces una solución más elegante para esta situación?
zuallauz

17
@zuallauz para ese caso jQuery ofrece la .delegate()función. Adjuntará el evento a cualquier elemento que aparecerá en el futuro en el sitio.
Zefiryn

17
@SimonRobb .liveestá en desuso. Úselo .delegatepara versiones anteriores o .onpara versiones más nuevas de jQuery.
Selvakumar Arumugam

44
@Vega, buenos puntos. ¿Qué pasa con la legibilidad? Ahora tiene que buscar todos los archivos JS referenciados en la página para ver todos los controladores de clics de un elemento por ID de elemento en lugar de buscar el nombre de la función. ¿Cuál es su opinión sobre esto?
supertonsky

66
Estoy de acuerdo con @supertonsky. Estoy totalmente en desacuerdo con que $ ('# myDiv'). Click (function () {es mejor. En una aplicación javascript grande, el enlace con un evento se vuelve enormemente difícil de encontrar todas las referencias vinculantes a ese objetivo. ¿Es el enlace en una clase? , una identificación, un hijo hace referencia a una etiqueta html? ¿Y qué sucede si css cambia y los nombres de clase que necesitará cambiar? En mi experiencia trabajando con otros códigos, se vuelve muy feo muy rápido.
Jon

65

Para un mejor rendimiento, use el JavaScript nativo. Para un desarrollo más rápido, use jQuery. Verifique la comparación de rendimiento en jQuery vs Native Element Performance .

He realizado una prueba en Firefox 16.0 de 32 bits en Windows Server 2008 R2 / 7 de 64 bits

$('span'); // 6,604 operations per second
document.getElementsByTagName('span'); // 10,331,708 operations/sec

Para los eventos de clic, verifique los eventos del Navegador nativo frente al desencadenador jquery o jQuery frente al Enlace de eventos de clic nativo .

Pruebas en Chrome 22.0.1229.79 de 32 bits en Windows Server 2008 R2 / 7 de 64 bits

$('#jquery a').click(window.testClickListener); // 2,957 operations/second

[].forEach.call( document.querySelectorAll('#native a'), function(el) {
    el.addEventListener('click', window.testClickListener, false);
}); // 18,196 operations/second

99
jQuery debe ser capaz de funcionar en muchos entornos diferentes que lo hace más robuts y es más fácil de escribir, mantener, pero si la velocidad es el más importante entonces jQuery no es la respuesta
Cooperativas

Tenga cuidado al usar forEach porque no todos los navegadores son compatibles, creo que no para IE, por ejemplo. Tal vez un polyfill sea útil.
khaled_webdev

39

Por lo que entiendo, su pregunta no es realmente acerca de si usar jQuery o no. Es más bien: ¿es mejor vincular eventos en línea en HTML o mediante oyentes de eventos?

El enlace en línea está en desuso. Además, de esta manera solo puede vincular una función a un evento determinado.

Por lo tanto, recomiendo usar oyentes de eventos. De esta manera, podrá vincular muchas funciones a un solo evento y desvincularlas más adelante si es necesario. Considere este código JavaScript puro:

querySelector('#myDiv').addEventListener('click', function () {
    // Some code...
});

Esto funciona en la mayoría de los navegadores modernos.

Sin embargo, si ya incluye jQuery en su proyecto, simplemente use jQuery: .ono .clickfunction.


Es posible registrar múltiples funciones utilizando HTML en línea como <div onclick = "handler1 (); handler2 (); handler3 ();"> </div>
Kira

2
De esta manera, todavía estás registrando una sola "expresión". Por ejemplo, si handler1arroja un error, handler2y handler3nunca será llamado. Además, no puede agregar y eliminar dinámicamente ciertas funciones del oyente. Y por último pero no menos importante, handler1, handler2y handler3tienen que ser declarada en el ámbito global, que es un olor.
Michał Miszczyszyn

Usar try..catchdentro de las funciones no funcionará cuando esté handler2indefinido. Para su información, JavaScript en línea obviamente no funciona cuando JS está deshabilitado en el navegador del usuario, por favor no desinformar a los demás.
Michał Miszczyszyn

Mencioné que no estaba seguro acerca de JavaScript deshabilitado. No estoy desinformando o engañando a otros
Kira

En ese caso, puede probar lo siguiente <div onclick = "function () {try {handler1 (); handler2 (); handler3 ();} catch {}}"> </div>
Kira

16

Puede combinarlos, use jQuery para vincular la función al clic

<div id="myDiv">Some Content</div>

$('#myDiv').click(divFunction);

function divFunction(){
 //some code
}

14

$('#myDiv').clickes mejor, porque separa el código JavaScript del HTML . Uno debe tratar de mantener el comportamiento y la estructura de la página diferentes . Esto ayuda mucho.


2
Esta respuesta tiene sentido ya que las personas que diseñan y escriben cosas js son diferentes en la mayoría de los casos. ¡Y se siente extraño votar esto después de casi 4 años desde que se publicó!
LearningEveryday

14

Vaya por esto, ya que le dará tanto estándar como rendimiento.

 $('#myDiv').click(function(){
      //Some code
 });

Como el segundo método es un código JavaScript simple y es más rápido que jQuery. Pero aquí el rendimiento será aproximadamente el mismo.


11

En mi humilde opinión, onclick es el método preferido sobre .click solo cuando se cumplen las siguientes condiciones:

  • hay muchos elementos en la página
  • solo se registrará un evento para el evento de clic
  • Te preocupa el rendimiento móvil / duración de la batería

Formulé esta opinión debido al hecho de que los motores de JavaScript en dispositivos móviles son de 4 a 7 veces más lentos que sus homólogos de escritorio que se hicieron en la misma generación. Odio cuando visito un sitio en mi dispositivo móvil y recibo un desplazamiento nervioso porque jQuery vincula todos los eventos a expensas de mi experiencia de usuario y duración de la batería. Otro factor de apoyo reciente, aunque esto solo debería ser una preocupación con las agencias gubernamentales;), tuvimos una ventana emergente de IE7 con un cuadro de mensaje que indica que el proceso de JavaScript está tardando mucho ... esperar o cancelar el proceso. Esto sucedió cada vez que había muchos elementos a los que unirse mediante jQuery.


10

Diferencia en obras. Si usa click (), puede agregar varias funciones, pero si usa un atributo, solo se ejecutará una función, la última.

MANIFESTACIÓN

HTML

<span id="JQueryClick">Click #JQuery</span> </br>
<span id="JQueryAttrClick">Click #Attr</span> </br>

JavaScript

$('#JQueryClick').click(function(){alert('1')})
$('#JQueryClick').click(function(){alert('2')})

$('#JQueryAttrClick').attr('onClick'," alert('1')" ) //This doesn't work
$('#JQueryAttrClick').attr('onClick'," alert('2')" )

Si hablamos de rendimiento, en cualquier caso, el uso directo siempre es más rápido, pero el uso de un atributo solo podrá asignar una función.


Podemos ejecutar más de una función usando atributos como $ ('# JQueryAttrClick'). Attr ('onClick', "alert ('2'); alert ('3'); alert ('4')")
Kira

8

La separación de las preocupaciones es clave aquí, por lo que el enlace de eventos es el método generalmente aceptado. Esto es básicamente lo que han dicho muchas de las respuestas existentes.

Sin embargo , no descarte la idea del marcado declarativo demasiado rápido. Tiene su lugar, y con marcos como Angularjs, es la pieza central.

Debe entenderse que el conjunto <div id="myDiv" onClick="divFunction()">Some Content</div>se avergonzó tanto porque algunos desarrolladores lo maltrataron. Entonces llegó al punto de proporciones sacrílegas, muy parecido tables. Algunos desarrolladores realmente evitan tableslos datos tabulares. Es el ejemplo perfecto de personas que actúan sin comprender.

Aunque me gusta la idea de mantener mi comportamiento separado de mis puntos de vista. No veo ningún problema con el marcado que declara lo que hace (no cómo lo hace, ese es el comportamiento). Puede tener la forma de un atributo onClick real, o un atributo personalizado, al igual que los componentes de bootstraps javascript.

De esta manera, al mirar solo el marcado, puede ver lo que hace, en lugar de intentar revertir las carpetas de eventos de JavaScript de búsqueda.

Entonces, como una tercera alternativa a lo anterior, usar atributos de datos para anunciar declarativamente el comportamiento dentro del marcado. El comportamiento se mantiene fuera de la vista, pero de un vistazo puedes ver lo que está sucediendo.

Ejemplo de Bootstrap:

<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>

Fuente: http://getbootstrap.com/javascript/#popovers

Nota La principal desventaja con el segundo ejemplo es la contaminación del espacio de nombres global. Esto puede evitarse utilizando la tercera alternativa anterior o marcos como Angular y sus atributos ng-click con alcance automático.


4

Ninguno de los dos es mejor porque pueden usarse para diferentes propósitos. onClick(debería serlo onclick) funciona muy ligeramente mejor, pero dudo mucho que note una diferencia allí.

Vale la pena señalar que hacen cosas diferentes: .clickse pueden vincular a cualquier colección jQuery, mientras que onclickse deben usar en línea en los elementos a los que desea que se vinculen. También puede vincular solo un evento para usar onclick, mientras que.click permite continuar vinculando eventos.

En mi opinión, sería coherente al respecto y solo lo usaría en .clicktodas partes y mantendría todo mi código JavaScript junto y separado del HTML.

No utilice onclick. No hay ninguna razón para usarlo a menos que sepa lo que está haciendo y probablemente no.


2
Incluso si "mejor" no se define explícitamente, casi nunca es una buena idea poner controladores de eventos en su marcado directamente
Jay

@Jayraj, ¿cuándo dije en mi respuesta que era una buena idea?
Píldoras de explosión

3
Al decir que .clickno era mejor que onclick("Ninguno de los dos es mejor ") se daba a entender que onclickes una forma casi o tan buena de escribir código, cuando en realidad .clickes la mejor práctica por una milla. Lo siento, pero en mi humilde opinión, debería reformular su respuesta
Jay

2
@ExplosionPills Quitaría la parte de la respuesta que dice que ninguno de los dos es mejor. El párrafo al final suena como una contradicción.
Juan Mendes

4
<whatever onclick="doStuff();" onmouseover="in()" onmouseout="out()" />

Los eventos onclick, onmouseover, onmouseout, etc. son realmente malos para el rendimiento (principalmente en Internet Explorer , imagínense). Si codifica con Visual Studio , cuando ejecuta una página con estos, cada uno de estos creará un bloque SCRIPT separado que ocupará memoria y, por lo tanto, ralentizará el rendimiento.

Sin mencionar que debe tener una separación de preocupaciones : ¡JavaScript y los diseños deben estar separados!

¡Siempre es mejor crear evenHandlers para cualquiera de estos eventos, un evento puede capturar cientos / miles de elementos, en lugar de crear miles de bloques de guiones separados para cada uno!

(Además, todo lo que todos los demás dicen).


3

Bueno, una de las ideas principales detrás de jQuery es separar JavaScript del desagradable código HTML . El primer método es el camino a seguir.


3

La mayoría de las veces, los métodos JavaScript nativos son una mejor opción sobre jQuery cuando el rendimiento es el único criterio, pero jQuery utiliza JavaScript y facilita el desarrollo. Puede usar jQuery ya que no degrada demasiado el rendimiento. En su caso específico, la diferencia de rendimiento es ignorable.


2

El primer método de usar onclick no es jQuery, sino simplemente Javascript, para que no obtenga la sobrecarga de jQuery. La forma jQuery se puede expandir a través de selectores si necesita agregarlo a otros elementos sin agregar el controlador de eventos a cada elemento, pero como lo tiene ahora, es solo una pregunta si necesita usar jQuery o no.

Personalmente, ya que está utilizando jQuery, me quedaría con él, ya que es coherente y desacopla el marcado del script.


1
El ejemplo de jQuery es prácticamente lo mismo document.querySelector('#something').addEventListener(...o similar en Javascript simple, por lo que ese no es el punto. Del mismo modo, puede detectar eventos burbujeantes de nodos secundarios en Javascript, no solo con los accesos directos de jQuery. El meollo de la cuestión es los acontecimientos deben ser en el controlador (archivo de definiciones de comportamiento javascript) en lugar de la vista (hay esparcidos aquí y en el html, requiriendo variable global de funciones o, peor aún, el código en línea.)
NoBugs

2

El primer método es preferir. Utiliza los modelos de registro de eventos avanzados , lo que significa que puede adjuntar múltiples controladores al mismo elemento. Puede acceder fácilmente al objeto de evento, y el controlador puede vivir en el alcance de cualquier función. Además, es dinámico, es decir, se puede invocar en cualquier momento y es especialmente adecuado para elementos generados dinámicamente. Ya sea que use jQuery, otra biblioteca o los métodos nativos directamente no importan realmente.

El segundo método, que utiliza atributos en línea, necesita muchas funciones globales (lo que conduce a la contaminación del espacio de nombres) y mezcla el contenido / estructura (HTML) con el comportamiento (JavaScript). No uses eso.

Su pregunta sobre el rendimiento o los estándares no se puede responder fácilmente. Los dos métodos son completamente diferentes y hacen cosas diferentes. El primero es más poderoso, mientras que el segundo es despreciado (considerado mal estilo).


1

Onclick Function Jquery

$('#selector').click(function(){ //Your Functionality });

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.