Algunos ejemplos simples de clic en javascript. Armando tus propios eventos. Eventos y nodos DOM. Secuencia de ejecución del script

dentro de unos pocos años recientes Ha habido una sorprendente expansión de los lenguajes de aplicaciones web del lado del cliente, especialmente HTML5 y CSS3.

Ahora puedes realizar muchas operaciones que antes eran impensables sin Aplicaciones JavaScript e imágenes, por ejemplo, esquinas redondeadas, plantillas responsivas, rejillas modulares, colores transparentes y mucho más.

Pero siempre hubo falta de capacidad para manejar el evento. hacer clic usando CSS. Algunos expertos creen que esta opción no debería existir, ya que la interacción del usuario es el ámbito de acción de JavaScript. Sus argumentos son razonables, pero usar JavaScript incluso para clics simples agotador.

Actualmente no hay oficiales herramientas CSS para manejar el evento hacer clic. Sin embargo, hay formas que puedes utilizar para "detectar" un clic usando solo CSS sin JavaScript.

Nota

Los métodos descritos no están destinados a " vida real"Los materiales de la lección deben considerarse como una base para la experimentación. Además, algunos métodos no son compatibles con los navegadores. El propósito de la lección es tocar los límites de las capacidades de CSS.

Usando una casilla de verificación

Seguramente ya te has encontrado con este método. Este es el método más popular para manejar un evento. hacer clic usando CSS.

El método se basa en el uso de una casilla de verificación. Éste ítem tiene una esencia binaria y sólo puede estar en uno de dos estados. Es por eso este método es una forma completamente confiable de manejar eventos hacer clic en CSS.

Para cambiar (color: negro;) entrada: marcado ~ .para cambiar (color: rojo;)

El método se basa en el uso de una pseudoclase. :comprobado y el selector ~ . Tenga en cuenta que también funcionará con el selector +. La esencia del método es que "si la casilla de verificación está marcada, los siguientes elementos con la clase .to-be-changed serán rojos".

La casilla de verificación no parece muy atractiva. Pero puedes hacer apariencia más interesante ocultando la casilla de verificación y adjuntándole una etiqueta. Algo como eso:

Entonces, ocultamos la casilla de verificación y usamos una etiqueta para reaccionar al evento. hacer clic:

