De acuerdo, bienvenido.
En este video quiero hablar un poco más sobre algunos de los diferentes tipos de eventos hasta ahora que
nos hemos encontrado con el evento click y el evento de cambio que usamos en una entrada de texto o una entrada de número en
la aplicación del marcador de puntaje.
Voy a comenzar presentando el M. SEGUNDO. A. referencia de evento
Esa es la página web en la que estoy aquí.
Y esta página web es una referencia a todos los diferentes eventos reconocidos por DOM API.
Y si nos desplazamos hacia abajo, es posible que se sorprenda de la cantidad que hay.
Y de hecho, voy a pedirte que en el próximo ejercicio escribas un código solo para contar
cuántos hay, es un ejemplo práctico divertido de usar la geometría de los contras. Así que vas a contar cuántos hay pero por ahora solo sé que hay un
montón de ellos y probablemente haya cinco o seis tal vez hasta 10 realmente comunes que
usarán todo el tiempo cosas como arrastrar y soltar para un evento de clic flotante puede hacer doble clic en los eventos de pulsación de
tecla, pero de lo contrario muchos de los más oscuros nunca se usarán o tal vez los usará una vez en un proyecto.
Pero es bueno saber que existe esta página web
que hay tantos eventos que quizás nunca usemos.
elemento con el mouse.
Y este video me voy a centrar en dos eventos en particular que tienen que ver con pasar el mouse sobre un
Y esos se llaman mouse sobre mouse out.
Así que tengo una aplicación simple y voy a hacer que se llame para
que lo haga en mi nuevo archivo y voy a agregar mi repetición normal y esta no será una lista completa de tareas pendientes.
No podremos agregar nuevos o que vamos a hacer es tener un UL con tres o cuatro aliados.
Cosas como lavar gato alimentar gato y vamos a alimentar gato a perro y guardar.
Así que tenemos nuestras tres cosas por hacer y eso es todo lo que necesitamos por ahora.
Y lo que quiero hacer
Voy a abrir esto en el navegador.
Quiero poder hacer clic y eso debería
oscurecer el elemento para hacer y tal vez tacharlo a través de él.
Pero también quiero poder suspender el vuelo y quiero saber con cuál me estoy moviendo.
Así que recibo esta agradable respuesta de los usuarios mientras sobrevivo uno de estos.
Tal vez tengas que cambiar de color o en negrita comenzará simplemente poniéndolo
en verde y hay muchos buenos efectos que puedes hacer por tu usuario usando estos eventos de desplazamiento.
Así que lo mostraré en este momento antes de que podamos escribir cualquier javascript aunque necesitemos hacer nuestro archivo.
Así que voy a guardar un nuevo archivo y lo llamaré a hacer.
Sí.
Y como
siempre tuve mi alerta conectada, guarde la opción volver aquí y agregue nuestro script en la parte inferior y nuestra fuente es igual al punto deuce J. S. y guardaremos o actualizaremos y obtenemos nuestra alerta.
Eso significa que está funcionando.
Vamos en el primer evento
que mencioné y lo primero que tenemos que hacer es seleccionar algo antes de poder manipularlo.
Así que voy a comenzar simplemente haciéndolo a la primera mentira.
Así que voy a usar el documento de
ECOs de primer aliado y haré un selector de consultas ally y recordaré que esto me da la primera mentira porque no hice un selector de
consultas todo y luego voy a agregar mi detector de eventos al primer aliado
Así que fuimos
primero a agregar el detector de eventos y el evento que estamos escuchando no es hacer clic en el mouse.
Y luego le damos nuestra función de devolución de llamada.
Y la forma en que funciona el mouseover se disparará tan pronto como comencemos a pasar sobre algo.
y ahora, y el segundo, y ahora y el primero.
Entonces, si estuviera trabajando con este último aliado, mi mouse se dispararía ahora
Entonces se trata de cuándo comienza el vuelo estacionario.
Primero, agregaría el detector de eventos al
mouseover y simplemente haremos un registro en lugar de un mouse de devolución de llamada y, si
actualizamos la consola, recuerde que solo lo hicimos con el primer aliado y ahí vamos, conseguimos un mouseover.
También es importante notar que no está disparando continuamente cada vez.
Sabes que ya pasamos de esto, es cuando comienza a flotar sobre un elemento.
registro constante o cualquier código que tengamos en la devolución de llamada.
Así que eso es útil para que no estemos constantemente con el
Solo sucede cuando pasamos el mouse al principio.
Entonces, en lugar de cancelar el registro, trabajemos para cambiar el color del aliado.
Vamos a hacerlo verde.
Así que cuando pasas el cursor sobre él se pone verde.
Así que tenemos que hacer primero
el estilo de punto aliado que el color sea igual al verde y guardamos la actualización y ahora miro cómo lo haré un poco más grande y hacer esto
un poco más grande y refrescarme. Cuando empiezo a girar el mouse, se vuelve verde.
Y luego, cuando me voy, se mantiene verde, que no es lo que queremos.
Solo queremos que esto sea un efecto de desplazamiento.
Entonces, cuando cierro sobre el aliado, se vuelve verde.
Pero cuando dejo de volver a ser
negro para hacer eso, realmente necesitamos otro evento y ese evento se disparará cuando termine nuestro vuelo estacionario.
Así que cuando dejamos este elemento y se llama Mouse, vamos a hacer lo mismo primero aliado.
Pero en caso de que Lessner salga del mouse.
Y luego nuestra función de devolución de llamada y nosotros simplemente haremos un primer color de ataque estilo fly y lo estableceremos de nuevo en negro.
Simplemente así, y si actualizamos, puedes ver que se pone verde y
luego el mouse se vuelve negro y el mouse sobre verde, y así sucesivamente.
Así que ahora obtenemos este pequeño efecto
de desplazamiento que nos muestra sobre qué estamos flotando básicamente qué hacer es seleccionado.
Entonces, hagamos que esto funcione para cada mentira.
Solo necesitamos hacer algunos pequeños cambios.
Y el primero de ellos es que debemos seleccionar todos los aliados.
que nos da una lista con los tres aliados.
Van a cambiar muy variables ya que son mentiras de preguntas documentadas que envían cartas a todos los aliados por lo
Y luego, por supuesto, lamentablemente no podemos hacer esto simplemente porque un oyente de eventos no funciona.
Necesitamos hacer un for loop cuatro de nuestro igual a cero.
Yo menos que mentiras ese enlace.
Plus plus.
Y espero que empieces a sentirte
un poco más cómodo haciendo esto agregando eventos o manipulando algo en lugar de un
bucle donde seleccionamos un montón de ellos y luego hacemos un recorrido y hacemos algo individualmente.
Como dije hace
algunos videos, un patrón realmente común es muy importante para que comencemos a sentirnos cómodos con él.
Así que dentro de aquí, en lugar de hacer primero, agregaría el detector de eventos.
Estamos trabajando con los aliados con los ojos de paréntesis, ese es nuestro aliado individual.
Y luego voy a copiar este código y hay un problema con este código.
Quiero decir que funcionará pero no funcionará de la manera que queremos.
Lo que sucederá es que estamos agregando un oyente de eventos a cada aliados aliados.
Pero cuando pasamos el mouse sobre alguno de ellos, solo estamos cambiando el primer estilo de punto aliado de color negro.
Y en realidad no funcionará porque la primera mentira ya no está definida.
Cambiamos el nombre
Pero eso no es lo que queríamos de todos modos.
Queremos que sea el aliado sobre el que ocurrió el evento mouse over.
Entonces podemos cambiar esto a la palabra esto.
Recuerde que la palabra clave this en lugar de un detector
de eventos se refiere al elemento o al elemento sobre el que se desencadenó el evento.
Así que este estilo, pero coloreó la pantalla igual y luego volveremos a duplicar este código.
Pero en lugar de pasar el ratón, haremos un mouse y, en
lugar de ir a Green, volveremos a negro y luego podemos deshacernos de esto y refrescarnos y ahí vamos.
Tenemos nuestro bonito y pequeño efecto de desplazamiento.
Entonces, lo último de lo que hablarán es agregar un oyente de clic solo para hacer esto un poco más completo.
Lo mismo que pensé que tenía un oyente de evento, haga clic en agregar o una función de devolución de llamada.
Y lo que vamos a hacer aquí es usar una clase.
Así que solo voy a agregar la clase primero.
clases de inicio que se alterna.
No existe, pero voy a decir que esto hace la lista de clases y alternará la lista de
Y solo llamaremos a la clase.
Entonces, el punto es que puedo hacer clic en uno de estos y debe salir gris y tener un efecto de tachado.
Y a pesar de que no tengo una clase definida, todavía se agrega para
que pueda mostrarle que abra la consola e inspeccione uno de estos.
Y luego hagamos clic en él y podrá ver o hacer clic
en el primero que puede ver, por cierto, el color verde y el negro que cambian aquí como un vuelo estacionario.
Pero cuando hago clic en este primero, puede ver que agrega clase.
Y luego hago clic nuevamente y desaparece.
Entonces ahora solo necesitamos definir la clase hecha.
Así que hagámoslo ahora.
Iré a sublime
y crearé un nuevo archivo y voy a guardar esto para hacer eso C Ss y lo primero que haremos es definir nuestra clase hecha.
Y voy a darle un efecto de tachado que hacemos
con la decoración de texto y establecemos esa línea y también cambiamos la opacidad para que la opacidad sea 0. 5 y guardar.
ellos como una etiqueta para Due's Gutsiest Us y podemos ahorrar.
Y luego, por supuesto, necesita vincular esto para comenzar a evaluar o añejar el archivo con
Ahora vamos a probarlo.
Usted actualiza la página.
Yo vuelo.
Así que obtén dos eventos que cambian el color negro y verde.
Y ahora puedo hacer clic y obtenemos un efecto de tachado.
Y esta línea también.
en lugar de cambiar el color manualmente aquí.
Hay algunos pequeños cambios que haría. Sin embargo, si volvemos a nuestro archivo javascript, el primero es
Cambiándolo a verde y negro.
Creo que es mejor hacerlo con nuestra propia clase.
Así que voy a hacer una nueva clase
y voy a llamar a esta seleccionada y luego voy a decir cuando el texto seleccionado o el color debe ser verde así como así.
Y luego iremos con el Javascript.
Y cuando pasamos el mouse sobre todo lo que queremos hacer es decir que esta lista de clase agrega seleccionada.
javascript para activar partes de nuestros C Ss y SAS estará a cargo del diseño.
Y esto se debe a esa idea de separación de intereses en
la que no queremos que nuestros javascript manipulen estilos individuales, sino que podemos usar
Así que eso le dará la clase seleccionada cuando
pasemos el mouse y cuando salgamos o cuando nos desordenemos haremos esta lista de clase estúpida remove selected y si guardamos refresh podremos ver que se ve bastante bien.
Hacemos clic en obtener nuestro tachado.
Todo bien.
Hay una pequeña lista de cosas por hacer.
Entonces esta es una forma un poco más agradable de hacerlo.
Funcionalmente se ve igual.
Es una mejor práctica usar clases en lugar de agregar y ajustar estilos de uno en uno.
Entonces, para resumir, vimos dos nuevos eventos mouseover y mouse out.
Y también obtuvimos más práctica configurando eventos en lugar de un bucle donde utilizamos esta palabra clave