Eventos
Existen distintas funciones para asignar una función manejada por un evento, la sintaxis es:
$("selector").evento(function() {..some code... } )
Eventos de ratón
Evento click, al hacer clic sobre un elemento:
$(".button#pulsame").click(function () {
alert("Has hecho clic");
});
Evento dblclick, al hacer doble clic sobre un elemento:
$("p:first").dblclick(function () {
alert("Has hecho doble clic");
});
Evento hover, cuando al pasar el ratón por encima de un elemento. Podemos utilizar jQuery(this) para referirnos a este elemento:
$("p").hover(function () {
$(this).css("border", "1px solid red");
});
Evento mouseenter, cuando el cursor entra en un elemento, la diferencia con el anterior es que sólo se ejecuta una vez, en hover se ejecuta mientras esté dentro y lo mueva.
$("p:first").mouseenter(function () {
$(this).css("border", "1px solid red");
});
evento mouseout, cuando el cursor sale de un elemento
$("p:first").mouseout(function () {
$(this).css("border", "0");
});
evento load, cuando se termina de cargar el elemento:
$(window).load(function () {
alert("Página cargada");
});
http://www.w3schools.com/jquery/jquery_ref_events.asp
http://www.jquerysdk.com/category/touch-events
Multiples eventos
$('p').on({
'click': function() {
alert('clic');
},
'mouseover': function() {
console.log('sobre');
}
});
jQuery user interface: http://jqueryui.com/
El objeto Evento
El objeto evento contiene varios métodos y propiedades. Se emoplea 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, es la posición del puntero del ratón respecto a la posición izquierda y superior del documento.
event.target devuelve el objeto DOM pulsado.
event.type devuelve que tecla pulsada.
preventDefault() previene el fallo del evento
El evento del DOM que inicia el evento puede emplearse this.
http://www.w3schools.com/jquery/jquery_ref_events.asp
Eventos Touch
tap, se dispara después de un evento rápido de toque
taphold, se dispara después de un evento de toque mantenido cerca de un segundo
swipe, se dispara con un arrastre horizontal entre 30 pixeles en sentido horizontal y 20 pixeles en sentido vertical, ocurridos en en un segundo.
swipeleft, se dispara con un arrastre hacia la izquierda.
swiperight, se dispara con un arrastre hacia la derecha.
$(element).bind('touchmove', function(){ });
Librerías para eventos Touch
Jquery Mobile: https://jquerymobile.com/
W3School: jQuery Mobile Events: http://www.w3schools.com/jquerymobile/jquerymobile_events_intro.asp
Interact: Librería multitouch
http://interactjs.io/
Sintaxis:
interact(target).on(pointerEventType, listenerFunction);
interact('.tap-target')
.on('tap', function (event) {
})
.on('doubletap', function (event) {
})
.on('hold', function (event) {
});
ZEPTO: Es una librería mínima de jQuery
http://zeptojs.com/
touch.js: ZEPTO tiene un módulo para mejorar los eventos Touch llamado touch.js, tiene eventos como tap, long tap, swipe, que funciona con iOS, Android y windows Phone.
https://github.com/madrobby/zepto/blob/master/src/touch.js#files
swipe -- movimiento swipe, puede definirse para una dirección, como: swipeLeft, swipeRight, swipeUp, swipeDown.
tap -- Es la acción de pulsar.
doubleTap -- doble taps.
longTap -- Cuando pulsas mas de 750ms.
$(function(){
$('#circulo').on('swipeRight', function(){retrocede()});
$('#circulo').on('swipeUp', function(){retrocede()});
$('#circulo').on('swipeDown', function(){avanza()});
$('#circulo').on('swipeLeft', function(){avanza()});
$('#boton').on('tap', function(){para()});
});
Otros Eventos
Existen distintas funciones para asignar una función manejada por un evento, la sintaxis es:
$("selector").evento(function() {..acciones... } )
Evento load, cuando se termina de cargar el elemento:
$(window).load(function () {
alert("Página cargada");
});
Evento event.currentTarget, esta propiedad está ligada a this.
$( "p" ).click(function( event ) {
alert( event.currentTarget === this ); // true
});
Evento event.pageX y event.pageY posición del muse respecto al origen del documento.
$( document ).on( "mousemove", function( event ) {
$( "p" ).text( "pageX: " + event.pageX + ", pageY: " + event.pageY );
});