1 00:00:00,210 --> 00:00:01,440 OK, volveremos. 2 00:00:01,470 --> 00:00:03,590 Entonces tenemos un método menos del que quiero hablar. 3 00:00:03,740 --> 00:00:09,160 Como mencioné en el video de introducción a los eventos de J Corea, el método de encendido es lo que vamos a usar. 4 00:00:09,200 --> 00:00:13,980 El noventa y nueve por ciento de las veces es, con mucho, el método de evento Jay queery más utilizado. 5 00:00:14,280 --> 00:00:14,490 DE ACUERDO. 6 00:00:14,490 --> 00:00:18,580 Entonces, hablemos de cómo funciona, es muy similar al vainilla. 7 00:00:18,620 --> 00:00:20,790 Sí, un oyente de eventos. 8 00:00:20,790 --> 00:00:22,270 Obviamente es mucho más corto. 9 00:00:22,290 --> 00:00:28,200 Son solo dos personajes, pero se comporta de manera similar donde le damos el nombre del 10 00:00:28,200 --> 00:00:29,590 evento que queremos escuchar. 11 00:00:29,760 --> 00:00:37,650 Así que a diferencia del clic o de la tecla presionar que solo activará un tipo de evento, haga clic o la tecla presionar nos 12 00:00:37,650 --> 00:00:45,780 permite especificar si estamos haciendo un clic como lo estamos haciendo aquí enviar al hacer clic o si estamos haciendo un doble clic como si tuviera 13 00:00:45,780 --> 00:00:53,730 el botón aquí al hacer doble clic o arrastrar el inicio o presionar una tecla para que pueda tomar el lugar de todas las cosas 14 00:00:53,730 --> 00:00:58,760 que ya ha visto con clic y presionar la tecla y todos los otros métodos aquí. 15 00:00:58,870 --> 00:01:06,670 Hay una tonelada de ellos como la tecla de desplazamiento y enviar y alternar, presione la tecla de arrastrar hacia arriba. 16 00:01:06,780 --> 00:01:10,410 Todo eso se puede hacer solo con el método on. 17 00:01:10,410 --> 00:01:15,480 Funciona más o menos de la misma manera, aunque donde primero tenemos que seleccionar algo con signo de dólar. 18 00:01:15,870 --> 00:01:17,450 Así que te mostraré un ejemplo aquí. 19 00:01:17,730 --> 00:01:23,490 Seleccionamos algo en este caso todos los profesores dentro del cuerpo dentro de algo con la idea 20 00:01:23,490 --> 00:01:28,500 de tabla de datos y luego lo ejecutamos y luego el tipo del evento. 21 00:01:28,500 --> 00:01:33,740 Así que esto es nuevo en comparación con el clic y la tecla presionada que solo toman una función de devolución de llamada. 22 00:01:33,840 --> 00:01:36,560 Tenemos que especificar qué evento estamos escuchando. 23 00:01:36,750 --> 00:01:40,810 Entonces haga clic en este caso y luego coma la función de devolución de llamada. 24 00:01:40,830 --> 00:01:42,550 Queremos que se corra. 25 00:01:42,660 --> 00:01:45,930 Probemos esto para actualizar mi página. 26 00:01:45,930 --> 00:01:47,100 Mi demo de AJ extraída. 27 00:01:47,130 --> 00:01:51,390 Por lo tanto, no tenemos escuchas por clic, por lo que no hay clics en los que no tengamos presionadas las teclas. 28 00:01:51,390 --> 00:01:53,350 Tampoco ocurre nada en nuestros botones. 29 00:01:53,760 --> 00:01:57,600 Vamos a tratar de agregar algunos oyentes rápidos primero. 30 00:01:57,630 --> 00:02:00,660 Cambiemos el color del H-1 cuando hacemos clic en él. 31 00:02:00,720 --> 00:02:10,230 Entonces, debemos seleccionar cada una de ellas y luego vamos a hacer en el primer argumento el tipo de evento que es rápido 32 00:02:10,230 --> 00:02:13,570 y luego nuestra función de devolución de llamada. 33 00:02:13,950 --> 00:02:20,640 Y dentro de la función de devolución de llamada si quisiéramos cambiar el color del H-1 podríamos hacer 34 00:02:20,640 --> 00:02:30,750 algo como esto en el que simplemente decimos H-1 con más fuerza que Color Morado y veamos si se puede pensar por qué esto podría ser un 35 00:02:30,750 --> 00:02:31,260 problema. 36 00:02:31,320 --> 00:02:38,880 Así que presionaré Enter y todo irá bien, se vuelve morado, pero voy a copiar este código y 37 00:02:38,880 --> 00:02:44,700 actualizar la página y agregaré otro H-1 tres de ellos y los guardaré. 38 00:02:44,790 --> 00:02:46,340 Ahora tenemos tres H-1. 39 00:02:46,770 --> 00:02:55,160 Y si ejecuto este código nuevamente, cualquier H-1 cuando haga clic en él cambiará todos los h para que sean de color púrpura. 40 00:02:55,200 --> 00:02:57,060 Entonces lo intentaré. 41 00:02:57,090 --> 00:03:02,910 Todos cambian a púrpura, que tal vez es una característica que queremos, pero la mayoría de las veces queremos afectar el 42 00:03:03,060 --> 00:03:04,670 elemento en el que hacemos clic. 43 00:03:04,950 --> 00:03:13,830 Entonces, para hacer todo eso, necesitamos usar la palabra clave this y recordar que debe ser el contenedor de consultas J 44 00:03:13,980 --> 00:03:14,790 para esto. 45 00:03:14,790 --> 00:03:21,600 Entonces, el paréntesis de signo de dólar se refiere a la H-1 o la única cosa en la que se hizo clic. 46 00:03:22,180 --> 00:03:28,400 Y ahora si pulso enter e intento hacer clic solo, el H-1 correcto cambia a violeta. 47 00:03:29,040 --> 00:03:31,770 OK, así es como podemos usar para hacer un clic. 48 00:03:31,770 --> 00:03:34,150 Ahora veamos cómo usarlo para presionar una tecla. 49 00:03:34,290 --> 00:03:35,760 Así que seleccionaremos 50 00:03:38,610 --> 00:03:50,070 nuestra entrada como ese punto y luego agregaremos la tecla presionar y el segundo argumento es la función de devolución de llamada y haremos un 51 00:03:50,070 --> 00:03:51,740 simple registro de conses. 52 00:03:51,870 --> 00:03:59,170 Así que cancela la tecla de registro presionada así y haremos clic en enter. 53 00:03:59,200 --> 00:04:06,540 Ahora si voy a escribir una clave aquí, la presiono cada vez que escribo una tecla. 54 00:04:06,540 --> 00:04:09,740 Probemos un tipo más de evento aquí lo refrescaré. 55 00:04:10,080 --> 00:04:12,190 Hagamos algo cuando pasamos el mouse sobre un botón. 56 00:04:12,390 --> 00:04:15,770 Cambiaremos la fuente para que quede en negrita cuando pase el puntero. 57 00:04:15,840 --> 00:04:21,670 Entonces, primero debemos seleccionar todos los botones así y luego agregar nuestro. 58 00:04:21,880 --> 00:04:24,730 Y el evento que usaremos se llama Mouse enter. 59 00:04:24,930 --> 00:04:25,860 Así. 60 00:04:26,280 --> 00:04:31,280 Y comenzaremos con el registro cancelado cuando el mouse entre. 61 00:04:31,290 --> 00:04:38,240 Así que haremos un ratón de registro incorporado así. 62 00:04:38,610 --> 00:04:44,090 Y ahora si cierro el mouse, ingrese un mouse así. 63 00:04:44,340 --> 00:04:46,420 Y es solo cuando ingresamos el elemento por primera vez. 64 00:04:46,680 --> 00:04:50,300 Así que no se dispara una y otra vez hasta que me voy y vuelvo. 65 00:04:50,750 --> 00:04:51,060 DE ACUERDO. 66 00:04:51,060 --> 00:04:55,450 Entonces, cuando ingresemos el mouse, no vamos a querer registrarnos constantemente. 67 00:04:55,470 --> 00:05:02,880 Vamos a querer seleccionar el envoltorio J para esto y hacer el SS demasiado audaz, algo que necesitamos para cambiar el 68 00:05:02,880 --> 00:05:04,140 peso de la fuente. 69 00:05:04,350 --> 00:05:13,020 Así que formas divertidas y haremos ese doblez así y presionaremos enter. 70 00:05:13,020 --> 00:05:18,310 Ahora, si sobrevuelo, es difícil ver qué cambia para ser negrita. 71 00:05:18,390 --> 00:05:21,200 Por supuesto, se mantiene en negrita, nunca cambia de nuevo. 72 00:05:21,390 --> 00:05:29,670 lo mismo con el botón al dejar el mouse, que es otro evento y luego, en lugar de cambiarlo al peso de la fuente. 73 00:05:30,150 --> 00:05:32,040 Entonces, podríamos agregar esa función haciendo 74 00:05:32,040 --> 00:05:32,670 Negrita. 75 00:05:32,670 --> 00:05:36,800 Podemos cambiarlo a la normalidad así como así. 76 00:05:36,810 --> 00:05:40,420 Ahora si me voy, vuelve a la normalidad. 77 00:05:40,830 --> 00:05:43,530 Y si entro en negrita, me voy, es normal. 78 00:05:43,950 --> 00:05:50,610 Así que así es como podríamos hacer algo con javascript para hacer una especie de efecto de selección de desplazamiento. 79 00:05:50,670 --> 00:05:57,000 Sin embargo, con CSSA ahora podemos hacerlo fácilmente sin ningún javascript en absoluto con el pseudo selector hover. 80 00:05:57,490 --> 00:06:00,510 Y solo quería demostrar que hay otros eventos por ahí. 81 00:06:00,720 --> 00:06:06,060 Entonces, todos los eventos que podríamos usar con un detector de eventos con los que podemos usarlo lo 82 00:06:06,060 --> 00:06:06,890 hacen realmente útil. 83 00:06:06,990 --> 00:06:09,500 Como mencioné lo usaremos todo el tiempo. 84 00:06:09,840 --> 00:06:14,690 Así que hay un último punto sobre el que me gustaría plantearme y como ejemplo que voy a utilizar. 85 00:06:14,690 --> 00:06:16,440 Click y on. 86 00:06:16,440 --> 00:06:19,510 Haz clic y habla sobre cómo son ligeramente diferentes. 87 00:06:19,800 --> 00:06:22,230 Entonces, ambos generalmente trabajarán para ti. 88 00:06:22,230 --> 00:06:28,290 que el clic solo agregará oyentes de clic para los elementos que están en la página en ese momento. 89 00:06:28,290 --> 00:06:31,590 Agregarán un oyente rápido, pero hay una pequeña diferencia, que es 90 00:06:32,040 --> 00:06:37,790 Y el clic en el botón agregará oyentes para todos los elementos futuros o posibles elementos futuros. 91 00:06:37,980 --> 00:06:40,430 Entonces, esto tendrá sentido cuando hagas la lista de tareas pendientes. 92 00:06:40,530 --> 00:06:47,010 Pero, básicamente, necesitamos usar punto sobre clic en lugar de hacer clic porque vamos a tener que hacer que se agregan a la 93 00:06:47,010 --> 00:06:52,060 página que no están allí cuando la página carga un usuario escribe en un formulario y se ingresa. 94 00:06:52,260 --> 00:06:57,090 Y eso hará que hagamos algo nuevo y queremos que esos nuevos hagan sus propios oyentes de clics. 95 00:06:57,090 --> 00:07:01,930 Así que tenemos que usar de nuevo que tendrá más sentido cuando realmente comenzamos a hacer la lista.