Método on

El método on permite agregar un controlador de eventos a un elemento. Para eliminar el controlador puede utilizar el método off, para que el evento se active solo una vez, y luego el controlador se elimine a sí mismo - utilice el método one. Los elementos a los que vinculamos el controlador deben existir en el momento de llamar a on.

Sintaxis

Así añadimos un controlador de eventos a un elemento, como primer parámetro en forma de cadena se pasa uno o varios eventos separados por espacios, como segundo parámetro pasamos un selector de filtrado adicional de descendientes dentro del elemento, como tercero - datos adicionales, que se pasan al controlador en la propiedad event.data cuando se activa el evento. El segundo y tercer parámetros son opcionales. Como cuarto pasamos la función controladora, a la que se le pasa el objeto evento y parámetros adicionales opcionales. Si en lugar de la función controladora se pasa false, entonces la función simplemente devolverá false:

$(selector).on(eventos, [selector], [datos], función-controladora(objeto evento, [parámetros adicionales]));

Se puede utilizar el método on de otra manera, entonces en el primer parámetro se pasa un objeto JavaScript, donde las claves - son el tipo de evento, y los valores - son las funciones controladoras, invocadas para los eventos:

$(selector).on({'tipo de evento': handler}, [selector], [datos]);

Si no pasamos un selector adicional, entonces el evento se activa en el elemento al que adjuntamos el controlador, en caso contrario - en el elemento descendiente que coincide con ese selector (eventos delegados). El mismo controlador de evento puede ser vinculado a un elemento varias veces.

Ejemplo

Mostremos en alert, el texto del párrafo con #test al hacer clic en él, los clics en otros párrafos no conducirán a nada:

<p>text1</p>
<p id="test">text2</p>
<p>text3</p>

$('#test').on('click', function() {
	alert( $(this).text() );
});

Ejemplo

Al hacer clic en el párrafo mostremos los datos que pasamos al método on. Utilicemos la función controladora testFunc, que creamos:

<p>click</p>

function testFunc(event) {
	alert(event.data.text);
}

$('p').on('click', {text: 'aaa'}, testFunc);

Véase también

método off,
que permite eliminar un controlador de eventos de un elemento
método one,
que permite que un evento se active una vez, y luego eliminar automáticamente el controlador
objeto event,
que contiene información sobre el evento
método trigger,
que permite ejecutar todos los controladores de eventos, vinculados al elemento para eventos de un tipo dado
Método JavaScript bind,
que permite vincular un contexto a una función