Fundamentos de jQuery

5.3. El objeto del evento

Como se menciona en la introducción, la función controladora de eventos recibe un objeto del evento, el cual contiene varios métodos y propiedades. El objeto es comúnmente utilizado para prevenir la acción predeterminada del evento a través del método preventDefault. Sin embargo, también contiene varias propiedades y métodos útiles:

  • pageX, pageY La posición del puntero del ratón en el momento que el evento ocurrió, relativo a las zonas superiores e izquierda de la página.
  • type El tipo de evento (por ejemplo click).
  • which El botón o tecla presionada.
  • data Alguna información pasada cuando el evento es ejecutado.
  • target El elemento DOM que inicializó el evento.
  • preventDefault() Cancela la acción predeterminada del evento (por ejemplo: seguir un enlace).
  • stopPropagation() Detiene la propagación del evento sobre otros elementos.

Por otro lado, la función controladora también tiene acceso al elemento DOM que inicializó el evento a través de la palabra clave this. Para convertir a dicho elemento DOM en un objeto jQuery (y poder utilizar los métodos de la biblioteca) es necesario escribir $(this), como se muestra a continuación:

var $this = $(this);

Cancelar que al hacer click en un enlace, éste se siga

$('a').click(function(e) {
    var $this = $(this);
    if ($this.attr('href').match('evil')) {
        e.preventDefault();
        $this.addClass('evil');
    }
});