1 00:00:00,260 --> 00:00:01,440 OK, volveremos. 2 00:00:01,440 --> 00:00:06,330 Hasta ahora hemos hablado sobre cómo podemos seleccionar los elementos con J Querrey y también cómo 3 00:00:06,330 --> 00:00:06,810 podemos manipularlos. 4 00:00:06,990 --> 00:00:11,790 Ahora vamos a presentar la última gran pieza faltante, que es eventos en la consulta J. 5 00:00:11,850 --> 00:00:13,700 Así que piensa en vanilla J. S. Cuando agregamos oyentes de eventos usamos un método llamado oyente de eventos. 6 00:00:13,740 --> 00:00:17,780 Bueno, resulta que Jay tiene una gran cantidad de métodos que tienen que ver con los eventos. 7 00:00:18,150 --> 00:00:22,230 Así que tengo la sección de eventos abierta en Jake, donde él puede llegar haciendo clic en eventos aquí. 8 00:00:22,350 --> 00:00:28,190 Así que mientras me desplazo aquí puedes ver cuántos. 9 00:00:28,260 --> 00:00:32,720 Los métodos de eventos de Coria son chikor, viene con un montón de ellos. 10 00:00:32,810 --> 00:00:37,210 Entonces, lo que voy a hacer es resaltar los tres más importantes, los tres que puede usar. 11 00:00:37,230 --> 00:00:41,820 El noventa y nueve por ciento de las veces esos tres métodos son rápidos presionar y continuar. 12 00:00:41,830 --> 00:00:49,190 Y dije que estos tres podrías usar el 99 por ciento del tiempo. 13 00:00:49,650 --> 00:00:53,010 En realidad es más como este aquí mismo. 14 00:00:53,160 --> 00:00:55,950 Puedes usar el 99 por ciento del tiempo. 15 00:00:55,950 --> 00:00:58,050 Así que le mostraré clic y 16 00:00:58,110 --> 00:01:03,000 presione la tecla primero, pero mi objetivo principal es mostrarle cuán asombroso es el método. 17 00:01:03,030 --> 00:01:04,600 Entonces empecemos. 18 00:01:05,130 --> 00:01:06,450 Así que el método rápido 19 00:01:06,450 --> 00:01:12,030 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. 20 00:01:12,030 --> 00:01:14,620 Para que pueda ver, tengo dos ejemplos en este caso. 21 00:01:14,730 --> 00:01:18,210 Estoy seleccionando algo y luego agrego un oyente clic con un clic. 22 00:01:18,210 --> 00:01:22,070 Entonces seleccionamos algo con la idea de enviar que ejecutamos. 23 00:01:22,290 --> 00:01:26,070 Haga clic en él y luego pasamos una función de devolución de 24 00:01:26,100 --> 00:01:32,490 llamada y esta función de devolución de llamada se ejecutará cuando se haga clic en algo con la idea de enviar. 25 00:01:32,490 --> 00:01:34,470 Y como es una identificación, solo hay una en la página. 26 00:01:34,680 --> 00:01:37,400 Entonces, cuando se hace clic en ese elemento, se ejecuta este código. 27 00:01:37,530 --> 00:01:40,920 Si echas un vistazo aquí puedes ver que 28 00:01:41,340 --> 00:01:46,290 estoy seleccionando todos los botones en la página, que podría ser uno. 29 00:01:46,290 --> 00:01:46,650 Podrían ser 10 botones y agregaré un oyente de clic a todos ellos. 30 00:01:46,650 --> 00:01:51,080 Entonces, cada vez que un botón es rápido, alertará a alguien que haga clic en el botón. 31 00:01:51,120 --> 00:01:55,800 Entonces permítanme demostrar eso. 32 00:01:55,830 --> 00:01:56,760 Ahora tengo una página HTL simple con Jay queery incluida como CDN. 33 00:01:56,750 --> 00:02:03,480 Y voy a agregar los eventos de consulta de Jay y agregaré algunos botones. 34 00:02:03,750 --> 00:02:10,730 Entonces, el primero que digo no me corrige. 35 00:02:11,370 --> 00:02:15,240 Y luego el siguiente dirá en serio, ok, yo. 36 00:02:16,020 --> 00:02:21,230 Y el último dirá que esta es tu última advertencia. 37 00:02:21,390 --> 00:02:27,690 Así que guardaremos y abriremos esto en el navegador y siempre comprobaremos que J cargó. 38 00:02:28,080 --> 00:02:36,300 DE ACUERDO. 39 00:02:38,320 --> 00:02:38,780 Se ve bien. 40 00:02:38,850 --> 00:02:40,040 Comenzaremos de manera fácil agregando un oyente rápido a este H-1 y solo hay uno en la página. 41 00:02:40,650 --> 00:02:46,110 Entonces solo debemos seleccionar primero con el signo de dólar. 42 00:02:46,110 --> 00:02:50,170 Entonces uno que nos da el derecho H-1 que solo uno y luego corremos. 43 00:02:50,680 --> 00:02:55,610 No haga clic en eso y luego tendremos que pasar una 44 00:02:55,640 --> 00:03:02,220 función de devolución de llamada que se ejecutará siempre que hagamos clic en ese H-1. 45 00:03:02,220 --> 00:03:03,670 Así que detrás de 46 00:03:03,690 --> 00:03:11,010 las escenas el clic está usando un oyente de eventos y está agregando un oyente de clic en este H-1 y 47 00:03:11,010 --> 00:03:18,540 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 48 00:03:18,600 --> 00:03:24,120 podríamos escribir una función nombrada por separado y luego pasar el nombre de esa función aquí. 49 00:03:24,120 --> 00:03:24,940 Pero como dije, las funciones anónimas son mucho más comunes. 50 00:03:25,260 --> 00:03:27,900 Entonces, lo que queremos hacer es alertar a cada 51 00:03:28,200 --> 00:03:37,080 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. 52 00:03:37,130 --> 00:03:42,380 Sucede aquí, recuerde porque mi H-1 recorre toda la pantalla para que CSSA emita 53 00:03:42,630 --> 00:03:48,990 si quiero cambiar el tamaño de uno, pero solo ocurre cuando hago clic en el elemento uno. 54 00:03:48,990 --> 00:03:54,990 Ahora lo que quiero hacer es mostrar cómo podemos agregar un oyente rápido a una colección de elementos. 55 00:03:54,990 --> 00:04:00,020 Así que voy a seleccionar todos los botones aquí. 56 00:04:00,150 --> 00:04:02,530 como nuestra devolución de llamada. 57 00:04:02,640 --> 00:04:12,630 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 58 00:04:12,630 --> 00:04:14,050 Y esto se 59 00:04:14,580 --> 00:04:24,420 ejecutará cada vez que se haga clic en un botón y haremos un clic en el botón de alerta y presionaremos enter. 60 00:04:24,420 --> 00:04:27,130 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. 61 00:04:27,630 --> 00:04:35,470 Por lo tanto, piense en vainilla javascript para agregar un detector de eventos a una colección de botones. 62 00:04:35,490 --> 00:04:41,150 Tendría que seleccionarlos todos con query selector all u obtener elementos por nombre de etiqueta y 63 00:04:41,190 --> 00:04:46,380 luego tendría que usar un ciclo for para recorrerlos a todos y luego tendría que 64 00:04:46,380 --> 00:04:51,240 agregar individualmente un detector de eventos que para estar claro está sucediendo. entre bastidores. 65 00:04:51,240 --> 00:04:54,780 Pero todo lo que tengo que hacer es escribir esta línea y será un bucle para mí que agregará 66 00:04:54,870 --> 00:04:59,700 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. 67 00:04:59,730 --> 00:05:05,660 ¿Qué sucede si deseo cambiar el estilo? Cambie el color de fondo del botón que se hizo clic. 68 00:05:05,820 --> 00:05:10,940 Por lo tanto, necesitaría agregar un oyente clic nuevamente. 69 00:05:11,430 --> 00:05:13,970 Estoy solo en la flecha hacia arriba y no en alerta. 70 00:05:13,970 --> 00:05:16,780 Lo que haremos es cambiar el 71 00:05:17,040 --> 00:05:26,730 color de fondo para que sea algo que sea el fondo de C-s y lo cambiaremos para que sea de color rosa. 72 00:05:26,730 --> 00:05:30,290 Entonces, el problema es a qué llamamos Dotsie CSSA una y otra vez con vainilla javascript. 73 00:05:30,450 --> 00:05:36,090 Nosotros usaríamos esto. 74 00:05:36,090 --> 00:05:37,360 La palabra clave "esto" y "aquello" se 75 00:05:37,380 --> 00:05:43,530 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. 76 00:05:43,530 --> 00:05:49,720 Esta es siempre una idea un poco confusa. 77 00:05:49,950 --> 00:05:53,010 Creo que ayuda recordar que lo que Shakeri hace 78 00:05:53,010 --> 00:05:58,830 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. 79 00:05:58,830 --> 00:06:03,830 Entonces, si queremos usar 80 00:06:03,840 --> 00:06:10,680 dot CSSA, que es un método de consulta J, debemos asegurarnos de que lo estamos ejecutando en un objeto de consulta J. 81 00:06:10,950 --> 00:06:12,660 Así que simplemente viejo, este es el javascript regular de vanilla. 82 00:06:12,660 --> 00:06:17,560 Entonces, tenemos que envolverlo y decirle que esta es la versión de consulta de J. 83 00:06:17,670 --> 00:06:21,440 Así que vamos a probar eso. 84 00:06:21,660 --> 00:06:23,190 Presiona ingresar aquí y 85 00:06:23,370 --> 00:06:30,630 ahora hagamos clic en el botón primero tenemos esa alerta porque nunca nos deshicimos de este primer oyente de clic. 86 00:06:30,630 --> 00:06:32,460 Y luego el fondo cambia a rosa y se puede ver que pasará a cada uno que haga clic. 87 00:06:32,880 --> 00:06:40,280 También podríamos hacer algo como esto. 88 00:06:40,440 --> 00:06:42,010 Así que presiono la flecha hacia arriba y actualizo la página en lugar de simplemente cambiarlos para que sean de color rosa. 89 00:06:42,030 --> 00:06:47,610 También podríamos cancelar el registro y el adulto de Walcott registrará el texto del botón al que se hizo clic. 90 00:06:47,670 --> 00:06:55,540 Entonces sería algo así como que hiciste clic en "más" y luego crearé una variable para almacenar esto, por lo 91 00:06:55,650 --> 00:07:03,870 que el texto variable es igual al signo de dólar de este punto y para sacar el texto de allí solo 92 00:07:04,560 --> 00:07:14,040 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. 93 00:07:14,460 --> 00:07:22,430 Y ahora, si hago clic en uno en el que hizo clic, no haga clic en mí en el que hizo clic. 94 00:07:22,920 --> 00:07:27,510 Esta es tu última advertencia. 95 00:07:27,540 --> 00:07:28,890 Y hiciste clic. 96 00:07:29,460 --> 00:07:30,360 En serio, no me hagas clic. 97 00:07:30,420 --> 00:07:31,830 DE ACUERDO. 98 00:07:32,190 --> 00:07:32,640 Entonces eso es todo lo que demostraré. 99 00:07:32,670 --> 00:07:33,930 Hacer clic. 100 00:07:33,930 --> 00:07:34,650 Para resumir, podemos agregar un oyente a un elemento a la vez como lo hicimos para el H-1. 101 00:07:34,650 --> 00:07:39,520 O podemos hacerlo a una colección que es donde realmente se vuelve útil. 102 00:07:39,780 --> 00:07:43,870 Y finalmente, si queremos referirnos al elemento al que se hizo 103 00:07:43,890 --> 00:07:49,320 clic, necesitamos usar el signo de dólar, que es el envoltorio J queery el J. A. GRAMO. versión de La Vainilla. 104 00:07:49,680 --> 00:07:53,670 si esto 105 00:07:53,690 --> 00:07:54,480