trisquel

Aprende JavaScript con ejemplos (VIII).Eventos en JavaScript

Los eventos son cualquier cosa que le pueda ocurrir a un elemento HTML. Como puedes suponer JavaScript puede darse cuenta de ese evento y reaccionar al mismo ejecutando el código que nosotros hayamos programado.

Algunos eventos que pueden ocurrir en una página web serían:

  • Pulsar un botón.
  • Modificar un campo de texto.
  • Pulsar una tecla.
  • La página ha terminado de cargarse.
  • Hacer clic sobre un elemento HTML.
  • Etc.

El formato de programar un evento en JavaScript sería el siguiente:

<Elemento_HTML evento=’código_JavaScript’>

También es posible cambiar las comillas simples por comillas dobles.

Veamos un ejemplo de evento en JavaScript:

El código que hemos utilizado en el botón anterior es el siguiente:

<button onclick=’this.innerHTML=Date()’>Pulsa para saber la hora</button>

Ejercicio 8.1

Modifica el ejemplo anterior para que en vez de modificarse el contenido del botón, modifique un texto cualquiera de tu página web.
Ejercicio 8.2

Investiga los siguientes dos eventos y pon un ejemplo de uso para cada uno de ellos.

  • onmouseover
  • onmouseout
  • onblur
Otra forma de añadir los eventos a los elementos/objetos HTML del DOM (listeners)

<!DOCTYPE html>
<html>
<body>

<p id=”myFPtext”>texto a modificar</p>
<button id=”myFPboton”>Dale fuerte!</button>

<script>

function dale(){
var x = document.getElementById(“myFPtext”);
x.innerHTML = “hola”;
}

document.getElementById(“myFPboton”).addEventListener(“click”, dale, false);

</script>

</body>
</html>

Como se puede ver en el código anterior se utiliza el método addEventListener para añadir un listener al objeto enlazado a una función JavaScript.
Esta forma de programar los listener es más límpia y clara.
Los parámetros son los siguientes:

  • primero. El evento (sin el “on”)
  • segundo. La función a ejecutar
    tercero.
  • useCapture. Si el usuario quiere iniciar la captura para que todos los eventos de ese tipo se lancen al mismo listener. Generalmente se utiliza false en este parámetro.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>