recursal/MDN huggingface dataset:
XMLHttpRequest.onreadystatechange
=================================

Un `EventHandler` (en-US) que es invocado cada vez que cambia el atributo `readyState`. La retrollamada (callback) es invocada desde el hilo (thread) perteneciente a la interfaz de usuario. La propiedad **`XMLHttpRequest.onreadystatechange`** contiene el manejador del evento que es invocado cuando se dispara el evento `readystatechange` (en-US), lo cual sucede cada vez que cambia el valor de la propiedad `readyState` (en-US) de `XMLHttpRequest`. La retrollamada (callback) es invocada desde el hilo perteneciente a la interfaz de usuario.

**Advertencia:** **Aviso:** No debería ser usado con peticiones síncronas ni tampoco en código nativo.

El evento `readystatechange` no se disparará cuando una petición `XMLHttpRequest` sea cancelada mediante el método abort().

Sintaxis
--------
```

XMLHttpRequest.onreadystatechange = callback;
```

### Valores

* `callback` es la función de retrollamada que será ejecutada (invocada) cuando cambie el valor de la propiedad `readyState`.
Ejemplo
-------


```js
var xhr = new XMLHttpRequest(),
  method = "GET",
  url = "https://developer.mozilla.org/";

xhr.open(method, url, true);
xhr.onreadystatechange = function () {
  if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
    console.log(xhr.responseText);
  }
};
xhr.send();
```

Especificaciones
----------------

| Specification |
| --- |
| XMLHttpRequest Standard # event-xhr-readystatechange |
| XMLHttpRequest Standard # handler-xhr-onreadystatechange |

Compatibilidad con navegadores
------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
loadend
=======

El evento `loadend` es emitido cuando el progreso de la carga de un recurso se ha detenido (e.g. despues que "error", "abort", o "load" han sido emitidos). Por ejemplo, esto aplica a las llamadas de `XMLHttpRequest`, y al contenido de un elemento `<img>` o `<video>`.

Información General
-------------------

Especificación

Progress

Interfaz

ProgressEvent

Bubbles

No

Cancelable

No

Target

`HTMLImageElement`, Por Ejemplo

Acción por Defecto

None

Propiedades
-----------

| Property | Type | Description |
| --- | --- | --- |
| `target` Read only  | `EventTarget` | The event target (the topmost target in the DOM tree). |
| `type` Read only  | `DOMString` | The type of event. |
| `bubbles` Read only  | `Boolean` | Whether the event normally bubbles or not. |
| `cancelable` Read only  | `Boolean` | Whether the event is cancellable or not. |
| `lengthComputable`Read only  | `Boolean` | Specifies whether or not the total size of the transfer is known. Read only. |
| `loaded` Read only  | unsigned long (long) | The number of bytes transferred since the beginning of the operation. This doesn't include headers and other overhead, but only the content itself. Read only. |
| `total` Read only  | unsigned long (long) | The total number of bytes of content that will be transferred during the operation. If the total size is unknown, this value is zero. Read only. |

Eventos Relacionados
--------------------

* `loadstart` (en-US)
* `progress` (en-US)
* `error` (en-US)
* `abort` (en-US)
* `load`
* `loadend`
Ver También
-----------

* Monitoreando progreso (en-US)
XMLHttpRequest.responseText
===========================

La propiedad **`XMLHttpRequest.responseText`** devuelve un **`DOMString`** que contiene la respuesta a la consulta como un texto o null si la consulta no tuvo exito o aun no ha sido completada. la propiedad **`responseText`** tendra una respuesta parcial como retorno aunque la consulta no haya sido completada. si **responseType** contiene algo que no sea un string vacio o un "text", el acceso a **responseText** sera **`throw InvalidStateError exception`**.

Ejemplo. Lanza una excepción `InvalidStateError`
------------------------------------------------


```js
var xhr = new XMLHttpRequest();
xhr.open("GET", "/server", true);

// If specified, responseType must be empty string or "text"
xhr.responseType = "text";

xhr.onload = function () {
  if (xhr.readyState === xhr.DONE) {
    if (xhr.status === 200) {
      console.log(xhr.response);
      console.log(xhr.responseText);
    }
  }
};

xhr.send(null);
```

Especificaciones
----------------

| Specification |
| --- |
| XMLHttpRequest Standard # the-responsetext-attribute |

Compatibilidad con navegadores
------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
event.initMouseEvent
====================

