event - metodo on jquery
Diferencia entre.on(''clic'') vs.click() (10)
¿Hay alguna diferencia entre el siguiente código?
No, no hay diferencia funcional entre los dos ejemplos de código en su pregunta. .click(fn) es un "método de acceso directo" para .on("click", fn) . De la documentación para .on() :
Existen métodos abreviados para algunos eventos, como
.click()que se pueden usar para adjuntar o activar controladores de eventos. Para obtener una lista completa de métodos abreviados, consulte la categoría de eventos .
Tenga en cuenta que .on() diferencia de .click() en que tiene la capacidad de crear controladores de eventos delegados al pasar un parámetro de selector , mientras que .click() no. Cuando se llama a .on() sin un parámetro selector , se comporta exactamente igual que .click() . Si desea la delegación de eventos, use .on() .
¿Hay alguna diferencia entre el siguiente código?
$(''#whatever'').on(''click'', function() {
/* your code here */
});
y
$(''#whatever'').click(function() {
/* your code here */
});
Aquí obtendrá una lista de diferentes maneras de aplicar el evento de clic. Puede seleccionar según corresponda o si su clic no funciona, intente una alternativa a estos.
$(''.clickHere'').click(function(){
// this is flat click. this event will be attatched
//to element if element is available in
//dom at the time when JS loaded.
// do your stuff
});
$(''.clickHere'').on(''click'', function(){
// same as first one
// do your stuff
})
$(document).on(''click'', ''.clickHere'', function(){
// this is diffrent type
// of click. The click will be registered on document when JS
// loaded and will delegate to the ''.clickHere '' element. This is
// called event delegation
// do your stuff
});
$(''body'').on(''click'', ''.clickHere'', function(){
// This is same as 3rd
// point. Here we used body instead of document/
// do your stuff
});
$(''.clickHere'').off().on(''click'', function(){ //
// deregister event listener if any and register the event again. This
// prevents the duplicate event resistration on same element.
// do your stuff
})
Como lo mencionan las otras respuestas:
$("#whatever").click(function(){ });
// is just a shortcut for
$("#whatever").on("click", function(){ })
Sin embargo, .on() cuenta que .on() admite otras combinaciones de parámetros que .click() no, lo que le permite manejar la delegación de eventos ( .delegate() y .live() ).
(Y obviamente hay otros métodos abreviados similares para "keyup", "focus", etc.)
La razón por la que publico una respuesta adicional es para mencionar lo que sucede si llama .click() sin parámetros:
$("#whatever").click();
// is a shortcut for
$("#whatever").trigger("click");
Observando que si usa .trigger() directamente, también puede pasar parámetros adicionales o un objeto de evento jQuery, que no puede hacer con .click() .
También quería mencionar que si observa el código fuente de jQuery (en jquery-1.7.1.js) verá que internamente la función .click() (o .keyup() , etc.) realmente llamará .on() o .trigger() . Obviamente, esto significa que puede estar seguro de que realmente tienen el mismo resultado, pero también significa que usar .click() tiene un poco más de sobrecarga, no hay nada de qué preocuparse o siquiera pensar en la mayoría de las circunstancias, pero en teoría puede ser importante En circunstancias extraordinarias.
EDIT: Finalmente, tenga en cuenta que .on() permite enlazar varios eventos a la misma función en una línea, por ejemplo:
$("#whatever").on("click keypress focus", function(){});
Creo que la diferencia está en los patrones de uso.
Preferiría .on sobre .click porque el primero puede usar menos memoria y trabajar para elementos agregados dinámicamente.
Considere el siguiente html:
<html>
<button id="add">Add new</button>
<div id="container">
<button class="alert">alert!</button>
</div>
</html>
donde agregamos nuevos botones vía
$("button#add").click(function() {
var html = "<button class=''alert''>Alert!</button>";
$("button.alert:last").parent().append(html);
});
y quiere "¡Alerta!" para mostrar una alerta. Podemos usar "clic" o "encendido" para eso.
Cuando usamos click
$("button.alert").click(function() {
alert(1);
});
con lo anterior, se crea un controlador separado para cada elemento que coincide con el selector. Eso significa
- muchos elementos coincidentes crearían muchos controladores idénticos y, por lo tanto, aumentarían la huella de memoria
- los elementos agregados dinámicamente no tendrán el controlador, es decir, en el código HTML anterior, el "Alerta" recién agregado. los botones no funcionarán a menos que vuelva a enlazar el controlador.
Cuando usamos .on
$("div#container").on(''click'', ''button.alert'', function() {
alert(1);
});
con lo anterior, un solo controlador para todos los elementos que coinciden con su selector, incluidos los creados dinámicamente.
... otra razón para usar .on
Como comentó Adrien a continuación, otra razón para usar .on son los eventos con espacios de nombre.
Si agrega un controlador con .on("click", handler) , normalmente lo elimina con .off("click", handler) que eliminará ese mismo controlador. Obviamente, esto funciona solo si tiene una referencia a la función, entonces, ¿qué pasa si no lo hace? Utiliza espacios de nombres:
$("#element").on("click.someNamespace", function() { console.log("anonymous!"); });
con desvinculación vía
$("#element").off("click.someNamespace");
En la medida en que se aprende de Internet y algunos amigos, se usa .on () cuando se agregan elementos dinámicamente. Pero cuando lo usé en una página de inicio de sesión simple en la que el evento de clic debería enviar AJAX a node.js y, al regresar, agregar nuevos elementos que comenzaron a llamar a varias llamadas AJAX. Cuando lo cambié para hacer clic () todo salió bien. En realidad no me he enfrentado con este problema antes.
No, no hay.
El punto de on() son sus otras sobrecargas, y la capacidad de manejar eventos que no tienen métodos de acceso directo.
Parecen ser los mismos ... Documentación de la función .click() :
Este método es un acceso directo para .bind (''clic'', manejador)
Documentación de la función api.jquery.com/on :
A partir de jQuery 1.7, el método .on () proporciona toda la funcionalidad necesaria para adjuntar controladores de eventos. Para obtener ayuda sobre la conversión de métodos de eventos jQuery más antiguos, consulte .bind (), .delegate () y .live (). Para eliminar eventos enlazados con .on (), vea .off ().
.click eventos de .click solo funcionan cuando el elemento se procesa y solo se adjuntan a los elementos cargados cuando el DOM está listo.
.on eventos .on se adjuntan dinámicamente a elementos DOM, lo que es útil cuando se desea adjuntar un evento a elementos DOM que se representan en una solicitud ajax o algo más (después de que el DOM esté listo).
.on() es la forma recomendada de realizar todos los enlaces de eventos a partir de jQuery 1.7. .bind() toda la funcionalidad de .bind() y .live() en una función que altera el comportamiento a medida que le pasas diferentes parámetros.
Como has escrito tu ejemplo, no hay diferencia entre los dos. Ambos enlazan un controlador al evento click de #whatever . on() ofrece flexibilidad adicional para permitirle delegar eventos #whatever por los hijos de #whatever a una sola función de controlador, si lo desea.
// Bind to all links inside #whatever, even new ones created later.
$(''#whatever'').on(''click'', ''a'', function() { ... });
$ (''. ACTUALIZAR''). Haga clic en (función () {}); V / S $ (documento) .on (''clic'', ''. ACTUALIZAR'', función () {});
[ingrese la descripción de la imagen aquí] [10]