webClass Detección Eventos 1

Como detectar un Click sobre una línea de texto

Existen diferentes procedimientos para detectar el evento "Click" sobre una línea de texto, empezaremos con el nivel básico. El primer paso es identificar la linea de texto que deseamos utilizar como activador; para lo cual debemos utilizar el atributo id="identificador" la palabra identificador corresponde al nombre asignado para esa linea de texto y se escribe dentro de la etiqueta de inicio por medio de la cual se este mostrando el texto; por ejemplo:

<div id="clave" > hacer click sobre este texto </div>

Esta línea debe estar dentro del área (Body) de la página Web y cada vez que hacemos un click sobre ella podemos detectar dicho evento por medio de la siguiente estructura:

Esta estructura a su vez activa la función identificada como accion es decir todas las órdenes escritas dentro de esta función se ejecutarán después de que "getElementById" detecte el evento .onclick solamente en la etiqueta que tenga el identificador id igual a "clave", cada vez que hacemos click sobre esa linea la estructura document.getElementById.onclick activa la funcion que esta despues del igual; que en este caso la hemos llamamos accion.
es importante saber que "getElementById", los demás metodos y funciones de javascript solo son válidos dentro del área de script

Esta estructura contiene instrucciones agrupadas dentro de los signos { } , separadas por ( ; ) "punto y coma" y serán ejecutadas cuando hagamos el llamado de la funcion que en este caso hemos denominado accion.

Aclaratoria sobre la escritura de HTML y JavaScript (importante)

El área de script debe ser único, no pueden existir dos o más áreas de script por lo que el navegador daría como resultado solamente la presentación del texto sin funcionalidad; la página dejaría de ser interactiva y al hacer click sobre los botones, textos o links, no pasaría nada (solo texto).
cuando explicamos una estructura y la colocamos entre las etiquetas de <script></script> es para resaltar que dicha estructura debe ser escrita dentro del area de script, pero no significa que deben escribirse dichas etiquetas en cada estructura cuando estemos creando nuestra página Web manualmente.

Mayúsculas y Minúsculas

La escritura de una página web es muy estricta por lo que es importante tener en cuenta las Mayúsculas y Minusculas en los identificadores (id) en las etiquetas, en los atributos, en los eventos, funciones y métodos, en fin durante toda la creación de la página web. por ejemplo:

getElementById tiene 3 mayúsculas E, B, I

Si escribimos getelementById , getElementbyId o getelementbyid el navegador no lo reconoce y por lo tanto la detección del evento Click no se activaría.

Las funciones

Las funciones son bloques de instrucciones que se activan al hacer el llamado a su nombre por medio de estructuras como: document.getElementById.onclick = nombreDeLaFuncion . Esta estructura activa la funcion accion, la cual contiene sus instrucciones agrupadas dentro de los signos { } y separadas por "punto y coma". Para definir una función debemos escribir la palabra funcion en inglés (function) seguida del nombre que queremos colocarle a dicha funcion acompañada de dos parentesis () de la siguiente manera:

<script>
function accion() {
Aqui colocamos todas las instrucciones separadas por "punto y coma" que deseamos realizar cuando se active la funcion... }
</script>

Ejercicio de detección sencillo

El siguiente ejercicio muestra la estructura sencilla de detección para casos de hasta 3 y 4 líneas de texto, más adelante veremos su uso sobre otros elementos como imágenes, Botones, tablas y links.

<html>

<head>

<title>Detección de evento Click</title>

</head>

<body>

<div id="cabecera"> Hacer Click sobre este texto</div>

<br/>

<div id="pantalla"> screen </div>

</body>

document.getElementById("cabecera").onclick = SS;

function SS() {

alert("Vamos a cambiar el texto de la 2da linea");

document.getElementById("pantalla").innerHTML="Incluimos este texto";}

</script>

</html>

Otras técnicas de detección de eventos

Cuando realizamos páginas grandes con funcionalidades amplias es posible mejorar las estructuras de detección utilizando addEventListener el cual permite adicionar la lectura de un evento a un elemento específico, con mayor variedad de eventos como por ejemplo:

al mover el mouse sobre un elemento al hacer click sobre un elemento al presionar una tecla al cargar una página web al salir de una página web al arrastrar un elemento al seleccionar un elemento y muchos más...
Ejemplo:

<html>

<head>

<title>Ejemplo de Eventos</title>

function Fv1() {document.getElementById("EventoX").innerHTML = "KeyPress";}

function Fv2() {document.getElementById("EventoX").innerHTML = "KeyDown";}

function Fv3() {document.getElementById("EventoX").innerHTML = "KeyUp";}

function Fv4() {document.getElementById("EventoX").innerHTML = "Click";}

function Fv5() {document.getElementById("EventoX").innerHTML = "MouseDown";}

function Fv6() {document.getElementById("EventoX").innerHTML = "MouseUp";}

// Eventos de teclado

document.addEventListener("keypress", Fv1, false);

document.addEventListener("keydown", Fv2, false);

document.addEventListener("keyup", Fv3, false);

// Eventos de ratón

document.addEventListener("click", Fv4, false);

document.addEventListener("mousedown", Fv5, false);

document.addEventListener("mouseup", Fv6, false);

</script>

</head>

<body>

<p>Press any key or click the mouse to get the event type.</p>

<p>Tipo de Evento: <span id="EventoX" style="color:red">-</span></p>

</body>

</html>

Buscar este blog

TeraZoom