Estoy aprendiendo a hacer un sitio web. ¿Qué son los eventos y qué son los comportamientos?
Los eventos y comportamientos son conceptos indispensables en toda programación, incluido por supuesto el lenguaje de las páginas web que realices.
"Comportamiento" es un componente simple y fácil de usar que encapsula funciones o acciones específicas en la página. Cuando se adjunta un "comportamiento" a un elemento en una página WEB, se cambiará el comportamiento original del elemento. Por lo tanto, los programadores de páginas web pueden desarrollar instrucciones DHTML generales y cambiar algunos atributos del objeto original, utilizando "comportamiento" para mejorar la funcionalidad de un objeto y al mismo tiempo simplificar el código HTML de la página. Además, la creación y el uso de "comportamientos" también son muy simples y convenientes, y el conocimiento requerido son solo las hojas de estilo CSS, las instrucciones HTML y el lenguaje de secuencias de comandos JavaScript que ya está acostumbrado a usar. Siempre que sepa algo al respecto y tenga experiencia real en programación, no hay problema en aprender y dominar el uso de "comportamientos". Tomaremos un componente de "comportamiento" que cambia el efecto de fuente como ejemplo para ilustrar cómo escribir y usar un "comportamiento" y experimentar las ventajas y conveniencias que el "comportamiento" brinda a la edición de páginas.
Primero, cree un nuevo archivo de texto llamado font_efftce.htc. Todos los archivos que componen el componente "comportamiento" tienen extensiones .htc. El contenido de este archivo es nuestra descripción de este "comportamiento". Sus pasos de creación y uso son los siguientes:
(1) Primero agregue varias respuestas de eventos a este "comportamiento", el formato de escritura de la declaración es el siguiente:
"EVENT" corresponde a el nombre del evento requerido, aquí hay cuatro nombres de eventos: onmouseover, onmouseout, onmousedown, onmouseup. Por supuesto, puede agregar otros nombres de eventos para satisfacer sus necesidades específicas. "ONEVENT" corresponde al identificador de evento individual, es decir, el nombre de la función llamada cuando se activa el evento. La función Glowit() crea un brillo rojo alrededor de la fuente. La función noglow() elimina el efecto de brillo de la fuente. La función Font2Yellow() cambia el color de la fuente a amarillo. La función Font2blue() cambia el color de la fuente a azul. Las definiciones de los cuatro eventos son similares.
(2) A continuación, agregue dos definiciones de "método" a este "comportamiento", el contenido es el siguiente.
El parámetro "NOMBRE" corresponde a El nombre del "método" dado. move_down y move_right son los nombres de funciones correspondientes a los "métodos" de moverse hacia abajo y hacia la derecha respectivamente. Tenga en cuenta que no coloque corchetes "()" después del nombre del método, es decir, no lo escriba como "move_down()". Esto no está permitido en la sintaxis de la definición de "método".
(3) El siguiente paso es utilizar declaraciones de script javascript para escribir el contenido de la función correspondiente al "identificador de evento" y al "método" en el entorno DHTML familiar para lograr el efecto esperado. Consulte el programa fuente a continuación para obtener contenido específico. El parámetro "elemento" se refiere al objeto al que se adjunta este "comportamiento", porque el "comportamiento" siempre se adjunta a un elemento en la página y funciona a través de este elemento. Las otras declaraciones son todas contenido de programación DHTML, por lo que no diré más sobre ellas.
Si tiene alguna pregunta, puede consultar la documentación de desarrollo MSDN de Microsoft para el navegador IE, que contiene contenido detallado de referencia de programación DHTML, instrucciones para usar atributos y métodos, etc., y contiene una gran cantidad de artículos y programas de ejemplo. Visitar con frecuencia la documentación de MSDN de Microsoft es un buen hábito de aprendizaje, especialmente para principiantes. Puede obtener casi cualquier respuesta que busque. Su URL es: /ie/.
El contenido del documento completo de "comportamiento" "font_effect.htc" es el siguiente:
////////////////// /// /// Comienza el documento "Comportamiento"/////////////////////////////////////Agregar a "Comportamiento" Cuatro eventos del mouse
//Defina dos métodos para el "comportamiento"
///////////////////Fin del documento "Comportamiento" // ///////////////////////////////
(4) Cómo utilizar "comportamiento" en un página
p>No es necesario aprender nuevos conocimientos para utilizar el componente de "comportamiento" en la página. El conocimiento requerido no es más que la configuración de las hojas de estilo CSS y HTML. Consulte las siguientes declaraciones.
Como puede ver, esto es exactamente igual a la configuración de la hoja de estilo con la que ya estamos familiarizados. La declaración anterior define un nombre de estilo: "myfilter", cuyo nuevo contenido para nosotros es: "behavior:url(font_effect.htc);", "behavior" es el nombre del nuevo atributo "behavior", que es cómo el "comportamiento" se configura en la hoja de estilo. El contenido entre paréntesis es el nombre del archivo del documento de "comportamiento". En este ejemplo, indica que el documento de "comportamiento" está en el mismo directorio que el archivo de página. Si el documento de "comportamiento" se coloca en otro directorio, agregue. "comportamiento" delante de este parámetro. Los nombres de ruta correspondientes para garantizar que el documento de comportamiento se pueda ubicar correctamente. El resto del contenido en este "estilo" son solo configuraciones de atributos de estilo normales, que se pueden aumentar o disminuir según sus necesidades, pero en este ejemplo, debido al uso del efecto de filtro "resplandor", al menos un atributo de ancho debe configurarse. A través de la especificación de estilo anterior, tenemos un estilo llamado: "myfilter", que viene con un "comportamiento" con un efecto de cambio de fuente. Si desea utilizar este estilo con "comportamiento" en un componente de página, también es muy simple: simplemente coloque el "nombre de estilo" en el área de configuración de atributos del componente, consulte la siguiente declaración.
El efecto de texto producido por el comportamiento
Después los puntos del mouse Generan brillo
No hay nada nuevo en la declaración anterior class='myfilter' es la configuración de estilo con la que estamos familiarizados. También se define una etiqueta "id" en los atributos de la primera etiqueta "span". Como verá más adelante, esto está configurado para demostrar cómo llamar al "método" dentro del "comportamiento". Después de esta configuración, el contenido del componente "span" puede mostrar el efecto predeterminado en el componente "behavior":
1. Cuando el puntero del mouse se mueve sobre el contenido del texto, se produce un efecto de brillo rojo alrededor del texto y el texto se vuelve blanco.
2． Cuando se presiona el botón del mouse, el color del texto cambia a amarillo.
3． Cuando se levanta el botón del mouse, el color del texto vuelve a ser azul.
4． Cuando el puntero del mouse se mueve fuera del área de texto, el efecto de brillo rojo se elimina y el texto vuelve a su forma original.
Además, configuramos dos "métodos" al definir "comportamiento", "move_down" y "move_right".
Para llamar a estos dos "métodos", se definen dos botones:
Utilice el evento onclick del botón para Al llamar a estos dos "métodos", la etiqueta "id" definida previamente se utilizará como el nombre del objeto del componente. Utilice "myspan.move_down" para llamar al "método" para manipular este objeto. Se puede ver que después de presionar el botón correspondiente, el texto de la primera línea se moverá hacia abajo o hacia la derecha. Aunque solo se utiliza la primera línea de texto para la demostración, de hecho, también puede mover otros objetos siempre que realice los ajustes correspondientes. El contenido completo del documento fuente de la página es el siguiente:
.myfilter{behavior:url(font_effect.htc);position:relative;font-weight:bold;width=180;left:0;}
El texto generado por el comportamiento Efecto
Producir brillo después del puntero del mouse
Al mismo tiempo, el texto se vuelve blanco
El texto se vuelve amarillo después de presionar el mouse
El texto se vuelve azul después de levantar el mouse
El texto regresa a su estado original después de dejar el mouse
p>
A través de la simple introducción anterior, puede ver Se muestra que podemos combinar fácilmente múltiples efectos de cambio de texto en uno " Comportamiento" al mismo tiempo. A través de configuraciones simples de "estilo", podemos asociarlo arbitrariamente con los componentes de la página, lo que refleja las ventajas y poderosas funciones del componente "comportamiento". Un componente de "comportamiento" se puede reutilizar no sólo dentro de una página, sino también para todas las páginas del mismo sitio.
Imagínese, si no usa "comportamiento" para lograr los efectos anteriores, aunque puede llamar a un conjunto de funciones predeterminadas en la página para completar la misma función, cada elemento en la página que usa efectos de texto tendrá cuatro eventos de mouse. adjunto Si se utiliza el mismo efecto en varias páginas, la función llamada también debe configurarse repetidamente en cada página. En comparación, es obvio cuál es mejor y cuál es peor. Por lo tanto, utilizando componentes de "comportamiento", puede crear páginas simples, eficientes, versátiles y fáciles de mantener. Los ejemplos de este artículo son sólo para ilustrar el proceso de escritura y uso de los componentes de "comportamiento", para que los lectores puedan tener una comprensión general de la programación de "comportamiento" y, en base a esto, puedan crear los componentes de "comportamiento" que necesitan. o cítelos directamente para satisfacer sus necesidades personales. Componentes "conductuales" ya preparados, porque el concepto de "compartir componentes" es también la intención original de los desarrolladores "conductuales". Finalmente, espero que este artículo pueda servir para "inspirar a otros" y permitir a los lectores ingresar al maravilloso mundo de la programación web DHTML.
(¡¡¡El contenido anterior es solo como referencia!!!)