diff --git a/2-ui/2-events/01-introduction-browser-events/01-hide-other/solution.view/index.html b/2-ui/2-events/01-introduction-browser-events/01-hide-other/solution.view/index.html index 7228a45de..403fedbfe 100644 --- a/2-ui/2-events/01-introduction-browser-events/01-hide-other/solution.view/index.html +++ b/2-ui/2-events/01-introduction-browser-events/01-hide-other/solution.view/index.html @@ -7,13 +7,13 @@ - + -
Text
+
Texto
diff --git a/2-ui/2-events/01-introduction-browser-events/01-hide-other/task.md b/2-ui/2-events/01-introduction-browser-events/01-hide-other/task.md index 7cb0cb0c9..f0209e6ca 100644 --- a/2-ui/2-events/01-introduction-browser-events/01-hide-other/task.md +++ b/2-ui/2-events/01-introduction-browser-events/01-hide-other/task.md @@ -2,10 +2,10 @@ importance: 5 --- -# Hide on click +# Ocultar con un click -Add JavaScript to the `button` to make `
` disappear when we click it. +Agrega JavaScript al `button` para hacer que `
` desaparezca al clickearlo. -The demo: +El demo: [iframe border=1 src="solution" height=80] diff --git a/2-ui/2-events/01-introduction-browser-events/02-hide-self-onclick/solution.md b/2-ui/2-events/01-introduction-browser-events/02-hide-self-onclick/solution.md index cded5b622..ff7109a82 100644 --- a/2-ui/2-events/01-introduction-browser-events/02-hide-self-onclick/solution.md +++ b/2-ui/2-events/01-introduction-browser-events/02-hide-self-onclick/solution.md @@ -1,5 +1,5 @@ -Can use `this` in the handler to reference "the element itself" here: +Podemos usar `this` en el handler para referenciar "al propio elemento" aquí: ```html run height=50 - + ``` diff --git a/2-ui/2-events/01-introduction-browser-events/02-hide-self-onclick/task.md b/2-ui/2-events/01-introduction-browser-events/02-hide-self-onclick/task.md index 9ee8f18e1..d727b75bc 100644 --- a/2-ui/2-events/01-introduction-browser-events/02-hide-self-onclick/task.md +++ b/2-ui/2-events/01-introduction-browser-events/02-hide-self-onclick/task.md @@ -2,11 +2,11 @@ importance: 5 --- -# Hide self +# Ocultarse -Create a button that hides itself on click. +Crea un botón que se oculte a sí mismo al darle un click. ```online -Like this: - +Así: + ``` diff --git a/2-ui/2-events/01-introduction-browser-events/03-which-handlers-run/solution.md b/2-ui/2-events/01-introduction-browser-events/03-which-handlers-run/solution.md index d569f0e4d..e49e88347 100644 --- a/2-ui/2-events/01-introduction-browser-events/03-which-handlers-run/solution.md +++ b/2-ui/2-events/01-introduction-browser-events/03-which-handlers-run/solution.md @@ -1,8 +1,8 @@ -The answer: `1` and `2`. +La respuesta: `1` y `2`. -The first handler triggers, because it's not removed by `removeEventListener`. To remove the handler we need to pass exactly the function that was assigned. And in the code a new function is passed, that looks the same, but is still another function. +El primer handler se activa porque no es removido por `removeEventListener`. Para remover el handler necesitamos pasar exactamente la función que fue asignada. Y en el código se pasa una función que luce igual pero es otra función. -To remove a function object, we need to store a reference to it, like this: +Para remover un objeto de función necesitamos almacenar una referencia a él, así: ```js function handler() { @@ -13,4 +13,4 @@ button.addEventListener("click", handler); button.removeEventListener("click", handler); ``` -The handler `button.onclick` works independently and in addition to `addEventListener`. +El handler `button.onclick` funciona independientemente y en adición a `addEventListener`. diff --git a/2-ui/2-events/01-introduction-browser-events/03-which-handlers-run/task.md b/2-ui/2-events/01-introduction-browser-events/03-which-handlers-run/task.md index f8cd75d5a..e83f6b55e 100644 --- a/2-ui/2-events/01-introduction-browser-events/03-which-handlers-run/task.md +++ b/2-ui/2-events/01-introduction-browser-events/03-which-handlers-run/task.md @@ -2,11 +2,11 @@ importance: 5 --- -# Which handlers run? +# ¿Qué handlers se ejecutan? -There's a button in the variable. There are no handlers on it. +Hay un botón en la variable. No hay handlers en él. -Which handlers run on click after the following code? Which alerts show up? +¿Qué handlers se ejecutan con el click después del siguiente código? ¿Qué alertas se muestran? ```js no-beautify button.addEventListener("click", () => alert("1")); diff --git a/2-ui/2-events/01-introduction-browser-events/04-move-ball-field/solution.md b/2-ui/2-events/01-introduction-browser-events/04-move-ball-field/solution.md index b04cb8231..b2f205839 100644 --- a/2-ui/2-events/01-introduction-browser-events/04-move-ball-field/solution.md +++ b/2-ui/2-events/01-introduction-browser-events/04-move-ball-field/solution.md @@ -1,11 +1,11 @@ -First we need to choose a method of positioning the ball. +Primero necesitamos elegir un método para posicionar el balón. -We can't use `position:fixed` for it, because scrolling the page would move the ball from the field. +No podemos usar `position:fixed` para ello, porque al desplazar la página se movería el balón del campo. -So we should use `position:absolute` and, to make the positioning really solid, make `field` itself positioned. +Así que deberíamos usar `position:absolute` y, para que el posicionamiento sea realmente sólido, hacer que `field` sea posicione a sí mismo. -Then the ball will be positioned relatively to the field: +Entonces el balón se posicionará en relación al campo: ```css #field { @@ -16,36 +16,36 @@ Then the ball will be positioned relatively to the field: #ball { position: absolute; - left: 0; /* relative to the closest positioned ancestor (field) */ + left: 0; /* relativo al predecesor más cercano (field) */ top: 0; - transition: 1s all; /* CSS animation for left/top makes the ball fly */ + transition: 1s all; /* Animación CSS para que left/top hagan al balón volar */ } ``` -Next we need to assign the correct `ball.style.left/top`. They contain field-relative coordinates now. +Lo siguiente es asignar el `ball.style.left/top` correcto. Ahora contienen coordenadas relativas al campo. -Here's the picture: +Aquí está la imagen: ![](move-ball-coords.svg) -We have `event.clientX/clientY` -- window-relative coordinates of the click. +Tenemos `event.clientX/clientY`, las cuales son las coordenadas del click relativas a la ventana. -To get field-relative `left` coordinate of the click, we can substract the field left edge and the border width: +Para obtener la coordenada `left` del click relativa al campo necesitamos restar el limite izquierdo del campo y el ancho del borde: ```js let left = event.clientX - fieldCoords.left - field.clientLeft; ``` -Normally, `ball.style.left` means the "left edge of the element" (the ball). So if we assign that `left`, then the ball edge, not center, would be under the mouse cursor. +Normalmente `ball.style.left` significa el "borde izquierdo del elemento" (el balón). Por lo que si asignamos ese `left`, entonces el borde del balón, no el centro, es el que se encontraría debajo del cursor del mouse. -We need to move the ball half-width left and half-height up to make it center. +Necesitamos mover la mitad del ancho del balón a la izquierda y la mitad del alto hacia arriba para que quede en el centro. -So the final `left` would be: +Por lo que el `left` final debería ser: ```js let left = event.clientX - fieldCoords.left - field.clientLeft - ball.offsetWidth/2; ``` -The vertical coordinate is calculated using the same logic. +La coordenada vertical es calculada usando la misma lógica. -Please note that the ball width/height must be known at the time we access `ball.offsetWidth`. Should be specified in HTML or CSS. +Por favor, nota que el ancho/alto del balón se debe conocer al momento que accedemos a `ball.offsetWidth`. Se debe especificar en HTML o CSS. diff --git a/2-ui/2-events/01-introduction-browser-events/04-move-ball-field/solution.view/index.html b/2-ui/2-events/01-introduction-browser-events/04-move-ball-field/solution.view/index.html index 3ebe8739e..5b82bff34 100644 --- a/2-ui/2-events/01-introduction-browser-events/04-move-ball-field/solution.view/index.html +++ b/2-ui/2-events/01-introduction-browser-events/04-move-ball-field/solution.view/index.html @@ -27,7 +27,7 @@ - Click on a field to move the ball there. + Haz click en un lugar del campo para mover el balón allí.
@@ -39,29 +39,29 @@ diff --git a/2-ui/2-events/01-introduction-browser-events/06-hide-message/task.md b/2-ui/2-events/01-introduction-browser-events/06-hide-message/task.md index 152cf41fe..349d62ace 100644 --- a/2-ui/2-events/01-introduction-browser-events/06-hide-message/task.md +++ b/2-ui/2-events/01-introduction-browser-events/06-hide-message/task.md @@ -2,12 +2,12 @@ importance: 5 --- -# Add a closing button +# Agregar un botón de cierre -There's a list of messages. +Hay una lista de mensajes. -Use JavaScript to add a closing button to the right-upper corner of each message. +Usa JavaScript para agregar un botón de cierre en la esquina superior derecha de cada mensaje. -The result should look like this: +El resultado debería verse algo así: [iframe src="solution" height=450] diff --git a/2-ui/2-events/01-introduction-browser-events/07-carousel/solution.md b/2-ui/2-events/01-introduction-browser-events/07-carousel/solution.md index 1c6b52cea..390d49f4d 100644 --- a/2-ui/2-events/01-introduction-browser-events/07-carousel/solution.md +++ b/2-ui/2-events/01-introduction-browser-events/07-carousel/solution.md @@ -1,17 +1,17 @@ -The images ribbon can be represented as `ul/li` list of images ``. +La cinta de imágenes se puede representar como una lista `ul/li` de imágenes ``. -Normally, such a ribbon is wide, but we put a fixed-size `
` around to "cut" it, so that only a part of the ribbon is visible: +Normalmente dicha cinta es ancha pero colocamos un tamaño fijo `
` alrededor para "cortarla", de modo que solo una parte de la cinta sea visible: ![](carousel1.svg) -To make the list show horizontally we need to apply correct CSS properties for `
  • `, like `display: inline-block`. +Para que la lista se muestre horizontalmente debemos aplicar las propiedades CSS correctas para `
  • `, como `display: inline-block`. -For `` we should also adjust `display`, because by default it's `inline`. There's extra space reserved under `inline` elements for "letter tails", so we can use `display:block` to remove it. +Para `` también deberíamos ajustar `display`, ya que es `inline` por default. Hay espacio adicional reservado debajo de los "letter tails", por lo que podemos usar `display:block` para eliminarlo. -To do the scrolling, we can shift `
      `. There are many ways to do it, for instance by changing `margin-left` or (better performance) use `transform: translateX()`: +Para hacer el desplazamiento, podemos cambiar `
        `. Hay muchas formas de hacerlo, por ejemplo, cambiando `margin-left` o (para mejor rendimiento) usando `transform: translateX()`: ![](carousel2.svg) -The outer `
        ` has a fixed width, so "extra" images are cut. +El `
        ` exterior tiene un ancho fijo, por lo que se cortan las imágenes "extra". -The whole carousel is a self-contained "graphical component" on the page, so we'd better wrap it into a single `
        ` and style things inside it. +Todo el carrusel es un "componente gráfico" autónomo en la página, por lo que será mejor que lo envuelva en un solo elemento `
        ` y le apliquemos estilo. diff --git a/2-ui/2-events/01-introduction-browser-events/07-carousel/solution.view/index.html b/2-ui/2-events/01-introduction-browser-events/07-carousel/solution.view/index.html index 2c6073316..75daac266 100644 --- a/2-ui/2-events/01-introduction-browser-events/07-carousel/solution.view/index.html +++ b/2-ui/2-events/01-introduction-browser-events/07-carousel/solution.view/index.html @@ -27,7 +27,7 @@
        diff --git a/2-ui/2-events/01-introduction-browser-events/07-carousel/source.view/style.css b/2-ui/2-events/01-introduction-browser-events/07-carousel/source.view/style.css index 75c68f01a..08b0ec549 100644 --- a/2-ui/2-events/01-introduction-browser-events/07-carousel/source.view/style.css +++ b/2-ui/2-events/01-introduction-browser-events/07-carousel/source.view/style.css @@ -30,9 +30,9 @@ ul { ul img { width: 130px; height: 130px; - display: block; /* removes extra space near images */ + display: block; /* remueve el espacio extra cerca de las imágenes */ } ul li { - display: inline-block; /* removes extra space between list items + display: inline-block; /* remueve el espacio extra entre los elementos li } diff --git a/2-ui/2-events/01-introduction-browser-events/07-carousel/task.md b/2-ui/2-events/01-introduction-browser-events/07-carousel/task.md index a6adbffa5..b39014595 100644 --- a/2-ui/2-events/01-introduction-browser-events/07-carousel/task.md +++ b/2-ui/2-events/01-introduction-browser-events/07-carousel/task.md @@ -2,12 +2,12 @@ importance: 4 --- -# Carousel +# Carrusel -Create a "carousel" -- a ribbon of images that can be scrolled by clicking on arrows. +Crea un "carrusel": una cinta de imágenes que se puede desplazar haciendo clic en las flechas. [iframe height=200 src="solution"] -Later we can add more features to it: infinite scrolling, dynamic loading etc. +Más adelante podemos agregarle más funciones: desplazamiento infinito, carga dinámica, etc. -P.S. For this task HTML/CSS structure is actually 90% of the solution. +P.D. Para esta tarea, la estructura HTML / CSS es en realidad el 90% de la solución. diff --git a/2-ui/2-events/01-introduction-browser-events/article.md b/2-ui/2-events/01-introduction-browser-events/article.md index 19394e49e..f034f8272 100644 --- a/2-ui/2-events/01-introduction-browser-events/article.md +++ b/2-ui/2-events/01-introduction-browser-events/article.md @@ -1,256 +1,256 @@ -# Introduction to browser events +# Introducción a los eventos en el navegador -*An event* is a signal that something has happened. All DOM nodes generate such signals (but events are not limited to DOM). +*Un evento* es una señal de que algo ocurrió. Todos los nodos del DOM generan dichas señales (pero los eventos no est{an limitados sólo al DOM). -Here's a list of the most useful DOM events, just to take a look at: +Aquí hay una lista con los eventos del DOM más utilizados, solo para echar un vistazo: -**Mouse events:** -- `click` -- when the mouse clicks on an element (touchscreen devices generate it on a tap). -- `contextmenu` -- when the mouse right-clicks on an element. -- `mouseover` / `mouseout` -- when the mouse cursor comes over / leaves an element. -- `mousedown` / `mouseup` -- when the mouse button is pressed / released over an element. -- `mousemove` -- when the mouse is moved. +**Eventos del mouse:** +- `click` -- cuando el mouse hace click sobre un elemento (los dispositivos touch lo generan con un toque). +- `contextmenu` -- cuando el mouse hace click derecho sobre un elemento. +- `mouseover` / `mouseout` -- cuando el cursor del mouse ingresa / abandona un elemento. +- `mousedown` / `mouseup` -- cuando el botón del mouse es presionado / soltado sobre un elemento. +- `mousemove` -- cuando el mouse se mueve. -**Keyboard events:** -- `keydown` and `keyup` -- when a keyboard key is pressed and released. +**Eventos del teclado:** +- `keydown` / `keyup` -- cuando se presiona / suelta una tecla. -**Form element events:** -- `submit` -- when the visitor submits a `
        `. -- `focus` -- when the visitor focuses on an element, e.g. on an ``. +**Eventos del elemento form:** +- `submit` -- cuando el visitante envía un ``. +- `focus` -- cuando el visitante se centra sobre un elemento, por ejemplo un ``. -**Document events:** -- `DOMContentLoaded` -- when the HTML is loaded and processed, DOM is fully built. +**Eventos del documento:** +- `DOMContentLoaded` --cuando el HTML es cargado y procesado, el DOM está completamente construido -**CSS events:** -- `transitionend` -- when a CSS-animation finishes. +**Eventos del CSS:** +- `transitionend` -- cuando una animación CSS concluye. -There are many other events. We'll get into more details of particular events in next chapters. +Hay muchos más eventos. Entraremos en detalle con eventos en particular en los siguientes capítulos. -## Event handlers +## Controladores de eventos -To react on events we can assign a *handler* -- a function that runs in case of an event. +Para reaccionar con eventos podemos asignar un *handler (controlador)* el cual es una función que se ejecuta en caso de un evento. -Handlers are a way to run JavaScript code in case of user actions. +Los handlers son una forma de ejecutar código JavaScript en caso de acciones por parte del usuario. -There are several ways to assign a handler. Let's see them, starting from the simplest one. +Hay muchas maneras de asignar un handler. Vamos a verlas empezando por las más simples. -### HTML-attribute +### Atributo HTML -A handler can be set in HTML with an attribute named `on`. +Un handler puede ser establecido en el HTML con un atributo llamado `on`. -For instance, to assign a `click` handler for an `input`, we can use `onclick`, like here: +Por ejemplo, para asignar un handler `click` para un `input` podemos usar `onclick`, como aquí: ```html run ``` -On mouse click, the code inside `onclick` runs. +Al hacer click, el código dentro de `onclick` se ejecuta. -Please note that inside `onclick` we use single quotes, because the attribute itself is in double quotes. If we forget that the code is inside the attribute and use double quotes inside, like this: `onclick="alert("Click!")"`, then it won't work right. +Toma en cuenta que dentro de `onclick` usamos comillas simples, porque el atributo en sí va entre comillas dobles. Si olvidamos que el código está dentro del atributo y usamos comillas dobles dentro, así: `onclick="alert("Click!")"`, no funcionará correctamente. -An HTML-attribute is not a convenient place to write a lot of code, so we'd better create a JavaScript function and call it there. +Un atributo HTML no es un lugar conveniente para escribir un motón de código, así que mejor creamos una función JavaScript y la llamamos allí. -Here a click runs the function `countRabbits()`: +Aquí un click ejecuta la función `countRabbits()`: ```html autorun height=50 - + ``` -As we know, HTML attribute names are not case-sensitive, so `ONCLICK` works as well as `onClick` and `onCLICK`... But usually attributes are lowercased: `onclick`. +Como ya sabemos, los nombres de los atributos HTML no distinguen entre mayúsculas y minúsculas, entonces `ONCLICK` funciona bien al igual que `onClick` y `onCLICK`... Pero usualmente los atributos van con minúsculas: `onclick`. -### DOM property +### Propiedad del DOM -We can assign a handler using a DOM property `on`. +Podemos asignar un handler usando una propiedad del DOM `on`. -For instance, `elem.onclick`: +Por ejemplo, `elem.onclick`: ```html autorun - + ``` -If the handler is assigned using an HTML-attribute then the browser reads it, creates a new function from the attribute content and writes it to the DOM property. +Si el handler es asignado usando un atributo HTML entonces el navegador lo lee, crea una nueva función desde el contenido del atributo y lo escribe en la propiedad del DOM. -So this way is actually the same as the previous one. +Esta forma en realidad es la misma que ya habíamos visto antes. -These two code pieces work the same: +Estás dos piezas de código funcionan igual: -1. Only HTML: +1. Solo HTML: ```html autorun height=50 - + ``` 2. HTML + JS: ```html autorun height=50 - + ``` -In the first example, the HTML attribute is used to initialize the `button.onclick`, while in the second example -- the script, that's all the difference. +En el primer ejemplo el atributo HTML es usado para inicializar el `button.onclick`. Mientras que en el segundo ejemplo se usa el script, esa es toda la diferencia. -**As there's only one `onclick` property, we can't assign more than one event handler.** +**Como solo hay una propiedad `onclick`, no podemos asignar más de un handler.** -In the example below adding a handler with JavaScript overwrites the existing handler: +En el siguiente ejemplo se agrega un handler con JavaScript que sobrescribe el handler existente: ```html run height=50 autorun - + ``` -To remove a handler -- assign `elem.onclick = null`. +Para eliminar un handler, asigna `elem.onclick = null`. -## Accessing the element: this +## Accediendo al elemento: this -The value of `this` inside a handler is the element. The one which has the handler on it. +El valor de `this` dentro de un handler es el elemento. El cuál tiene el handler dentro. -In the code below `button` shows its contents using `this.innerHTML`: +En el siguiente código el `button` muestra su contenido usando `this.innerHTML`: ```html height=50 autorun - + ``` -## Possible mistakes +## Posibles errores -If you're starting to work with events -- please note some subtleties. +Si estás empezando a trabajar con eventos, por favor, nota algunas sutilezas. -We can set an existing function as a handler: +Nosotros podemos establecer una función existente como un handler: ```js function sayThanks() { - alert('Thanks!'); + alert('¡Gracias!'); } elem.onclick = sayThanks; ``` -But be careful: the function should be assigned as `sayThanks`, not `sayThanks()`. +Pero ten cuidado: la función debe ser asignada como `sayThanks`, no `sayThanks()`. ```js -// right +// correcto button.onclick = sayThanks; -// wrong +// incorrecto button.onclick = sayThanks(); ``` -If we add parentheses, then `sayThanks()` becomes is a function call. So the last line actually takes the *result* of the function execution, that is `undefined` (as the function returns nothing), and assigns it to `onclick`. That doesn't work. +Si agregamos paréntesis, entonces `sayThanks()` se convierte en una llamada de función. Por lo que en realidad la última linea toma el *resultado* de la ejecución de la función, que es `undefined` (ya que la función no devuelve nada), y lo asigna a `onclick`. Esto no funciona. -...On the other hand, in the markup we do need the parentheses: +...Por otro lado, en el markup necesitamos los paréntesis: ```html ``` -The difference is easy to explain. When the browser reads the attribute, it creates a handler function with body from the attribute content. +La diferencia es fácil de explicar. Cuando el navegador lee el atributo crea una función handler con cuerpo a partir del contenido del atributo. -So the markup generates this property: +Por lo que el markup genera esta propiedad: ```js button.onclick = function() { *!* - sayThanks(); // <-- the attribute content goes here + sayThanks(); // <-- el contenido del atributo va aquí */!* }; ``` -**Don't use `setAttribute` for handlers.** +**No uses `setAttribute` para handlers.** -Such a call won't work: +Tal llamada no funcionará: ```js run no-beautify -// a click on will generate errors, -// because attributes are always strings, function becomes a string +// un click sobre generará errores, +// debido a que los atributos siempre son strings, la función se convierte en un string document.body.setAttribute('onclick', function() { alert(1) }); ``` -**DOM-property case matters.** +**Las mayúsculas en las propiedades DOM importan.** -Assign a handler to `elem.onclick`, not `elem.ONCLICK`, because DOM properties are case-sensitive. +Asignar un handler a `elem.onclick`, en lugar de `elem.ONCLICK`, ya que las propiedades DOM son sensibles a mayúsculas. ## addEventListener -The fundamental problem of the aforementioned ways to assign handlers -- we can't assign multiple handlers to one event. +El problema fundamental de las formas ya mencionadas para asignar handlers es que no podemos asignar multiples handlers a un solo evento. -Let's say, one part of our code wants to highlight a button on click, and another one wants to show a message on the same click. +Digamos que una parte de nuestro código quiere resaltar un botón al hacer click, y otra quiere mostrar un mensaje en el mismo click. -We'd like to assign two event handlers for that. But a new DOM property will overwrite the existing one: +Nos gustaría asignar dos handlers de eventos para eso. Pero una nueva propiedad DOM sobrescribirá la que ya existe: ```js no-beautify input.onclick = function() { alert(1); } // ... -input.onclick = function() { alert(2); } // replaces the previous handler +input.onclick = function() { alert(2); } // reemplaza el handler anterior handler ``` -Developers of web standards understood that long ago and suggested an alternative way of managing handlers using special methods `addEventListener` and `removeEventListener`. They are free of such a problem. +Los desarrolladores de los estándares de la web entendieron eso hace mucho tiempo y sugirieron una forma alternativa de administrar los handlers utilizando los métodos especiales `addEventListener` and `removeEventListener`. Estos están libres de ese problema. -The syntax to add a handler: +La sintáxis para agregar un handler: ```js element.addEventListener(event, handler, [options]); ``` `event` -: Event name, e.g. `"click"`. +: Nombre del evento, por ejemplo: `"click"`. `handler` -: The handler function. +: La función handler. `options` -: An additional optional object with properties: - - `once`: if `true`, then the listener is automatically removed after it triggers. - - `capture`: the phase where to handle the event, to be covered later in the chapter . For historical reasons, `options` can also be `false/true`, that's the same as `{capture: false/true}`. - - `passive`: if `true`, then the handler will not call `preventDefault()`, we'll explain that later in . +: Un objeto adicional, opcional, con las propiedades: + - `once`: si es `true` entonces el listener se remueve automáticamente después de activarlo. + - `capture`: la fase en la que se controla el evento, que será cubierta en el capítulo . Por razones históricas, `options` también puede ser `false/true`, lo que es igual a `{capture: false/true}`. + - `passive`: si es `true` entonces el handler no llamará a `preventDefault()`, esto lo explicaremos más adelante en . -To remove the handler, use `removeEventListener`: +Para remover el handler, usa `removeEventListener`: ```js element.removeEventListener(event, handler, [options]); ``` -````warn header="Removal requires the same function" -To remove a handler we should pass exactly the same function as was assigned. +````warn header="Remover requiere la misma función" +Para remover un handler deberemos pasar exactamente la misma función que asignamos. -This doesn't work: +Esto no funciona: ```js no-beautify -elem.addEventListener( "click" , () => alert('Thanks!')); +elem.addEventListener( "click" , () => alert('¡Gracias!')); // .... -elem.removeEventListener( "click", () => alert('Thanks!')); +elem.removeEventListener( "click", () => alert('¡Gracias!')); ``` -The handler won't be removed, because `removeEventListener` gets another function -- with the same code, but that doesn't matter, as it's a different function object. +El handler no será removido porque `removeEventListener` obtiene otra función, con el mismo código, pero eso no importa, ya que es un objeto de función diferente. -Here's the right way: +Aquí está la manera correcta: ```js function handler() { - alert( 'Thanks!' ); + alert( '¡Gracias!' ); } input.addEventListener("click", handler); @@ -258,112 +258,112 @@ input.addEventListener("click", handler); input.removeEventListener("click", handler); ``` -Please note -- if we don't store the function in a variable, then we can't remove it. There's no way to "read back" handlers assigned by `addEventListener`. +Por favor nota que si no almacenamos la función en una variable entonces no podremos removerla. No hay forma de "volver a leer" los handlers asignados por `addEventListener`. ```` -Multiple calls to `addEventListener` allow to add multiple handlers, like this: +Multiples llamadas a `addEventListener`permiten agregar multiples handlers, como este: ```html run no-beautify - + ``` -As we can see in the example above, we can set handlers *both* using a DOM-property and `addEventListener`. But generally we use only one of these ways. +Como podemos ver en el ejemplo anterior, podemos establecer handlers *tanto* usando un propiedad DOM como `addEventListener` juntos. Pero por lo general solo usamos una de esas maneras. -````warn header="For some events, handlers only work with `addEventListener`" -There exist events that can't be assigned via a DOM-property. Only with `addEventListener`. +````warn header="Para algunos eventos, los handlers solo funcionan con `addEventListener`" +Hay eventos que no pueden ser asignados por medio de una propiedad del DOM. Solamente con `addEventListener`. -For instance, the `DOMContentLoaded` event, that triggers when the document is loaded and DOM is built. +Por ejemplo, el evento `DOMContentLoaded`, que se activa cuando el documento está cargado y el DOM está construido. ```js -// will never run +// nunca se ejecutará document.onDOMContentLoaded = function() { - alert("DOM built"); + alert("DOM construido"); }; ``` ```js -// this way it works +// Así sí funciona document.addEventListener("DOMContentLoaded", function() { - alert("DOM built"); + alert("DOM construido"); }); ``` -So `addEventListener` is more universal. Although, such events are an exception rather than the rule. +Por lo que `addEventListener` es más universal. Aún así, tales eventos son una excepción más que la regla. ```` -## Event object +## Objeto del evento -To properly handle an event we'd want to know more about what's happened. Not just a "click" or a "keydown", but what were the pointer coordinates? Which key was pressed? And so on. +Pero para manejar correctamente un evento nos gustaría saber todavía más acerca de lo que está pasando. No solo si fue un "click" o un "teclazo", sino ¿cuáles eran coordenadas del cursor o qué tecla fue oprimida? Y así. -When an event happens, the browser creates an *event object*, puts details into it and passes it as an argument to the handler. +Cuando un evento ocurre, el navegador crea un *objeto del evento* que coloca los detalles dentro y los pasa como un argumento al handler. -Here's an example of getting pointer coordinates from the event object: +Aquí hay un ejemplo para obtener las coordenadas del cursor a partir del objeto del evento: ```html run - + ``` -Some properties of `event` object: +Algunas propiedades del objeto `event`: `event.type` -: Event type, here it's `"click"`. +: Tipo de evento, en este caso fue `"click"`. `event.currentTarget` -: Element that handled the event. That's exactly the same as `this`, unless the handler is an arrow function, or its `this` is bound to something else, then we can get the element from `event.currentTarget`. +: Elemento que maneja el evento. Lo que exactamente igual a `this`, a menos que el handler sea una función de flecha o su `this` esté vinculado a otra cosa, entonces podemos obtener el elemento desde `event.currentTarget`. `event.clientX / event.clientY` -: Window-relative coordinates of the cursor, for pointer events. +: Coordenadas del cursor relativas a la ventana, para eventos de cursor. -There are more properties. Many of them depend on the event type: keyboard events have one set of properties, pointer events - another one, we'll study them later when we come to different events in details. +Hay más propiedades. La mayoría dependen del tipo de evento: los eventos del teclado tienen algunas propiedades establecidas, las de cursor otras, las estudiaremos después cuando lleguemos a los detalles de diferentes eventos. -````smart header="The event object is also available in HTML handlers" -If we assign a handler in HTML, we can also use the `event` object, like this: +````smart header="El objeto del evento también está disponible para handlers HTML" +Si asignamos un handler en HTML también podemos usar el objeto `event`, así: ```html autorun height=60 ``` -That's possible because when the browser reads the attribute, it creates a handler like this: `function(event) { alert(event.type) }`. That is: its first argument is called `"event"`, and the body is taken from the attribute. +Esto es posible porque cuando el navegador lee el atributo, crea un handler como este: `function(event) { alert(event.type) }`. Lo que significa que el primer argumento es llamado `"event"` y el cuerpo es tomado del atributo. ```` -## Object handlers: handleEvent +## Objetos handlers: handleEvent -We can assign not just a function, but an object as an event handler using `addEventListener`. When an event occurs, its `handleEvent` method is called. +Podemos asignar no solo una función, sino un objeto como handler del evento usando `addEventListener`. Cuando el evento ocurre, el método `handleEvent` es llamado. -For instance: +Por ejemplo: ```html run - + ``` -As we can see, when `addEventListener` receives an object as the handler, it calls `obj.handleEvent(event)` in case of an event. +Como podemos ver, cuando `addEventListener` recibe como handler a un objeto, llama a `obj.handleEvent(event)` en caso de un evento. -We could also use a class for that: +También podríamos usar una clase para ello: ```html run - + ``` -Here the same object handles both events. Please note that we need to explicitly setup the events to listen using `addEventListener`. The `menu` object only gets `mousedown` and `mouseup` here, not any other types of events. +Aquí el mismo objeto maneja ambos eventos. Nota que necesitamos configurar explícitamente los eventos a escuchar usando `addEventListener`. El objeto `menu` solo obtiene `mousedown` y `mouseup` aquí, no hay ningún otro tipo de eventos. -The method `handleEvent` does not have to do all the job by itself. It can call other event-specific methods instead, like this: +El método `handleEvent` no tiene que hacer todo el trabajo por sí solo. En su lugar puede llamar a otros métodos específicos de eventos, como este: ```html run - + ``` -Now event handlers are clearly separated, that may be easier to support. +Ahora los handlers del evento están claramente separados, lo que puede ser más fácil de mantener. -## Summary +## Resumen -There are 3 ways to assign event handlers: +Hay tres formas de asignar handlers: -1. HTML attribute: `onclick="..."`. -2. DOM property: `elem.onclick = function`. -3. Methods: `elem.addEventListener(event, handler[, phase])` to add, `removeEventListener` to remove. +1. Atributos HTML: `onclick="..."`. +2. Propiedades del DOM: `elem.onclick = function`. +3. Métodos: `elem.addEventListener(event, handler[, phase])` para agregar ó `removeEventListener` para remover. -HTML attributes are used sparingly, because JavaScript in the middle of an HTML tag looks a little bit odd and alien. Also can't write lots of code in there. +Los atributos HTML se usan con moderación, porque JavaScript en medio de una etiqueta HTML luce un poco extraño y ajeno. Además no podemos escribir montones de código ahí. -DOM properties are ok to use, but we can't assign more than one handler of the particular event. In many cases that limitation is not pressing. +Las propiedades del DOM son buenas para usar, pero no podemos asignar más de un handler a un evento en particular. En la mayoría de casos esta limitación no es apremiante. -The last way is the most flexible, but it is also the longest to write. There are few events that only work with it, for instance `transitionend` and `DOMContentLoaded` (to be covered). Also `addEventListener` supports objects as event handlers. In that case the method `handleEvent` is called in case of the event. +La última forma es la más flexible, pero también es la más larga para escribir. Hay pocos eventos que solo funcionan con ésta, por ejemplo `transitionend` y `DOMContentLoaded` (que veremos después). Además `addEventListener` soporta objetos como handlers de eventos. En este caso `handleEvent` es llamado en caso del evento. -No matter how you assign the handler -- it gets an event object as the first argument. That object contains the details about what's happened. +No importa como asignes el handler, este obtiene un objeto como primer argumento. Este objeto contiene los detalles sobre lo que pasó. -We'll learn more about events in general and about different types of events in the next chapters. +Vamos a aprender más sobre eventos en general y sobre diferentes tipos de eventos en los siguientes capítulos.