Entradas con la etiqueta ‘bind’

Bind en las clases de ES6 de JavaScript

Publicado por Iván Gajate el 21 de septiembre de 2019 en Desarrollo Web, Eventos, JavaScript | No hay comentarios »

Respuesta corta:

// Utilizo bind para vincular la función con el scope this
this.onClick = this.onClick.bind(this);

Respuesta larga:

Al pasar el manejador del evento como un callback, se pierde el ámbito, de tal manera que la función se ejecuta correctamente, pero dentro de ella se cree que this es el propio botón (la etiqueta html <button>). Cuando realmente nosotros esperamos que this sea la propia clase.

Para solucionarlo basta con reasignar en el propio constructor el scope que debe tener esa función.

this.onClick = this.onClick.bind(this);

y nuestra clase funcionará como esperamos:

class Foo{
 
  constructor(){
    this.onClick = this.onClick.bind(this);
    // Listener del boton
    document.getElementById('button').addEventListener('click', this.onClick);
  }
 
  onClick(){
    console.log(this); // Foo {...}
    // Ahora puedo remover el listener sin problema
    document.getElementById('button').removeEventListener('click', this.onClick);
  }
 
}
 
var foo = new Foo();

Una muy buena referencia y explicado con más detalle: https://www.freecodecamp.org/news/this-is-why-we-need-to-bind-event-handlers-in-class-components-in-react-f7ea1a6f93eb/

jQuery – Evento click en iPad

Publicado por Iván Gajate el 27 de abril de 2013 en Desarrollo Web, JavaScript | Los comentarios están cerrados.

Si queremos detectar el click en alguna parte de nuestra ventana en un iPad, no nos funcionará el evento click normal, sino que hay que escuchar el touch.
Para simplificarlo en una línea podemos hacer esto, y en cada dispositivo ya cogerá el que le corresponda:

var clickEvent = ('ontouchstart' in document.documentElement) ? 'touchstart' : 'click';
 
jQuery("body").bind(clickEvent, funcionClick);