**Obsoleto:** Esta característica ya no se recomienda. Aunque es posible que algunos navegadores aún lo admitan, probablemente ya se ha eliminado de los estándares web relevantes, está en proceso de eliminación o solo se conserva por motivos de compatibilidad. Evite usarlo y actualice el código existente si es posible; consulte la tabla de compatibilidad en la parte inferior de esta página para orientar su decisión. Tenga en cuenta que esta característica puede dejar de funcionar en cualquier momento.

**Nota:** **No utilize este método porque está obsoleto.**

Usa constructores de eventos específicos, como `MouseEvent()` (en-US). La página Creando y disparando eventos (en-US) da más información sobre cómo usarlos.

### Resumen

Asigna el valor inicial de un evento de ratón una vez creado (normalmente usando el método document.createEvent).

### Sintaxis
```

event.initMouseEvent(type,canBubble,cancelable,view,detail,screenX,screenY,clientX,clientY,ctrlKey,altKey,shiftKey,metaKey,button,relatedTarget);
```


`type`

la cadena del type. Los tipos posibles para un evento de ratón incluyen: `click`, `mousedown`, `mouseup`, `mouseover`, `mousemove`, `mouseout`.

`canBubble`

si el elemento puede ser recurrente. Pone el valor de event.bubbles.

`cancelable`

si la acción inicial del evento puede o no ser cancelada. Pone el valor de event.cancelable.

`view`

el valor AbstractView del evento. Aquí debes pasar el objeto window. Pone el valor de event.view.

`detail`

el contador de clic del evento. Pone el valor de event.detail.

`screenX`

la coordenada x en pantalla donde ha ocurrido el evento. Pone el valor de event.screenX.

`screenY`

la coordenada y en pantalla donde ha ocurrido el evento. Pone el valor de event.screenY.

`clientX`

la coordenada client x donde ha ocurrido el evento. Pone el valor de event.clientX.

`clientY`

la coordenada client y donde ha ocurrido el evento. Pone el valor de event.clientY.

`ctrlKey`

si se ha pulsado o no la tecla Control mientras ha ocurrido el evento. Pone el valor de event.ctrlKey.

`altKey`

si se ha pulsado o no la tecla Alt mientras ha ocurrido el evento. Pone el valor de event.altKey.

`shiftKey`

si se ha pulsado o no la tecla Mayúsculas mientras ha ocurrido el evento. Pone el valor de event.shiftKey.

`metaKey`

si se ha pulsado o no una meta tecla mientras ha ocurrido el evento. Pone el valor de event.metaKey.

`button`

el ratón del evento event.button.

`relatedTarget`

el destino del evento related EventTarget. Sólo se usa con algún tipo de evento (ejemplo: `mouseover` y `mouseout`). En otros casos, devuelve `null`.

### Especificación

DOM Level 2 Events: initMouseEvent
MouseEvent.shiftKey
===================

El evento de **`MouseEvent.shiftKey`** es una propiedad de solo lectura que indica si la tecla de `shift` se presionó (`true`) o no (`false`).

Sintaxis
--------
```

var shiftKeyPressed = instanceOfMouseEvent.shiftKey
```

### Valor que retorna

Un valor booleano

Ejemplo
-------


```js
<html>
<head>
<title>Ejemplo de shiftKey</title>

<script type="text/javascript">

function showChar(e){
  alert(
    "Tecla presionada: " + String.fromCharCode(e.charCode) + "\n"
    + "charCode: " + e.charCode + "\n"
    + "SHIFT presionada: " + e.shiftKey + "\n"
    + "ALT presionado: " + e.altKey + "\n"
  );
}

</script>
</head>

<body onkeypress="showChar(event);">
<p>Presione cualquier tecla, con o sin la tecla SHIFT.<br />
También puede utilizar SHIFT junto a la tecla ALT.</p>
</body>
</html>
```

Especificaciones
----------------

| Specification |
| --- |
| UI Events # dom-mouseevent-shiftkey |

Compatibilidad con navegadores
------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Ver más
-------

* `MouseEvent`
event.pageX
===========

### Sumario

Retorna la coordena horizontal del evento, relativo al documento completo.

### Sintaxis
```

pageX =event.pageX;
```


`pageX` es un valor entero expresado en pixels para la corrdenada X del puntero del ratón, relativo al documento entero, cuando se produjo el evento. Esta propiedad toma en cuenta la barra de desplazamiento horizontal de la página.