Entrada (posición: absoluta; arriba: -9999px; izquierda: -9999px;) etiqueta (pantalla: bloque; fondo: #08C; relleno: 5px; borde: 1px solid rgba(0,0,0,.1); borde- radio: 2px; color: blanco; peso de fuente: negrita) entrada: marcado ~ .para cambiar (color: rojo;)

Tenemos un botón, al hacer clic en él se cambia el color del texto del párrafo. Al presionar el botón nuevamente, el color vuelve a cambiar.

(Tenga en cuenta que hay varios métodos para ocultar la casilla de verificación. La más obvia es usar display:none .)

pros

• Binario, sólo hay dos estados: marcado o no marcado
• Al presionarlo nuevamente se restaura el estado ( éste ítem puede ser un inconveniente)
• Le permite organizar el procesamiento de eventos relacionados. hacer clic(si la primera casilla de verificación está marcada y la segunda casilla de verificación está marcada, realice la siguiente acción)

Desventajas

• Los elementos deben tener un ancestro común.
• Adicional requerido marcado HTML(entrada, etiqueta, etc.)
• Requerido acciones adicionales para trabajar en navegadores móviles

Método con:objetivo

Hay otra forma de usar pseudoclase. :objetivo. Esta pseudoclase es similar a la pseudoclase. :flotar que sólo cumple ciertas condiciones.

Evento especial para pseudoclase. :objetivo Depende del "identificador de fragmento". En pocas palabras, esta pseudoclase se refiere a un hashtag que se encuentra en final de la URL y se activa cuando el hashtag y el ID coinciden.

A cambiar (color: negro;) .a-cambiar:objetivo (color: rojo;)

pros

• Código CSS sencillo
• Ideal para resaltar secciones

Desventajas

• Basura en el historial del navegador.
• La página se está desplazando
• Requiere una etiqueta de enlace o una operación de URL para incluir un hashtag
• Sólo un elemento puede verse afectado (ya que el ID es único)
• No hay forma de volver al estado original sin utilizar otro hashtag, enlace o manipulación de URL.

Método con:enfoque

Continuamos nuestra revisión usando otra pseudoclase: :enfocar. La idea es casi la misma que en el caso anterior, excepto que no se supone cambios de URL. Aquí nos basamos en la entrada para centrarnos en un elemento específico.

Cuando estás en una página, puedes usar la tecla de tabulación para pasar de un elemento a otro. Este método es muy conveniente cuando se trabaja con formularios para navegar entre elementos sin usar el mouse. El método también se utiliza para que personas con discapacidad visual naveguen por la página.

Es importante que algunos elementos puedan recibir foco de entrada, por ejemplo enlaces, párrafos, campos de entrada y muchos otros. Solo necesita establecerles el atributo tabindex con un valor numérico para ellos.

Span:focus ~ .to-be-changed (color: rojo;)

Cuando se hace clic en un elemento span o se alterna con la tecla de tabulación, recibe el foco de entrada y corresponde a la pseudoclase: foco. El selector de vecinos hace el resto del trabajo. Si por alguna razón no necesita utilizar el atributo tabindex, simplemente puede configurar un enlace con la dirección #.

pros

• Código CSS y HTML muy simple
• Excelente navegación

Desventajas

• Requiere un elemento con foco o un atributo índice de tabulación
• La coincidencia ocurre solo cuando hay un foco de entrada (al hacer clic en otro lugar de la página se mezcla el algoritmo)

Método con transiciones

Este método es probablemente la forma más sucia de manejar un evento. hacer clic en CSS.

La idea es "almacenamiento". Estilo CSS V transición CSS. Usamos un retraso pseudoinfinito para evitar regresar a el estado inicial. Suena complicado, pero en realidad es muy sencillo de implementar.

Para cambiar (transición: todos los 0 9999999;) span: activo ~ .para cambiar (transición: todos los 0; color: rojo;)

El retraso es de aproximadamente 116 días. No el infinito, sino algo parecido a él para nuestras condiciones. Por tanto, los cambios se guardan y no se vuelve al estado original.

pros

• Sencillo y elegante
• El Estado se salva incluso si la transición no ha terminado.

Desventajas

• Soporte deficiente en navegadores (no en IE9 y mini Opera)
• Solo funciona con valores que se pueden usar con transiciones.
• No hay forma de volver al estado original.
• No existe una verdadera infinidad de esperas (si tu proyecto implica esperar más de 116 días)

En los últimos años, hemos visto el rápido desarrollo de los lenguajes de desarrollo. interfaces externas, y especialmente HTML con nuevas especificaciones en HTML5, así como Versiones CSS 3 con muchas características nuevas.

Ahora tenemos la oportunidad de hacer muchas cosas interesantes que antes no se podían hacer sin ayuda javascript e imágenes, incluyendo esquinas redondeadas, gradaciones, plantillas adaptables, cuadrículas, transparencia de color y mucho, mucho más.

Mucha gente realmente extrañaba la capacidad de administrar eventos de clic en CSS. De hecho, mucha gente piensa que no necesitamos esta opción ya que la interacción es más una funcionalidad de JavaScript. En principio, aquí todo está claro; probablemente no sea muy conveniente utilizar JavaScript para los eventos de clic más simples.

En cualquier caso, a día de hoy CSS no nos proporciona ninguna métodos oficiales gestionar eventos de clic en CSS. Pero hay algunos trucos muy interesantes que podemos usar para "detectar" clics usando solo código CSS, sin usando javascript, y eso es exactamente de lo que hablaremos hoy.

Descargo de responsabilidad

Este artículo tiene como objetivo presentarle la capacidad de controlar eventos de clic mediante CSS. Esto no es del todo adecuado para su uso en proyectos serios. Tenga en cuenta que este artículo completo no es más que un experimento y no una guía para administrar eventos de clic en su sitio web o aplicación.

Además, algunos de los métodos presentados no son particularmente compatibles con los navegadores, lo que significa que en este artículo solo queremos demostrar cómo se puede ampliar el alcance de CSS.

Hackear casilla de verificación

¡Cosa maravillosa! Estamos seguros de que todos habéis oído hablar antes del truco de la casilla de verificación. Esta es probablemente la forma más común de manejar eventos de clic en CSS. Se basa en... una casilla de verificación.

La ventaja de una casilla de verificación es que es binaria. O está resaltado o no. Y no hay forma de resaltar algo “a medias” o algo así. Esta es la razón por la que el truco de la casilla de verificación es bastante manera confiable desencadenar eventos de clic en CSS. Pongamos un ejemplo.

Cómo funciona

Código HTML

código CSS

Ser cambiado (
de color negro;
}

color rojo;
}
Como puede ver, se basa en la pseudoclase:checked y el selector principal relacionado ~. Tenga en cuenta que también funcionará con el selector de hermanos adyacente +. En general, dice así: "si se selecciona una casilla de verificación, los siguientes elementos con la clase .to-be-changed serán rojos".

