Teoria sobre eventos y callbacks

Clase 10 de 61 • Curso de JavaScript y jQuery 2015

Contenido del curso

Bienvenidos

1
¿Dónde aprender JavaScript actualizado?
00:16 min

Introducción a JQuery

Eventos, callbacks y AJAX

Optimización en JQuery

Complementos del curso

Proyecto: Marvel Card Game

Introducción al Front-end: Componentes, Stylus y Jade

ECMAScript 6, AJAX y Promises

LocalStorage, Latencia y Plantillas con ECMAScript6

Introducción a Single Page Apps

Optimiza tu Single Page App con Browserify Y Gulp

Livereload, Express y Node.js

Tomar examen

Comentarios

Paquirri Seperak Seperak Otero

student•

no me gusta tantto tiempo perdido en hacer presentaciones
se debe empezar con el curso de una manera más didáctica y rápida

Esteban Figueroa

student•

me siento perdidisimo :/

Eduardo Moises Lopez Balagardo

student•

que muestre el tatoo

Francisco Palma

student•

Interiorizando toda la info;) muy buen bloque

Adriana Villalobos

student•

Me perdí cuando en el minuto 12:40 dice que likes (de la línea 8) es un array, que está definido en la línea 14. No veo que el array de la línea 14 sea definido como "likes" sino como fn... Hay algo que no estoy entendiendo.

Sergio Blanco Moreno

student•

Eso pasa porque cada parámetro, dentro de cada función, tiene (y debe ser así) su propio atributo, en ese caso el atributo de fn es el array que observaste, el que a su vez es llamado como parámetro de "function obtenerLikes", que a su vez es llamado por la función que tiene como atributo "likes".

Luis Felipe Silgado Cortázar

student•

Cabe mencionar que en jquery “fn == prototype”

Carlos Javier Meilan

student•

Excelente clase. Para los que somos un poco novatos, debemos tomarlo con paciencia, realizar anotaciones y volver a ver los videos.

Octavio Francisco García Robles

student•

Para que el evento "change" sea disparado en el "input text" primero se debió cambiar el texto y después hay que perder el foco del input, es decir dar clic fuera del input.

Sergio Blanco Moreno

student•

Para hacer un "binding" de eventos a ejecutar independiente de si hay nuevos elementos antes o después de la ejecución de una función:

$('#list').on( "click", "a", function(event) {  
 // codigo  
});

Esto sirve para hacer una función "viva" y que reconozca cuando hay nuevos elementos en una selección. la diferencia con una función ordinaria de jquery es que aquí se le pasa un tercer parámetro (a) y ya no son 2.

Sergio Blanco Moreno

student•

Recordar que el parámetro(event) es el que hace la magia, por lo que al incluír tu código no olvides llamar a ese event para adjuntarle un evento. Ej:

event.preventDefault);

Kevin Caicedo Riascos

student•

callbacks
son funciones anonimas que se utilizan mucho cuando
el parametro que tenemos que enviar es una funcion

eventos
$('Elemento').on('evento', function(){
$(this)
.closest('')
.addClass('');
});

Manuel Galindez

student•

Dado el seguimiento que he hecho a los anteriores cursos de jquery, el mismo nos permite en ves de usar event.preventDefault(); con tan solo colocar return false por lo menos en el caso del submit no enviará los datos.

Jairo Enrique Rudas Paternina

student•

var elemento = $(header);
var titulo = $(elemento, 'h1'); // jquery acepta un contexto dentro del cual se buscará el otro elemento pasado como segundo parametro.
Es recomendable guardar elementos del DOM en variables. es muy util porque evitamos de esta manera accesos al DOM una y otra vez, ademas la busqueda se hace mas rapida pues no accesamos al DOM a cada busqueda, reduciendo el tiempo de respuesta de la query.

Margaret Fellerman

student•

No me ha quedado muy claro lo de trigger, cuando hay que utilizarlo??, cuando usar el evento .click y cuando .tigger("click"), cual es la diferencia?

Daniel Hernández

