OK, volveremos.
Hasta ahora hemos hablado sobre cómo podemos seleccionar los elementos con J Querrey y también cómo
podemos manipularlos.
Ahora vamos a presentar la última gran pieza faltante, que es eventos en la consulta J.
Así que piensa en vanilla J. S. Cuando agregamos oyentes de eventos usamos un método llamado oyente de eventos.
Bueno, resulta que Jay tiene una gran cantidad de métodos que tienen que ver con los eventos.
Así que tengo la sección de eventos abierta en Jake, donde él puede llegar haciendo clic en eventos aquí.
Así que mientras me desplazo aquí puedes ver cuántos.
Los métodos de eventos de Coria son chikor, viene con un montón de ellos.
Entonces, lo que voy a hacer es resaltar los tres más importantes, los tres que puede usar.
El noventa y nueve por ciento de las veces esos tres métodos son rápidos presionar y continuar.
Y dije que estos tres podrías usar el 99 por ciento del tiempo.
En realidad es más como este aquí mismo.
Puedes usar el 99 por ciento del tiempo.
Así que le mostraré clic y
presione la tecla primero, pero mi objetivo principal es mostrarle cuán asombroso es el método.
Entonces empecemos.
Así que el método rápido
de Jay equerries es cómo podemos agregar rápida y fácilmente un oyente de clic a un elemento individual o una colección de elementos.
Para que pueda ver, tengo dos ejemplos en este caso.
Estoy seleccionando algo y luego agrego un oyente clic con un clic.
Entonces seleccionamos algo con la idea de enviar que ejecutamos.
Haga clic en él y luego pasamos una función de devolución de
llamada y esta función de devolución de llamada se ejecutará cuando se haga clic en algo con la idea de enviar.
Y como es una identificación, solo hay una en la página.
Entonces, cuando se hace clic en ese elemento, se ejecuta este código.
Si echas un vistazo aquí puedes ver que
estoy seleccionando todos los botones en la página, que podría ser uno.
Podrían ser 10 botones y agregaré un oyente de clic a todos ellos.
Entonces, cada vez que un botón es rápido, alertará a alguien que haga clic en el botón.
Entonces permítanme demostrar eso.
Ahora tengo una página HTL simple con Jay queery incluida como CDN.
Y voy a agregar los eventos de consulta de Jay y agregaré algunos botones.
Entonces, el primero que digo no me corrige.
Y luego el siguiente dirá en serio, ok, yo.
Y el último dirá que esta es tu última advertencia.
Así que guardaremos y abriremos esto en el navegador y siempre comprobaremos que J cargó.
DE ACUERDO.
Se ve bien.
Comenzaremos de manera fácil agregando un oyente rápido a este H-1 y solo hay uno en la página.
Entonces solo debemos seleccionar primero con el signo de dólar.
Entonces uno que nos da el derecho H-1 que solo uno y luego corremos.
No haga clic en eso y luego tendremos que pasar una
función de devolución de llamada que se ejecutará siempre que hagamos clic en ese H-1.
Así que detrás de
las escenas el clic está usando un oyente de eventos y está agregando un oyente de clic en este H-1 y
podemos hacer una función anónima que es mucho más común de ver pero algo más intimidante para los estudiantes más nuevos o
podríamos escribir una función nombrada por separado y luego pasar el nombre de esa función aquí.
Pero como dije, las funciones anónimas son mucho más comunes.
Entonces, lo que queremos hacer es alertar a cada
uno de manera correcta y presionaré enter aquí y ahora si hago clic en este H-1 verás que obtengo H-1 y que eso no sucede en ningún otro elemento.
Sucede aquí, recuerde porque mi H-1 recorre toda la pantalla para que CSSA emita
si quiero cambiar el tamaño de uno, pero solo ocurre cuando hago clic en el elemento uno.
Ahora lo que quiero hacer es mostrar cómo podemos agregar un oyente rápido a una colección de elementos.
Así que voy a seleccionar todos los botones aquí.
como nuestra devolución de llamada.
Así que un botón de signo de dólar y luego agregamos nuestro clic así y podemos volver a pasar una función anónima
Y esto se
ejecutará cada vez que se haga clic en un botón y haremos un clic en el botón de alerta y presionaremos enter.
Y ahora, si hago clic en alguno de esos botones, vamos al botón clic en el botón, haga clic en el botón salir.
Por lo tanto, piense en vainilla javascript para agregar un detector de eventos a una colección de botones.
Tendría que seleccionarlos todos con query selector all u obtener elementos por nombre de etiqueta y
luego tendría que usar un ciclo for para recorrerlos a todos y luego tendría que
agregar individualmente un detector de eventos que para estar claro está sucediendo. entre bastidores.
Pero todo lo que tengo que hacer es escribir esta línea y será un bucle para mí que agregará
los oyentes del evento individualmente, lo que hace que su vida sea realmente fácil en lugar de simplemente hacer clic en un botón de aprendizaje.
¿Qué sucede si deseo cambiar el estilo? Cambie el color de fondo del botón que se hizo clic.
Por lo tanto, necesitaría agregar un oyente clic nuevamente.
Estoy solo en la flecha hacia arriba y no en alerta.
Lo que haremos es cambiar el
color de fondo para que sea algo que sea el fondo de C-s y lo cambiaremos para que sea de color rosa.
Entonces, el problema es a qué llamamos Dotsie CSSA una y otra vez con vainilla javascript.
Nosotros usaríamos esto.
La palabra clave "esto" y "aquello" se
refiere al elemento al que se hizo clic, sin embargo, la consulta de Nueva Jersey que no funcionará, lo que tenemos que hacer es utilizar la versión J Querrey de esto.
Esta es siempre una idea un poco confusa.
Creo que ayuda recordar que lo que Shakeri hace
es que toma simplemente vainilla Sí y lo envuelve en la consulta de Jay y es grande J. A. GRAMO. abrazo y le da algunas propiedades y métodos especiales.
Entonces, si queremos usar
dot CSSA, que es un método de consulta J, debemos asegurarnos de que lo estamos ejecutando en un objeto de consulta J.
Así que simplemente viejo, este es el javascript regular de vanilla.
Entonces, tenemos que envolverlo y decirle que esta es la versión de consulta de J.
Así que vamos a probar eso.
Presiona ingresar aquí y
ahora hagamos clic en el botón primero tenemos esa alerta porque nunca nos deshicimos de este primer oyente de clic.
Y luego el fondo cambia a rosa y se puede ver que pasará a cada uno que haga clic.
También podríamos hacer algo como esto.
Así que presiono la flecha hacia arriba y actualizo la página en lugar de simplemente cambiarlos para que sean de color rosa.
También podríamos cancelar el registro y el adulto de Walcott registrará el texto del botón al que se hizo clic.
Entonces sería algo así como que hiciste clic en "más" y luego crearé una variable para almacenar esto, por lo
que el texto variable es igual al signo de dólar de este punto y para sacar el texto de allí solo
tenemos que usar el método de texto como ese kaso ese registro hiciste clic en el texto que es nuestro nombre de variable e ingresas.
Y ahora, si hago clic en uno en el que hizo clic, no haga clic en mí en el que hizo clic.
Esta es tu última advertencia.
Y hiciste clic.
En serio, no me hagas clic.
DE ACUERDO.
Entonces eso es todo lo que demostraré.
Hacer clic.
Para resumir, podemos agregar un oyente a un elemento a la vez como lo hicimos para el H-1.
O podemos hacerlo a una colección que es donde realmente se vuelve útil.
Y finalmente, si queremos referirnos al elemento al que se hizo
clic, necesitamos usar el signo de dólar, que es el envoltorio J queery el J. A. GRAMO. versión de La Vainilla.
si esto