javascript - event - jQuery.click() vs onClick
metodo on jquery (16)
Tengo una gran aplicación de jQuery y estoy usando los dos métodos a continuación para hacer clic en eventos.
Primer metodo
HTML
<div id="myDiv">Some Content</div>
jQuery
$(''#myDiv'').click(function(){
//Some code
});
Segundo metodo
HTML
<div id="myDiv" onClick="divFunction()">Some Content</div>
Función de JavaScript llamada
function divFunction(){
//Some code
}
Utilizo el primer o el segundo método en mi aplicación. ¿Cuál es mejor? Mejor para el rendimiento? ¿Y el estándar?
Diferencia en las obras. Si usa click (), puede agregar varias funciones, pero si usa un atributo, solo se ejecutará una función, la última.
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 estamos hablando de rendimiento, en cualquier caso, usar directamente siempre es más rápido, pero al usar un atributo, solo podrá asignar una función.
Ejecutar un JavaScript cuando se hace clic en un botón:
<button onclick="myFunction()">Click me</button>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Hello World";
}
</script>
El primer método de uso de onclick no es jQuery, sino simplemente Javascript, por lo que no obtiene la sobrecarga de jQuery. La forma de jQuery se puede expandir a través de los selectores si necesitaba 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á usando jQuery, me atendría porque es coherente y desacopla el marcado del script.
El primer método es preferir. Utiliza los modelos de registro de eventos avanzados [s] , lo que significa que puede adjuntar varios controladores al mismo elemento. Puede acceder fácilmente al objeto de evento y el controlador puede vivir en el ámbito 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. No importa si utiliza jQuery, otra biblioteca o los métodos nativos directamente.
El segundo método, utilizando atributos en línea, necesita muchas funciones globales (lo que lleva 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).
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 pagina
- solo un evento para ser registrado para el evento clic
- Estás preocupado por el rendimiento móvil / duración de la batería
Me formé 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 contrapartes 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 la duración de la batería. Otro factor de apoyo reciente, aunque esto solo debería ser una preocupación para las agencias gubernamentales;) tuvimos una ventana emergente de IE7 con un cuadro de mensaje que indica que el proceso de JavaScript está demorando mucho ... el proceso de espera o cancelación. Esto sucedió cada vez que había muchos elementos para enlazar a través de jQuery.
La mayoría de las veces, los métodos de JavaScript nativos son una mejor opción que jQuery cuando el rendimiento es el único criterio, pero jQuery hace uso de JavaScript y facilita el desarrollo. Puede usar jQuery ya que no reduce demasiado el rendimiento. En su caso específico, la diferencia de rendimiento es ignorable.
La separación de las preocupaciones es clave aquí, por lo que la vinculación de eventos es el método generalmente aceptado. Esto es básicamente lo que han dicho muchas de las respuestas existentes.
Sin embargo , no deseche la idea de marcado declarativo demasiado rápido. Tiene su lugar, y con estructuras como Angularjs, es la pieza central.
Debe entenderse que todo el <div id="myDiv" onClick="divFunction()">Some Content</div> fue avergonzado porque algunos desarrolladores abusaron de él. Así llegó al punto de proporciones sacrílegas, al igual que las tables . Algunos desarrolladores en realidad evitan las tables para 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, eso es el comportamiento). Puede ser en la forma de un atributo onClick real, o un atributo personalizado, muy parecido a los componentes javascript de bootstraps.
De esta manera, al mirar solo el marcado, puede ver lo que hace, en lugar de intentar revertir la búsqueda de carpetas de eventos de JavaScript.
Entonces, como una tercera alternativa a la 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 puede 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 se puede sortear usando la tercera alternativa anterior o marcos como Angular y sus atributos de clic de ng con alcance automático.
Ninguno de los dos es mejor, ya que pueden usarse para diferentes propósitos. onClick (en realidad debería ser onclick ) tiene un rendimiento ligeramente mejor, pero dudo mucho que noten una diferencia allí.
Vale la pena señalar que hacen cosas diferentes: .click se puede vincular a cualquier colección de jQuery, mientras que onclick se debe usar en línea en los elementos a los que se desea vincular. También puede vincular solo un evento al usar onclick , mientras que .click permite continuar enlazando eventos.
En mi opinión, sería coherente al respecto y solo usaría .click todas partes y mantendría todo mi código JavaScript unido 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.
Para un mejor rendimiento, utilice el JavaScript nativo. Para un desarrollo más rápido, use jQuery. Verifique la comparación en el 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, marque Eventos del navegador nativo vs jQuery o el enlace de evento de clic nativo jQuery vs.
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
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 escuchas de eventos?
El enlace en línea está en desuso. Además, de esta manera solo puedes vincular una función a un determinado evento.
Por lo tanto recomiendo usar oyentes de eventos. De esta manera, podrá vincular muchas funciones a un solo evento y desvincularlas más tarde si es necesario. Considere este código de 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 la función jQuery: .on o .click .
Puedes combinarlos, usa jQuery para enlazar la función al clic
<div id="myDiv">Some Content</div>
$(''#myDiv'').click(divFunction);
function divFunction(){
//some code
}
Usar $(''#myDiv'').click(function(){ es mejor, ya que sigue el modelo estándar de registro de eventos. ( attachEvent utiliza internally addEventListener y attachEvent ).
Básicamente, registrar un evento de manera moderna es la forma unobtrusive de manejar eventos. También para registrar más de un detector de eventos para el destino, puede llamar a addEventListener() para el mismo destino.
var myEl = document.getElementById(''myelement'');
myEl.addEventListener(''click'', function() {
alert(''Hello world'');
}, false);
myEl.addEventListener(''click'', function() {
alert(''Hello world again!!!'');
}, false);
¿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 solo controlador para un evento. Esto es particularmente útil para las bibliotecas DHTML o las extensiones de Mozilla que necesitan funcionar bien incluso si se usan otras bibliotecas / extensiones.
- Le proporciona un control más preciso de la fase cuando el oyente se activa (captura contra burbujeo)
- Funciona en cualquier elemento DOM, no solo en elementos HTML.
Más sobre registro de eventos modernos -> http://www.quirksmode.org/js/events_advanced.html
Otros métodos, como establecer los atributos HTML , ejemplo:
<button onclick="alert(''Hello world!'')">
O propiedades del elemento DOM , ejemplo:
myEl.onclick = function(event){alert(''Hello world'');};
Son viejos y pueden ser sobreescritos fácilmente.
Se debe evitar el atributo HTML ya que hace que el marcado sea más grande y menos legible. Las preocupaciones de contenido / estructura y comportamiento no están bien separadas, lo que hace que sea más difícil encontrar un error.
El problema con el método de propiedades del elemento DOM es que solo un controlador de eventos puede estar vinculado 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
Vaya por esto, ya que le dará tanto el estándar como el 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.
$(''#myDiv'').click es mejor, porque separa el código JavaScript del HTML . Uno debe tratar de mantener el comportamiento de la página y la estructura diferente . Esto ayuda mucho.
<whatever onclick="doStuff();" onmouseover="in()" onmouseout="out()" />
Los eventos onclick, onmouseover, onmouseout, etc. son realmente malos para el rendimiento (principalmente en Internet Explorer , imagínate). Si codifica con Visual Studio , cuando ejecute una página con estos, cada uno de ellos creará un bloque SCRIPT separado que ocupará la memoria y, por lo tanto, reducirá 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 script separados para cada uno.
(Además, todo lo que todos los demás están diciendo.)