student•

es lo mismo, pero es mala practica

Paquirri Seperak Seperak Otero

student•

No me interesa si tiene un tatuaje en el …
lo qu eme interesa es que el curso sea rápido y didáctico

Jose Meira

student•

// Eventos sobre el DOM

Callback
// function que recibe otra function por parámetro

function myFunc(f) {
  f();
}

myFunc(function(){
  // ...
});

function suma(nuno, ndos) {
  return nuno + ndos;
}

// ...

function calculadora(cuenta, nuno , ndos) {
  return cuenta(nuno, ndos);
}

calculadora(suma, nuno, ndos);

// sin definir cuenta por cuenta
function calculadora2(nuno, ndos, cuenta) {
  return cuenta(nuno, ndos);
}

// Function recibe dos parámetros porque en calculadora2, le decimos a cuenta que recibe dos argumentos por parámetro
calculadora2(1, 2, function(nuno, ndos) {
  return nuno + ndos;
}

// Asincronía: no conocemos cuando se va a ejecuta la acción

var postID = 'xxx';

// Definición de la función: ejemplo mejor explicado

// La definición es más clara si se escribe antes que a la instancia de la misma:
function obtenerLikes(unIdCualquiera, callback) {

  // setTimeout no deja de recibir otro callback... sólo que está en el core de JS
  setTimeout(function(){
    // Callback es la función que pasamos por parámetro a la hora de instanciar a obtenerLikes
   // ['x', 'y', 'z' ] es el array que suponemos que recibe por parámetro el callback al instanciar la función (likes)...
    callback( ['x', 'y', 'z' ] );
  }, 5000);
}

obtenerLikes(postId, function(likes) {
 // No sabemos lo que es likes, sabemos que es un argumento, pero suponemos que es un array, es lo que esperamos
  alert('Se encontraron' + likes.length + ' likes');
}

Jose Meira

student•

// Eventos

var button = document.getElementById('myButton');
button.addEventListener('click', function(event) {
  // no sabemos cuando ocurre el evento click, cuando lo clicka el usuario, por lo que es asíncrono y se ejecuta su callback cuando ocurra el click
  alert('Soy un handler, un callback que se termina ejecutando cuando se pasa el evento click');
});

// Esta podría ser una definición a nivel interno de addEventListener: 
/* 
 function addEventListener(action, callback) {
 if(action) {
   // event puede ser nulo, es decir, no tiene porque pasarse
   callback(event = null, someparams...);
 } elseif(...) {
  ...
 }
}
*/

// Con jQuery:

$('button').click(function(){
  // el jQuery Object tiene un método accesible llamado click que recibe un callback...
  alert('Soy un click en un button');
});

$('.product button.like).click( function (ev) {
  // this apunta al ámbito (contexto) de este objeto jQuery, en este caso, cada uno de los botones
  $(this)
    .closest('.product') // busca en la jerarquía, hacia arriba, el selector más cercano que matchee con el string que recibe el método closest
    .addClass('liked');
});

// Escucha en múltiples eventos:
$('.button').on("click change"), function() {
  console.log("se disparo el evento click o change");
}

// Múltiples eventos con diferentes callbacks:
$('p').on({
  "click": function() { console.log("me hicieron click"); },
  "mouseover": function() { console.log( "me pasaron el mouse por arriba"); }
});

//.on() realiza bindeo de elementos; actualizar el DOM y el virual DOM con los cambios.

// Métodos de eventos:
// Brower events:
.resize()
.scroll()

// Document loading:
.ready();

// Event handler attachment
.off()
.on()
.one()
.trigger()
.unbind()

// Event Object; variable por parámetro cuando se ocurre el evento:
event.target
event.currentTarget
event.stopPropagation
event.preventDefault()

// Form event
.blur()
.change()
.select()
.submit()
.focus();

// Keyboard events:
.focusin()
.focusout()
.keydown()
.keypress()
.keyup()

// Mouse events
.click()
.focusout()
.hover()
.mouseup()
// ...

Jose Meira

student•

// Bindeo de elementos
var foo = function() { console.log(‘i am foo’); };
var bar = function() { console.log(‘i am bar’); };

// Añadir el bindeo para los elementos p
$(‘p’).on(‘click’, foo).on(‘click’, bar);
// Eliminar el bindeo para p, sólo para su handler bar
$('p).off(‘click’, bar);

// namespaces
// Después del evento click, se puede añadir un namespaces para no afectar a otros handler específicos
$(‘p’).on(‘click.myNamespace’, function() { /* … */} );
$(‘p’).off(‘click.myNamespace’);
$(‘p’).off(’.myNamespace’); // saca todos los eventos de este namespace

// Forms

$(‘form’).on(‘submit’, function(event) {

event.preventDefault(); // evitar el compartimiendo común de los form a hacer un request sobre un action

var action = $(this).attr(‘action’);
$.ajax(action, { /* … */ });

})

// Propagación de eventos
// Las selecciones no están vivas, no escuchan un nuevo cambio a través de un append, por ejemplo

// Propagación o burbujeo de eventos
// a -> li -> ul #list ->div #container -> document …
$(’#list’).on(‘click’, ‘a’, function(event) {
// Se bindea cualquier a que esté dentro de list y se propaga hacia arriba
$(this).text();
}

// Trigger; disparo de eventos sobre un objeto
$(’#myButton’).trigger(‘click’);

Santiago Mendoza

student•

¿Hay alguna forma de forzar que las peticiones ajax no se trabajen de forma asincrona? Es decir, en pocas palabras, que obligue a detener la ejecución del javascript hasta que recibe los datos.

Manuel Rivera

student•

Una DUDA sobre el burbujeo. Por que funciona cuando se llama de esa manera, ¿No era que los jquery object no son vivos y no se actualizan de su selección inicial? Siguiendo eso, ese #list solo tiene los elementos antes de crearse el último.

Nahuel Alejandro Cabrera

student•

En que momento arreglo el float de la imagen ?
porque en el anterior video termino sobre el texto

Cristian Nuñez

student•

Lo que hace el trigger es que nos da la opcion de disparar el evento manualmente.

Cristian Nuñez

student•

Lo que hace el trigger es que nos da la opcion de disparar el evento manualmente.

marcelo solis

student•

siento que solo nombra o habla de JS o jquery, pero no enseñando como utilizarlo, da por entendido todo.
compre los cursos pero igual veo otros en youtube para entender 😦

// Eventos sobre el DOM

Callback
// function que recibe otra function por parámetro

function myFunc(f) {
  f();
}

myFunc(function(){
  // ...
});

function suma(nuno, ndos) {
  return nuno + ndos;
}

// ...

function calculadora(cuenta, nuno , ndos) {
  return cuenta(nuno, ndos);
}

calculadora(suma, nuno, ndos);

// sin definir cuenta por cuenta
function calculadora2(nuno, ndos, cuenta) {
  return cuenta(nuno, ndos);
}

// Function recibe dos parámetros porque en calculadora2, le decimos a cuenta que recibe dos argumentos por parámetro
calculadora2(1, 2, function(nuno, ndos) {
  return nuno + ndos;
}

// Asincronía: no conocemos cuando se va a ejecuta la acción

var postID = 'xxx';

// Definición de la función: ejemplo mejor explicado

// La definición es más clara si se escribe antes que a la instancia de la misma:
function obtenerLikes(unIdCualquiera, callback) {

  // setTimeout no deja de recibir otro callback... sólo que está en el core de JS
  setTimeout(function(){
    // Callback es la función que pasamos por parámetro a la hora de instanciar a obtenerLikes
   // ['x', 'y', 'z' ] es el array que suponemos que recibe por parámetro el callback al instanciar la función (likes)...
    callback( ['x', 'y', 'z' ] );
  }, 5000);
}

obtenerLikes(postId, function(likes) {
 // No sabemos lo que es likes, sabemos que es un argumento, pero suponemos que es un array, es lo que esperamos
  alert('Se encontraron' + likes.length + ' likes');
}

// Eventos

var button = document.getElementById('myButton');
button.addEventListener('click', function(event) {
  // no sabemos cuando ocurre el evento click, cuando lo clicka el usuario, por lo que es asíncrono y se ejecuta su callback cuando ocurra el click
  alert('Soy un handler, un callback que se termina ejecutando cuando se pasa el evento click');
});

// Esta podría ser una definición a nivel interno de addEventListener: 
/* 
 function addEventListener(action, callback) {
 if(action) {
   // event puede ser nulo, es decir, no tiene porque pasarse
   callback(event = null, someparams...);
 } elseif(...) {
  ...
 }
}
*/

// Con jQuery:

$('button').click(function(){
  // el jQuery Object tiene un método accesible llamado click que recibe un callback...
  alert('Soy un click en un button');
});

$('.product button.like).click( function (ev) {
  // this apunta al ámbito (contexto) de este objeto jQuery, en este caso, cada uno de los botones
  $(this)
    .closest('.product') // busca en la jerarquía, hacia arriba, el selector más cercano que matchee con el string que recibe el método closest
    .addClass('liked');
});

// Escucha en múltiples eventos:
$('.button').on("click change"), function() {
  console.log("se disparo el evento click o change");
}

// Múltiples eventos con diferentes callbacks:
$('p').on({
  "click": function() { console.log("me hicieron click"); },
  "mouseover": function() { console.log( "me pasaron el mouse por arriba"); }
});

//.on() realiza bindeo de elementos; actualizar el DOM y el virual DOM con los cambios.

// Métodos de eventos:
// Brower events:
.resize()
.scroll()

// Document loading:
.ready();

// Event handler attachment
.off()
.on()
.one()
.trigger()
.unbind()

// Event Object; variable por parámetro cuando se ocurre el evento:
event.target
event.currentTarget
event.stopPropagation
event.preventDefault()

// Form event
.blur()
.change()
.select()
.submit()
.focus();

// Keyboard events:
.focusin()
.focusout()
.keydown()
.keypress()
.keyup()

// Mouse events
.click()
.focusout()
.hover()
.mouseup()
// ...

// Bindeo de elementos
var foo = function() { console.log(‘i am foo’); };
var bar = function() { console.log(‘i am bar’); };

// Añadir el bindeo para los elementos p
$(‘p’).on(‘click’, foo).on(‘click’, bar);
// Eliminar el bindeo para p, sólo para su handler bar
$('p).off(‘click’, bar);

// namespaces
// Después del evento click, se puede añadir un namespaces para no afectar a otros handler específicos
$(‘p’).on(‘click.myNamespace’, function() { /* … */} );
$(‘p’).off(‘click.myNamespace’);
$(‘p’).off(’.myNamespace’); // saca todos los eventos de este namespace

// Forms

$(‘form’).on(‘submit’, function(event) {

event.preventDefault(); // evitar el compartimiendo común de los form a hacer un request sobre un action

var action = $(this).attr(‘action’);
$.ajax(action, { /* … */ });

})

// Propagación de eventos
// Las selecciones no están vivas, no escuchan un nuevo cambio a través de un append, por ejemplo

// Propagación o burbujeo de eventos
// a -> li -> ul #list ->div #container -> document …
$(’#list’).on(‘click’, ‘a’, function(event) {
// Se bindea cualquier a que esté dentro de list y se propaga hacia arriba
$(this).text();
}

// Trigger; disparo de eventos sobre un objeto
$(’#myButton’).trigger(‘click’);

Teoria sobre eventos y callbacks

Bienvenidos

¿Dónde aprender JavaScript actualizado?

Introducción a JQuery

Preguntas antes de la clase

El desarrollo web moderno

Configurando y agregando jQuery

Uso de selectores en jQuery

Teoria de Objetos en jQuery

Objetos de jQuery

Preguntas y respuestas en clase

Eventos, callbacks y AJAX

Preguntas antes de la clase