jQuery.click () vs onClick

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?

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

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

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.

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

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

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

function divFunction(){
 //some code
}

$('#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.

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.

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.

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.

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.

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.

<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).

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.

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.

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.

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).

Onclick Function Jquery

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