Por lo tanto, la casilla de verificación no es realmente muy atractiva, pero puedes decorarla fácilmente ocultando la casilla de verificación y colocándole una etiqueta. Algo como lo siguiente:

¡Haz click en mi!

¡Voy a ser rojo! Va a ser legendario... Espéralo...

Entonces, ocultamos la casilla de verificación y usamos un acceso directo para activar un evento de clic.

Aporte (
posición: absoluta;
arriba: -9999px;
izquierda: -9999px;
}

etiqueta(
bloqueo de pantalla;
fondo: #08C;
relleno: 5px;
borde: 1px rgba sólido (0,0,0,.1);
radio del borde: 2px;
color blanco;
peso de fuente: negrita;
}

entrada: marcado ~ .a-cambiar (
color rojo;
}
De esta manera, deberías terminar con algo como un botón que activa el proceso de cambiar el color del elemento del párrafo. ¿No es genial? Al hacer clic nuevamente en el botón, el color volverá a ser negro.

(tenga en cuenta que hay diferentes posibilidades oculta una casilla de verificación y la más popular es mostrar: ninguna).

Ventajas y desventajas

Ventajas:

* Binario (resaltado o no resaltado)
*Hacer clic nuevamente le permite regresar posición inicial
* Le permite aplicar una serie de eventos de clic (si la primera casilla de verificación está seleccionada y la segunda casilla de verificación está seleccionada, puede hacer lo siguiente).

Defectos:

*Los elementos deben compartir lo mismo. elemento padre(elementos relacionados)
*Se requiere HTML adicional (elemento de entrada, etiqueta, etc.)
* Se necesitan dos trucos adicionales para que el método funcione en navegadores móviles (deberá leer más el artículo para esto)

Método: objetivo

Existe otra técnica conocida como "simular" un evento de clic en CSS utilizando la pseudoclase:objetivo. Esta pseudoclase es muy similar a :hover.

El evento especial de la pseudoclase:objetivo depende de lo que llamamos "identificador de fragmento". En pocas palabras, esta pseudoclase se refiere a un hashtag, que a veces puede verse al final de una URL. Se produce una coincidencia cuando el hashtag y el ID del artículo son iguales.

Cómo funciona

Código HTML

¡Haz click en mi!

¡Voy a ser rojo! Va a ser legendario... Espéralo...

código CSS

Ser cambiado (
de color negro;
}

Para ser cambiado: objetivo (
color rojo;
}
Cuando hace clic en el enlace (href="#id"), la URL cambia y se le dirige al ancla #id de la página. En este punto, el elemento designado por la identificación dada se puede especificar usando la pseudoclase:objetivo.

Ventajas y desventajas

Ventajas:

* Muy CSS sencillo
* Ideal para resaltar secciones

Defectos:

* Confusión en el historial del navegador
* Hay un salto de página (al cambiar al ancla)
*Hashtag requiere una etiqueta de anclaje o un truco de URL para ejecutarse
* Sólo funciona con un elemento (ya que los ID son siempre únicos)
* No hay forma de volver a la posición original sin utilizar otro hashtag, enlace o pirateo de URL.

La compatibilidad con el navegador no es excelente, pero no es del todo mala. Todo navegadores modernos apoyan este enfoque excepto (IE 6-8). A partir de IE9, el soporte funciona de manera estable.

Método: centrarse

Veamos otra forma de usar una pseudoclase, esta vez será: focus. El concepto aquí es prácticamente el mismo, excepto que no requiere cambiar la URL. El método tiene como objetivo centrar la atención del usuario en un elemento específico.

Cuando estás en una página web, puedes hacer clic en las pestañas para navegar varios elementos. Esto es muy conveniente al completar formularios: puede pasar de un campo a otro sin usar el mouse. También ayuda a las personas con discapacidad visual a navegar por el sitio.

