You are here
Eventos en JQuery Sin categoría 

Eventos en JQuery

Eventos en JQuery

Introducción

jQuery provee métodos para asociar controladores de eventos (en inglés event handlers) a selectores. Cuando un evento ocurre, la función provista es ejecutada. Dentro de la función, la palabra clave this hace referencia al elemento en que el evento ocurre.

Para más detalles sobre los eventos en jQuery, puede consultar http://api.jquery.com/category/events/.

La función del controlador de eventos puede recibir un objeto. Este objeto puede ser utilizado para determinar la naturaleza del evento o, por ejemplo, prevenir el comportamiento predeterminado de éste. Para más detalles sobre el objeto del evento, visite http://api.jquery.com/category/events/event-object/.

Vincular Eventos a Elementos

jQuery ofrece métodos para la mayoría de los eventos — entre ellos $.fn.click, $.fn.focus, $.fn.blur, $.fn.change, etc. Estos últimos son formas reducidas del método $.fn.on de jQuery ($.fn.bind en versiones anteriores a jQuery 1.7). El método $.fn.on es útil para vincular (en inglés binding) la misma función de controlador a múltiples eventos, para cuando se desea proveer información al controlador de evento, cuando se está trabajando con eventos personalizados o cuando se desea pasar un objeto a múltiples eventos y controladores.

Vincular un evento utilizando un método reducido

$(‘p’).click(function() {

console.log(‘click’);

});

Vincular un evento utilizando el método $.fn.on

$(‘p’).on(‘click’, function() {

console.log(‘click’);

});

Vincular un evento utilizando el método $.fn.on con información asociada

$(‘input’).on(

‘click blur’,  // es posible vincular múltiples eventos al elemento

{ foo : ‘bar’ }, // se debe pasar la información asociada como argumento

 

function(eventObject) {

console.log(eventObject.type, eventObject.data);

// registra el tipo de evento y la información asociada { foo : ‘bar’ }

}

);

Vincular Eventos para Ejecutar una vez

A veces puede necesitar que un controlador particular se ejecute solo una vez — y después de eso, necesite que ninguno más se ejecute, o que se ejecute otro diferente. Para este propósito jQuery provee el método $.fn.one.

Cambiar controladores utilizando el método $.fn.one

$(‘p’).one(‘click’, function() {

console.log(‘Se clickeó al elemento por primera vez’);

$(this).click(function() { console.log(‘Se ha clickeado nuevamente’); });

});

El método $.fn.one es útil para situaciones en que necesita ejecutar cierto código la primera vez que ocurre un evento en un elemento, pero no en los eventos sucesivos.

Desvincular Eventos

Para desvincular (en ingles unbind) un controlador de evento, puede utilizar el método $.fn.off pasándole el tipo de evento a desconectar. Si se pasó como adjunto al evento una función nombrada, es posible aislar la desconexión de dicha función pasándola como segundo argumento.

Desvincular todos los controladores del evento click en una selección

$(‘p’).off(‘click’);

Desvincular un controlador particular del evento click

var foo = function() { console.log(‘foo’); };

var bar = function() { console.log(‘bar’); };

 

$(‘p’).on(‘click’, foo).on(‘click’, bar);

$(‘p’).off(‘click’, bar); // foo esta atado aún al evento click


Si quieres seguir aprendiendo con nosotros, puedes ingresar a nuestros

Cursos y Diplomados de Tecnología Web visita www.uneweb.edu.ve  para más información

Related posts