### Ejemplo
```

<html>
<head>
<title>pageX\pageY & layerX\layerY example</title>

<script type="text/javascript">

function showCoords(evt){
  var form = document.forms.form_coords;
  var parent_id = evt.target.parentNode.id;
  form.parentId.value = parent_id;
  form.pageXCoords.value = evt.pageX;
  form.pageYCoords.value = evt.pageY;
  form.layerXCoords.value = evt.layerX;
  form.layerYCoords.value = evt.layerY;
}

</script>

<style type="text/css">

 #d1 {
  border: solid blue 1px;
  padding: 20px;
 }

 #d2 {
  position: absolute;
  top: 180px;
  left: 80%;
  right:auto;
  width: 40%;
  border: solid blue 1px;
  padding: 20px;
 }

 #d3 {
  position: absolute;
  top: 240px;
  left: 20%;
  width: 50%;
  border: solid blue 1px;
  padding: 10px;
 }

</style>
</head>

<body onmousedown="showCoords(event)">

<p>To display the mouse coordinates please click anywhere on the page.</p>

<div id="d1">
<span>This is an un-positioned div so clicking it will return
layerX/layerY values almost the same as pageX/PageY values.</span>
</div>

<div id="d2">
<span>This is a positioned div so clicking it will return layerX/layerY
values that are relative to the top-left corner of this positioned
element. Note the pageX\pageY properties still return the
absolute position in the document, including page scrolling.</span>

<span>Make the page scroll more! This is a positioned div so clicking it
will return layerX/layerY values that are relative to the top-left
corner of this positioned element. Note the pageX\pageY properties still
return the absolute position in the document, including page
scrolling.</span>
</div>

<div id="d3">
<form name="form_coords">
 Parent Element id: <input type="text" name="parentId" size="7" /><br />
 pageX:<input type="text" name="pageXCoords" size="7" />
 pageY:<input type="text" name="pageYCoords" size="7" /><br />
 layerX:<input type="text" name="layerXCoords" size="7" />
 layerY:<input type="text" name="layerYCoords" size="7" />
</form>
</div>

</body>
</html>
```

### Specificación

No es parte del estándar público.
Request.headers
===============

La propiedad de solo lectura **headers** de la interface `Request` es un objeto de tipo `Headers` (en-US), asociado a la petición.

Sintax
------
```

var myHeaders = request.headers;
```

### Valor

Un objeto de tipo `Headers` (en-US).

Ejemplo
-------

En el siguiente fragmento de código, crearemos una nueva petición utilizando el constructor del `Request.Request()` (en-US) (para un archivo de imagen ubicado en el mismo directorio del script), guardamos el encabezado de la petición en una variable:


```js
var myRequest = new Request("flowers.jpg");
var myHeaders = myRequest.headers; // Headers {}
```


Para agregar encabezados al objeto `Headers` (en-US) usamos `Headers.append` (en-US); creamos una nueva petición usando el parametro init del constructor y asignamos los encabezados como una opción del parametro init:


```js
var myHeaders = new Headers();
myHeaders.append("Content-Type", "image/jpeg");

var myInit = {
  method: "GET",
  headers: myHeaders,
  mode: "cors",
  cache: "default",
};

var myRequest = new Request("flowers.jpg", myInit);

myContentType = myRequest.headers.get("Content-Type"); // returns 'image/jpeg'
```

Especificaciones
----------------

| Specification |
| --- |
| Fetch Standard # ref-for-dom-request-headers② |

Compatibilidad con navegadores
------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Ver también
-----------

* ServiceWorker API (en-US)
* HTTP access control (CORS)
* HTTP
Response.ok
===========


 La propiedad de solo lectura **`ok`** de la interfaz `Response` contiene un Booleano que indica si la respuesta fue exitosa (estado en un rango de 200 a 299) o no.
Sintaxis
--------
```

var miOK = respuesta.ok;
```

### Valor

Un `Boolean` (en-US).

Ejemplo
-------

En nuestro ejemplo de Fetch Response (véase Fetch Response en vivo) creamos un nuevo `Request` usando el constructor `Request()` (en-US), pasando una ruta a un JPG. Luego traemos esta petición usando `fetch()` (en-US), extraemos un blob de la respuesta usando `Body.blob` (en-US), creamos un objeto URL usando `URL.createObjectURL`, y mostrar esto en un `<img>`.

**Nota:** en la parte superior del bloque de `fetch()` imprimimos el valor de `ok` en la consola.


```js
var imagen = document.querySelector("img");

var peticion = new Request("flowers.jpg");

fetch(peticion).then(function (respuesta) {
  console.log(respuesta.ok); //retorna true si la respuesta fue exitosa
  respuesta.blob().then(function (miBlob) {
    var objectoURL = URL.createObjectURL(miBlob);
    imagen.src = objectURL;
  });
});
```

Especificaciones
----------------

| Specification |
| --- |
| Fetch Standard # ref-for-dom-response-ok② |

Compatibilidad con navegadores
------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Ver también
-----------