Es importante tener en cuenta que sólo puedes centrarte en algunos elementos, incluidos enlaces, campos de entrada, pero no en otros (párrafos, divisiones y muchos otros). De hecho, también puedes centrarte en ellos, pero necesitarás agregar un atributo tabindex con un valor numérico.

Cómo funciona

Código HTML

¡Haz click en mi!

¡Voy a ser rojo! Va a ser legendario... Espéralo...

código CSS

Span:foco ~ .a-cambiar (
color rojo;
}
Entonces, cuando hace clic en un elemento span o navega usando el botón de pestaña, el navegador se enfoca en el elemento que coincide con la pseudoclase:focus. El selector de hermanos adyacente hará el resto. Bastante simple, ¿no? Si no desea lidiar con tabindex, puede usar un enlace con #href. Todo funcionará.

Ventajas y desventajas

Ventajas:

* Código CSS y HTML muy simple
* Ideal para navegación o similar

Defectos:

* Se requiere un elemento enfocable o un atributo tabindex
* El pseudoelemento solo coincide cuando el elemento está enfocado (lo que significa que se estropea si haces clic en otro lugar).

Truco de transición

Esta es probablemente una de las formas más increíbles de manejar eventos de clic en CSS. En serio, esto es una locura. Este método fue inventado Joel Besada, y siempre ha sido uno de nuestros trucos de CSS favoritos.

La clave es colocar el estilo CSS en la transición CSS. Sí, lo leíste bien, transición CSS. De hecho, la idea es bastante simple. Se basa en aplicar un retraso pseudoinfinito al cambio, que impide volver al valor original. Probablemente todo suene confuso, pero en realidad es sencillo. Por favor revise el código.

Cómo funciona

Código HTML

¡Haz click en mi!

¡Voy a ser rojo! Va a ser legendario... Espéralo...

código CSS

Ser cambiado (
transición: todos los 0 9999999;
}

span:activo ~ .a-cambiar (
transición: todos 0;
color rojo;
}
La esencia del primer anuncio es retrasar cualquier cambio en aproximadamente 116 días, lo que nos permite garantizar que los cambios se mantengan tan pronto como se apliquen. No son infinitos, pero lo parece, ¿no?

Pero no queremos que los cambios se apliquen 116 días después del clic, ¡queremos que todo suceda inmediatamente! Entonces aquí necesitamos sobrescribir el retraso del clic (pseudoclase: activo) para poder aplicar los cambios. Luego, cuando se hace el clic, antiguo parámetro Se devolverá la transición, devolviendo el parámetro de retardo a 9999999s, lo que evitará que vuelva a la posición original.

Ventajas y desventajas

Ventajas:

* Idea increíblemente inteligente
* Ahorra valor deseado al soltar el botón, incluso si la transición aún no se ha completado (ver más abajo)

Como afirmó Joel Besada:

“Lo interesante aquí es que puedes finalizar la transición a mitad de camino y el parámetro conservará el mismo valor que tenía en ese momento particular de la transición. Por ejemplo, supongamos que tenemos transición lineal opacidad de 1 a 0 en 2 segundos, pero lo continuamos solo por 1 segundo. Es decir, el parámetro de opacidad debe detenerse en 0,5, ya que el retraso no permite que el parámetro retroceda. Si ahora reiniciamos la transición en opacidad, continuará desde 0,5 en lugar de reproducirse desde el principio".

Defectos:

* No es muy buena compatibilidad con navegadores (no es compatible con IE9 y Opera Mini)
*Solo funciona con valores que permitan la transición
* No hay forma de volver al valor original
*De hecho, la transición no es infinita si se espera hasta que hayan pasado 116 días.

En conclusión

Entonces, hoy en día, de alguna manera ya podemos determinar los clics cuando ayuda CSS. Es decir, tenemos la oportunidad aunque sea más un hack. Algunos métodos son mejores que otros para situaciones específicas, pero en general probablemente no valga la pena utilizarlos en un proyecto real.

Tab Atkins Jr. hace pocos meses. Se escribió una oración completa sobre las posiciones de los botones de opción en CSS. Puedes echar un vistazo a su trabajo:

Estados de alternancia: ninguno | ¿pegajoso? | infinito (inicial: ninguno)
grupo de alternancia: ninguno | (inicial: ninguno)
alternar-compartir: ninguno | # (inicial: ninguno)
alternar-inicial: (inicial: 1)
…Dónde:

* alternar estados representa Función básica, que le permite habilitar/deshabilitar la funcionalidad de conmutación. Ninguno significa posición de discapacitado, 2 o más son responsables de diferentes posiciones.

