Este artículo le brinda conocimientos relevantes sobre JavaScript. Principalmente presenta un resumen simple de eventos. Los eventos son algunos momentos interactivos específicos que ocurren en documentos o ventanas del navegador. Espero que sean útiles para todos. .
[Recomendaciones relacionadas: videotutorial de javascript, interfaz web]
Los eventos son momentos específicos de interacción que ocurren dentro de un documento o ventana del navegador. La interacción entre JavaScript y HTML se logra mediante eventos. Para las aplicaciones web, existen los siguientes eventos representativos: eventos de clic, eventos de entrada y salida del mouse, eventos de pulsación del teclado/ventanas emergentes, etc. Los eventos son momentos específicos de interacción que ocurren en un documento o ventana del navegador. Puede utilizar oyentes (o controladores de eventos) para suscribirse a eventos de modo que se ejecute el código apropiado cuando ocurra el evento.
A continuación se ofrece una breve introducción a los siguientes eventos de uso común: eventos de carga de documentos, objetos de eventos, difusión de eventos, delegación de eventos, enlace de eventos, propagación de eventos y eventos de teclado.
Evento de carga de documentos (onload): el evento de carga se activa después de cargar toda la página. Usar como se muestra:
Desde una perspectiva de rendimiento, ¡es mejor escribirlo al final de la página! El código js está escrito en la parte inferior de la página para garantizar que la página se haya cargado cuando se ejecuta el código. window.onload solo puede aparecer una vez en la página y el código posterior sobrescribirá el código anterior.
Objeto de evento: después de que ocurre el evento, se generará un objeto de evento y se pasará a la función de escucha como parámetro. El rendimiento específico es que pasamos un parámetro de evento en la función de devolución de llamada, y JS pasa automáticamente el valor de este parámetro. Este objeto de evento contendrá toda la información relevante sobre este evento, incluido qué evento (ratón/teclado) es, el desencadenante del evento, el objetivo del evento, etc.
Cuando se activa un evento en el objeto DOM, se genera un objeto de evento Evento, que contiene toda la información relacionada con el evento. Incluye los elementos que provocaron el evento, el tipo de evento y otra información relacionada con el evento específico. Los navegadores estándar DOM pasarán un objeto de evento al controlador de eventos. Cualquiera que sea el controlador de eventos, se pasa un objeto de evento. El objeto Evento contiene propiedades y métodos relacionados con el evento específico que lo creó. Los tipos de eventos desencadenados son diferentes y las propiedades y métodos disponibles también son diferentes. Aquí hay una breve introducción a los eventos de mouse/teclado como se muestra en la figura:
El objeto de evento en IE es diferente del acceso al objeto de evento en DOM. Hay varias formas diferentes de acceder al objeto de evento en IE, dependiendo de cómo especifique el controlador de eventos. En IE, el objeto de evento existe como un atributo del objeto de ventana. Puede usar window.event para obtener el objeto de evento. Cuando use adjuntarEvent(), también se pasará un objeto de evento en el controlador, o se puede usar en. la forma anterior. Aquí hay un caso para ilustrar: cuando el mouse está sobre el cuadro, la etiqueta p a continuación muestra las coordenadas actuales del mouse.
Representación:
Diagrama de código:
Burbuja de eventos (burbuja): la llamada burbujeación se refiere a la propagación ascendente de eventos. Cuando se activa un evento en un elemento descendiente, también se activará el mismo evento en su elemento ancestro. Las burbujas son útiles en la mayoría de situaciones de desarrollo. Si no desea que se produzcan burbujas, puede cancelarlas a través del objeto de evento event.cancelBubble=true.
Representación:
Diagrama de código:
Delegación de eventos: se refiere a vincular eventos a los elementos ancestros comunes de los elementos, de modo que cuando se activa un evento en un elemento descendiente, se propagará al elemento ancestro y el evento se procesará a través de la función de respuesta del ancestro. elemento. La delegación de eventos utiliza burbujeo. La delegación puede reducir la cantidad de enlaces de eventos y mejorar el rendimiento del programa. El atributo objetivo del objeto del evento: devuelve el elemento que desencadenó este evento (el nodo objetivo del evento)
Caso:
Representación:
Diagrama de código:
Vinculación de eventos: podemos vincular controladores de eventos a un elemento de dos formas comunes: vinculación especificando atributos de evento de elementos HTML; vinculación especificando atributos de objetos DOM. Hay otra forma especial llamada configurar el detector de eventos, objeto de elemento: addEventListener(). Los dos primeros métodos pueden vincular controladores de eventos, pero ambos tienen la desventaja de que solo pueden vincular un programa y no pueden vincular varios programas para un evento. addEventListener(), a través de este método también puedes vincular una función de respuesta a un elemento. Utilice addEventListener() para vincular varias funciones de respuesta al mismo evento de un elemento al mismo tiempo. De esta manera, cuando se activa el evento, la función de respuesta se ejecutará en el orden de vinculación de la función. Este método no es compatible con los navegadores IE8 e inferiores y, en su lugar, debe utilizar adjuntarEvent. adjuntarEvent(), en IE8 puedes usar adjuntarEvent() para vincular eventos. Este método también puede vincular varias funciones de procesamiento a un evento al mismo tiempo. La diferencia es que se vincula primero y se ejecuta primero. El orden de ejecución es opuesto al de addEventListener ().
Propagación de eventos: la propagación de eventos se puede dividir en tres etapas: etapa de captura: en la etapa de captura, los eventos se capturan desde el elemento ancestro más externo al elemento objetivo, pero de forma predeterminada el evento no se activará en este momento; se captura el evento El elemento objetivo comienza a desencadenar eventos en el elemento objetivo después de que se completa la captura; el evento se transmite desde el elemento objetivo a sus elementos ancestros, lo que a su vez desencadena eventos en los elementos ancestros.
Eventos de teclado: onkeydown: evento de teclado presionado. Si sigue presionando una tecla sin soltarla, el evento siempre se activará. Cuando el evento onkeydown se activa continuamente, el intervalo entre la primera y la segunda vez será un poco más largo y las demás serán muy rápidas. Esto es para evitar un mal uso. onkeyup: evento cuando se suelta el teclado. Los eventos de teclado generalmente están vinculados a algunos objetos que pueden obtener foco o documentos...
Lo anterior es un breve resumen de los detalles de los eventos de JavaScript. Para obtener más información, preste atención a otros artículos relacionados en la red de código fuente.