* ServiceWorker API (en-US)
* HTTP access control (CORS)
* HTTP
Response()
==========

El constructor **`Response()`** crea un nuevo objeto `Response`

Sintaxis
--------
```

var miRespuesta = new Response(cuerpo,opciones);
```

### Parámetros

*cuerpo* Opcional

Un objeto que define el cuerpo de la respuesta. Puede ser `null`, o uno de los siguientes elementos:

* `Blob`
* `BufferSource`
* `FormData`
* `ReadableStream` (en-US)
* `URLSearchParams`
* `USVString` (en-US)

*opciones* Opcional

Un objeto que contiene las opciones de personalización para la respuesta HTTP. Las opciones posibles son:

* `status`: El código de estado HTTP, p.e.: `200`.
* `statusText`: El mensaje de estado asociado con el código de estado HTTP, p.e.: `OK`.
* `headers`: Cualquier cabecera que quieras añadir a la respuesta. Puede ser un objeto `Headers` (en-US) o un objeto literal de `ByteString` (en-US) pares claves/valor (ver Cabeceras HTTP para más información).

Ejemplos
--------

En nuestro ejemplo Fetch Response (ver Fetch Response live) creamos un nuevo objeto `Response` usando el constructor, pasándole un nuevo objeto `Blob` como cuerpo, y un objeto con `status` y`statusText` como opciones:


```js
var miBlob = new Blob();
var opciones = { status: 200, statusText: "Flipante!" };
var miRespuesta = new Response(miBlob, opciones);
```

Especificaciones
----------------

| Specification |
| --- |
| Fetch Standard # ref-for-dom-response① |

Compatibilidad con navegadores
------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Relacionado
-----------

* ServiceWorker API (en-US)
* HTTP access control (CORS)
* HTTP
Response.status
===============

La propiedad de solo lectura **`status`** de la interfaz `Response` contiene el código de estado de la respuesta (ejm., `200` para un éxito).

Sintaxis
--------
```

var myStatus = response.status;
```

### Valor

Un número (para ser preciso, uno corto sin signo).

Ejemplo
-------

En nuestro ejemplo Fetch Response (ver Fetch Response en vivo) nosotros creamos un nuevo objeto `Request` usando el constructor `Request()` (en-US), pasándole una ruta JPG. Luego buscamos esta solicitud usando `fetch()` (en-US), extraemos un blob de la respuesta usando `Body.blob` (en-US), creamos un objeto URL fuera de ella usando `URL.createObjectURL`, y mostramos esto en un `<img>`.

Tenga en cuenta que en la parte superior del bloque `fetch()` registramos el valor de la respuesta `status` en la consola.


```js
var myImage = document.querySelector("img");

var myRequest = new Request("flowers.jpg");

fetch(myRequest).then(function (response) {
  console.log(response.status); // returns 200
  response.blob().then(function (myBlob) {
    var objectURL = URL.createObjectURL(myBlob);
    myImage.src = objectURL;
  });
});
```

Especificaciones
----------------

| Specification |
| --- |
| Fetch Standard # ref-for-dom-response-status① |

Compatibilidad con navegadores
------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Ver también
-----------

* API de Servicio Worker (en-US)
* Control de acceso HTTP (CORS)
* HTTP
HTMLElement: dragstart event
============================

El evento `dragstart` se dispara cuando el usuario arrastra un elemento o una selección de texto.

Sintaxis
--------

Usar el nombre del evento en métodos como `addEventListener()` , o establecer una propiedad de controlador de eventos.


```js
addEventListener("dragstart", (event) => {});

ondragstart = (event) => {};
```

Tipo de Evento
--------------

Un `DragEvent`. Hereda de `Event`.

Event

UIEvent

MouseEvent

DragEventPropiedades del Evento
----------------------

*En adición a las propiedades listadas, a continuación las propiedades de la interfaz principal, `Event`, están disponibles.*

`DragEvent.dataTransfer` (en-US) Read only 

Los datos que se transfieren durante una interacción de arrastrar y soltar.

Ejemplos
--------

### Configurar la opacidad al inicio del movimiento

En este ejemplo, tenemos un elemento arrastrable dentro de un contenedor. Intenta agarrar el elemento, arrastralo y luego sueltalo.

Escuchamos el evento `dragstart` para hacer que el elemento sea medio transparente mientras se arrastra.

For a more complete example of drag (en-US) and drop, see the page for the drag event.

#### HTML


```html
<div id="container">
  <div id="draggable" draggable="true">Este div es arrastrable</div>
</div>
<div class="dropzone"></div>
```


#### CSS


