Webizzima - Le ofrecemos al mundo contenido profesional y de avanzada visión para usuarios que buscan grandes horizontes. Todo a la distancia de un clic y en español.

Manipulación de eventos en Mootools 1.2

---

Si no te sientes listo, asegúrate de chequear el resto de los post previos en nuestra humilde serie de 30 días.

Bienvenido al Día 5 de 30 días de Mootools. En el último tutorial observamos diferentes vías para crear y hacer uso de funciones dentro de Mootools 1.2. El próximo paso irá enfocado, como ya te habrás dado cuenta, a los Eventos. Igual que los selectores, los eventos son una parte esencial en la creación de una Interface de Usuario. Una vez que obtienes un elemento, necesitas decidir qué acción causará dicho efecto. Mejor dejamos los efectos para otro tutorial, vamos mirar los pasos y exploremos alguno eventos comunes.

Un sencillo clic derecho

---

Un simple clic derecho es el evento más común dentro del desarrollo web. Los vínculos reconocen el evento al hacer clic en ellos y posteriormente te llevan a la URL para la que están destinados. Mootools puede reconocer el evento de clic como otro de sus elementos DOM, brindando una enorme flexibidad en diseño y funcionalidad. El primer paso será agregar el evento de clic a un elemento:

//$('id_name') define el elemento
//.addEvent agrega el evento
//('click') define el tipo de evento
$('id_name').addEvent('click', function(){
//pone lo que sea que quieras que ocurra aquí cuando se haga clic
alert('this element now recognizes the click event');
});

Puedes lograr lo mismo separando la función de .addEvent();:

var clickFunction = function(){
//Aquí pones lo que sea que quieras que suceda
    alert('this element now recognizes the click event');
}

window.addEvent('domready', function() {
    $('id_name').addEvent('click', clickFunction);
});

 < ! -- este elemento reconoce ahora el evento de clic -->

Nota: De la misma forma en que el evento click es reconocido por lo vínculos, el evento click de Mootools reconoce un “mouse up”, esto se refiere a cuando pasamos el cursor sobre el vínculo y no cuando haces clic en él.

Los vínculos reconocen además eventos “hover”. Con Mootools puedes agregar un evento hover a otros elementos. Vamos a separarlos en dos eventos: mouseenter y mouseleave, mediante los cuales obtendrás un mayor control manipulando el DOM en las acciones de los usuarios.

Igual que el anterior, lo primero que tenemos que hacer es adjuntar un evento en un elemento:

var mouseEnterFunction = function(){
//Escribe todo lo que quieras que suceda aquí
    alert('este elemento reconoce ahora el evento de mouse enter');
}

window.addEvent('domready', function() {
    $('id_name').addEvent('mouseenter', mouseEnterFunction);
});

Mouseleave trabaja de la misma forma. Este evento se acciona cuando el cursor deja la zona del elemento:

var mouseLeaveFunction = function(){
//Escribe lo que quieras que suceda aquí
    alert('este elemento reconoce ahora el evento leave del mouse');
}

window.addEvent('domready', function() {
   $('id_name').addEvent('mouseleave', mouseLeaveFunction);
});

Eliminar un elemento

---

Hay veces en que necesitarás eliminar un evento de un elemento una vez que éste no sea necesitado más. Remover un elemento es tan fácil como agregar uno, incluso mantiene una estructura similar, veamos:

//trabaja como los ejemplos previos, solo reemplaza
//.addEvent con .removeEvent
$('id_name').removeEvent('mouseleave', mouseLeaveFunction);

Teclas del teclado en Textarea o Input

Mootools también te permite reconocer las teclas que presiones en tu teclado dentro de áreas de texto o en inputs. La sintaxis para esto es la que veremos a continuación:

var keydownEventFunction = function () {
    alert('Esta área de texto ahora puede reconocer eventos de teclas');
};

window.addEvent('domready', function() {
    $('myTextarea').addEvent('keydown', keydownEventFunction);
});

El código de arriba reconocerá cualquier tecla. Para apuntar a una tecla en particular, necesitamos agregar un parámetro y usar una sentencia if:

//Nota el parámetro "event" dentro del paréntesis función
var keyStrokeEvent = function(event){
// esto dice, "si el evento clave que fue presionado
// es igual a "k", has lo siguiente."
    if (event.key == "k") {
	    alert("Este tutorial te llega gracias a la letra k.")
    };
}

window.addEvent('domready', function() {
    $('myTextarea').addEvent('keydown', keyStrokeEvent);
});

Para otros controles, así como “shift” y “control,”, la sintaxis es diferente:

var keyStrokeEvent = function(event){
//esto dice, "si el evento clave que fue presionado
//fue "shift", has lo siguiente."
    if (event.shift) {
	    alert("Presionastes shift.")
    };
}

window.addEvent('domready', function() {
    $('myTextarea').addEvent('keydown', keyStrokeEvent);
});

Ejemplo

---

A continuación te muestro algunos ejemplos extras referente al código antes mencionado:

var keyStrokeEvent = function(event){
// esto dice, "si el evento que se presiona es "k", has lo siguiente."
    if (event.key == 'k') {
       alert("Este Mootorial llega a ti por la letra 'k.'")
    };
}

var mouseLeaveFunction = function(){
//escribe lo que quieras que suceda aquí
    alert('este elemento ahora reconoce el evento leave del mouse');
}

var mouseEnterFunction = function(){
    //escribe lo que quieras que suceda aquí
    alert('este elemento ahora reconoce el evento enter del mouse');
}

var clickFunction = function(){
    //escribe lo que quieras que suceda aquí
    alert('este elemento reconoce ahora el evento clic');
}

window.addEvent('domready', function() {
    $('click').addEvent('click', clickFunction);
    $('enter').addEvent('mouseenter', mouseEnterFunction);
    $('leave').addEvent('mouseleave', mouseLeaveFunction);
    $('keyevent').addEvent('keydown', keyStrokeEvent);
});

Single Left Click


Mouse Enter


Mouse Leave


Type the letter 'k'

Para aprender más…

---

Descarga el zip de la clase de hoy

Más sobre eventos
Mootools te brinda mucho más control sobre los elementos que hemos cubierto aquí. Para aprender más, chequea algunos de los siguientes vínculos:

• Events dentro de la documentación oficial de Mootools
• Element.Events dentro de la documentación oficial de Mootools
• Además, en w3schools hay buen contenido acerca de  eventos Javascript

Próximo tutorial – HTML

---

Día 6 – Manipulando elementos HTML

Vía | ConsiderOpen