Las páginas web interactiva / Manejo de Eventos en JavaScript

En este artículo, vamos a aprender acerca de las páginas web interactivo / manejo en JavaScript evento.

lenguajes de programación como C, C ++, etc están todos basados ​​en el enfoque de codificación síncrona es decir, la ejecución se lleva a cabo de arriba a abajo de una manera lineal.

Pero JavaScript sigue un enfoque diferente, que se basa en la codificación asíncrona. En lugar de recorrer de arriba a abajo se ejecuta a través de la gestión de eventos .

Los eventos se producen y se les apilados en el procesador de navegador si un controlador está asociado con él, se llama y ejecuta .

JS tiene muchos objetos incorporados con un montón de eventos. En este artículo, vamos a utilizar una de ellas, es decir ventana de objeto y su evento de cambio de tamaño.

Ejemplo: archivo HTML con JS internos dentro de la escritura de etiquetas

<html lang="en">
<head>
<meta charset="utf-8">
<title>Don't resize me, I'm ticklish!</title>
<script>
function resize() {
var element = document.getElementById("display");
element.innerHTML = element.innerHTML + " that tickles!";
}
</script>
</head>
<body>
<p id="display">
Whatever you do, don't resize this window! I'm warning you!
</p>
<script>
window.onresize = resize;
</script>
</body>
</html>

código HTML es como de costumbre. En la segunda etiqueta script, he utilizado un objeto incorporado de JS ventana es decir, que representa el class del navegador en el que se está ejecutando el código de seguridad. Esta ventana tiene muchos parámetros, métodos, eventos.

Aquí su onresize evento se está utilizando, cada vez que se cambie el tamaño de la ventana del navegador se generará este evento y se agregan a la pila del procesador del navegador.

Después de que en la línea número 18 en sí, este evento se ha asignado un controlador con el nombre de cambio de tamaño .

Recuerde:

Si ningún controlador se asigna a un evento, todavía se agrega a la pila del procesador, pero no pasa nada en respuesta a la misma.

también en cuenta que cambiar el tamaño no es más que una función definida en la primera etiqueta de script.

Precaución:

usted no necesitar soportes en línea número 18 después de que el cambio de tamaño función, ya que no lo están llamando, en cambio, sólo estamos de asignarlo a un evento como un controlador de eventos.

Ahora, en la línea número 7, en la función de cambio de tamaño He visitada elemento párrafo del archivo HTML a través Identificación del elemento de párrafo. a través del DOM (Document Object MODELO) creado por el navegador.

También, uno debe ser consciente de que el documento (en número de línea 8) es otro objeto incorporado en JS que representa el DOM generado por el navegador o en otras palabras, podemos decir que Javascript utiliza objeto de documento para obtener acceso a DOM creado por el navegador. Al igual que cualquier otro objeto incorporado, que también tiene muchos métodos en el mismo, siendo uno de ellos GetElementByID .

GetElementByID se ve muy comúnmente en el código fuente de las páginas web interactivas.

Se necesita un identificador como un argumento y devuelve un objeto que representa la etiqueta HTML con ese ID.

Ahora bien, este objeto DOM viene con muchos métodos útiles dando un montón de poderes a los desarrolladores.

Su innerHtml da acceso al texto dentro de esa etiqueta en particular.

Por lo tanto, Anexión de que cosquillea cada vez que el cambio de tamaño función se llama o para ser más particular, el evento se produce onresize.

Espero que esto era una gran penetración en el manejo de eventos en JS y la explicación más completa del código antes mencionado.

manejo de eventos es un gran activo de JavaScript que puede ser utilizado para crear páginas web muy sensibles y dinámicas.

Voy a estar cubriendo muchos otros tipos de eventos disponibles en js en mis próximos artículos así que estad atentos y seguir practicando.


Deja un comentario

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