* toggle-group implementa la funcionalidad de un botón de opción. Si hace clic en un elemento de grupo de alternancia con establecer parámetro diferente de ninguno, todos los elementos que comparten el mismo grupo de alternancia se establecerán automáticamente en la primera posición (apagado).

* alternar-compartir implementa la funcionalidad de acceso directo. Cuando haces clic en un elemento con alternar-compartir, actúa como si hubieras hecho clic en todos los elementos a los que apunta.

* toggle-inicial establece la posición inicial del interruptor.

Sin embargo, admitió que su idea no es ideal y puede entrañar problemas y paradojas. No queremos entrar en detalles en el artículo de hoy ya que ese no es el alcance de este artículo, pero le recomendamos que se familiarice con el tema.

Así que volvemos a JavaScript nuevamente. es probablemente La mejor manera, si quieres fiabilidad y cohesión. Sin embargo, si quieres divertirte desarrollando algo con “código CSS puro”, este artículo definitivamente te será útil.

También me gustaría señalar que Chris Coyier de CSS-Tricks hace dos años sobre la gestión doble clic usando CSS. Puede que la información ya no sea relevante, pero seguirá siendo muy interesante conocerte.

De todos modos, ¡gracias por leer el artículo! Recuerde y siéntase libre de compartir los resultados de sus propios experimentos.

¡Atención! No tienes permiso para ver texto oculto.

Saludos a todos los que quieran entender el funcionamiento de onclick(). El artículo de hoy le ayudará a comprender el principio de funcionamiento de una vez por todas. de este manejador eventos y ordenar ejemplo específico onclick JavaScript, o más bien ejemplos.

Le mostraré varias formas de trabajar con esta herramienta, le explicaré sus ventajas y desventajas y también describiré trabajo jQuery con eventos. ¡Ahora pasemos al análisis del material!

Asignar controladores de eventos

Primero, veamos la parte teórica de la pregunta. Casi todo el mundo procesa scripts en sus páginas. Y normalmente se trata de eventos diferentes. Para que se activen todos estos eventos programados, se debe instalar un controlador para ellos.

De acuerdo con las reglas de escritura, todos los controladores incluyen "on+nombre del evento" en su nombre, lo cual se observa en onclick(). Dependiendo del evento seleccionado, el procesamiento se producirá debido a diferentes acciones. En nuestro caso, al usar onclick(), solo se ejecutarán aquellos eventos que fueron causados ​​por el clic izquierdo del mouse.

Diferentes formas de asignar un controlador de eventos

Hoy en día, existen varias opciones para introducir un controlador para ciertos eventos o eventos en el código.

Usando eventos simples

Empecemos con opción sencilla, que consiste en incrustar onclick() en el marcado del propio documento html. Se parece a esto:

Como puede ver, al hacer clic en el botón con el botón izquierdo del mouse, aparece el mensaje "¡Clic-clic!". Me gustaría llamar su atención sobre un pequeño pero significativo detalle. Alerta interna que solo puedes usar comillas simples (‘’).

También en en este caso puede ser usado palabra clave este. Se refiere al elemento actual y proporciona todos los métodos disponibles.

Clickeame

Esta línea de código crea un botón con el texto "Haz clic en mí". Después de presionar, verá un mensaje en la pantalla: “¡Presione!” Reemplazará el nombre del botón.

Este método es sin duda muy sencillo. Sin embargo, sólo es adecuado para tareas similares, es decir. mostrar mensajes o ejecutar comandos simples.

Si es necesario utilizar estructuras cíclicas, utilizar etiquetas, etc., entonces este método no encaja. Reducirá la legibilidad del código y también lo hará voluminoso y descuidado.

En este caso, conviene recurrir a funciones.

Trabajar con funciones

Las funciones le permiten separar código requerido en un bloque separado, que luego se puede llamar a través de controlador de eventos V.

Como ejemplo, adjunto una aplicación para mostrar al usuario el número resultante en varias potencias, comenzando desde el 1º y terminando en el 5º. Para hacer esto, creé una función countPow(), a la que se le pueden pasar parámetros. En mi aplicación, el usuario debe ingresar un número como variable de función.

Así, a través del manejador asociado a la función antes mencionada, se realizaron cálculos y se mostraron en pantalla.

resultado var = 1; función countPow(n) ( for(var i=1; i