```css
body {
  /\* Impedir que el usuario seleccione texto en el ejemplo \*/
  user-select: none;
}
#draggable {
  text-align: center;
  background: white;
}
#container {
  width: 200px;
  height: 20px;
  background: blueviolet;
  padding: 10px;
}
.dragging {
  opacity: 0.5;
}
```


#### JavaScript


```js
const source = document.getElementById("draggable");
source.addEventListener("dragstart", (event) => {
  // hazlo medio transparente
  event.target.classList.add("dragging");
});
source.addEventListener("dragend", (event) => {
  // restablecer la transparencia
  event.target.classList.remove("dragging");
});
```


#### Resultado

Especificaciones
----------------

| Specification |
| --- |
| HTML Standard # ix-handler-ondragstart |
| HTML Standard # event-dnd-dragstart |

Compatibilidad con navegadores
------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Véase también
-------------

* Otros eventos de arrastre:
    + `drag` (en-US)
    + `dragend` (en-US)
    + `dragover`
    + `dragenter` (en-US)
    + `dragleave` (en-US)
    + `drop` (en-US)
* Este evento en otros objetivos:
    + `Window`: `dragstart` event
    + `Document`: `dragstart` (en-US) event
    + `SVGElement` (en-US): `dragstart` event
HTMLElement.offsetLeft
======================

La propiedad de solo lectura **`HTMLElement.offsetLeft`** devuelve el número de *píxeles a la izquierda* del elemento actual con respecto al nodo `HTMLElement.offsetParent` .

Para los elementos de bloque, `offsetTop`, `offsetLeft`, `offsetWidth`, y `offsetHeight` determina el borde de la caja del elemento relativo al `offsetParent.`

Sin embargo, para los elementos inline (por ejemplo **span**), que puede ser cortado de un línea a otra, `offsetTop,` and `offsetLeft` describe la posición de la primer borde de la caja (usar `Element.getClientRects()` para obtener el ancho y el alto), mientras que `offsetWidth` y `offsetHeight` describen las dimensiones de los límites (usar `Element.getBoundingClientRect()` para obtener su posición). Por lo tanto, una caja con left, top, width y height del `offsetLeft`, `offsetTop`, `offsetWidth`, `offsetHeight`, no definirá los límites para un span con texto que continúa en otra línea.

Sintaxis
--------
```

left = element.offsetLeft;
```


`left` es un entero que representa la posición de la izquierda del elemento actual con respecto al padre.

Ejemplo
-------
```

var colorTable = document.getElementById("t1");
var tOLeft = colorTable.offsetLeft;

if (tOLeft > 5) {
  // posición izquierda muy larga: hacer algo
}
```


This example shows a 'long' sentence that wraps within a div with a blue border, and a red box that one might think should describe the boundaries of the span.

![Image:offsetLeft.jpg](/es/docs/Web/API/HTMLElement/offsetLeft/offsetleft.jpg)
```

<div style="width: 300px; border-color:blue;
  border-style:solid; border-width:1;">
  <span>Short span. </span>
  <span id="long">Long span that wraps within this div.</span>
</div>

<div id="box" style="position: absolute; border-color: red;
  border-width: 1; border-style: solid; z-index: 10">
</div>

<script>
  var box = document.getElementById("box");
  var long = document.getElementById("long");
  box.style.left = long.offsetLeft + document.body.scrollLeft + "px";
  box.style.top = long.offsetTop + document.body.scrollTop + "px";
  box.style.width = long.offsetWidth + "px";
  box.style.height = long.offsetHeight + "px";
</script>
```

Especificaciones
----------------

| Specification |
| --- |
| CSSOM View Module # dom-htmlelement-offsetleft |

Compatibilidad con navegadores
------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `HTMLElement.offsetParent`, `HTMLElement.offsetTop`, `HTMLElement.offsetWidth`, `HTMLElement.offsetHeight`
HTMLElement.offsetParent
========================

La propiedad de solo lectura **`HTMLElement.offsetParent`** retorna una referencia al objeto, el cual es el elemento contenedor posicionado más cercano (más cercano en la jerarquía contenedora). Si el elemento es no-posicionado, `td`, `th`, `table` o el `body` más cercano es retornado.

`offsetParent` retorna `null` cuando el elemento `style.display` tiene asignado `none`. `offsetParent` es útil porque `offsetTop` y `offsetLeft` son relativos a su borde de relleno.

Sintaxis
--------
```

parentObj = element.offsetParent;
```


* *parentObj* es una referencia de objeto al elemento en el cual el elemento actual es offset.
Especificaciones
----------------

| Specification |
| --- |
| CSSOM View Module # dom-htmlelement-offsetparent |

Compatibilidad con navegadores
------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.