recursal/MDN huggingface dataset:
HTMLElement: load event
=======================

The **`load`** event fires for elements containing a resource when the resource has successfully loaded. Currently, the list of supported HTML elements are: `<body>`, `<embed>`, `<iframe>`, `<img>`, `<link>`, `<object>`, `<script>`, `<style>`, and`<track>`.

**Note:** The `load` event on `HTMLBodyElement` is actually an alias for the `window.onload` event. Therefore, the `load` event will only fire on the `<body>` element once all of the document's resources have loaded or errored. However, for the sake of clarity, it is recommended that the event handler is attached to the `window` object directly rather than on `HTMLBodyElement`.

This event is not cancelable and does not bubble.

Syntax
------

Use the event name in methods like `addEventListener()`, or set an event handler property.


```js
elt.addEventListener("load", (event) => { ... });
// or
elt.onload = (event) => { ... };
```

Event type
----------

A generic `Event`.

Examples
--------

This example prints to the screen whenever the `<img>` element successfully loads its resource.

### HTML


```html
<img id="image" src="favicon144.png" alt="MDN logo" width="72" />
<div><button onclick="reload()">Reload</button></div>
```

### JavaScript


```js
const image = document.getElementById("image");
image.onload = () => {
  document.body.innerHTML += "<div>loaded!</div>";
};

function reload() {
  image.src = "favicon144.png";
}
```

### Result

Specifications
--------------

#### No specification found

No specification data found for `api.HTMLElement.load_event`.  
Check for problems with this page or contribute a missing `spec_url` to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.

Browser compatibility
---------------------

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

See also
--------

* Related events
    + Window: `load` event
    + Window: `error` event
HTMLElement: mscandidatewindowhide event
========================================

**Non-standard:** This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

The **`mscandidatewindowhide`** event is thrown after the Input Method Editor (IME) candidate window closes and is fully hidden.

This proprietary method is specific to Internet Explorer.

The handler of this event will see that the `isCandidateWindowVisible` method returns `false`, and no `ClientRect` object is returned from `getCandidateWindowClientRect()`.

Web applications need only register for this event once per element (the handler will remain valid for the lifetime of the element).

Syntax
------

Use the event name in methods like `addEventListener()`, or set an event handler property.


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

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

Event type
----------

A generic `Event` with no added properties.

See also
--------

* Microsoft API extensions
* Related events: `mscandidatewindowupdate` and `mscandidatewindowshow`
HTMLElement: cancel event
=========================

The **`cancel`** event is fired by `<input>` and `<dialog>` elements. The event is fired when the user cancels the currently open dialog by closing it with the `Esc` key. It is also fired by the file input when the user cancels the file picker dialog via the `Esc` key or the cancel button and when the user re-selects the same files that were previously selected.

This event does not bubble.

When a `<dialog>` is dismissed with the `Esc` key, both the `cancel` and `close` events are fired.

Syntax
------

Use the event name in methods like `addEventListener()`, or set an event handler property.


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

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

Event type
----------

A generic `Event`.

Examples
--------

### Canceling a dialog

#### HTML


```html
<dialog class="example-dialog">
  <button class="close" type="reset">Close</button>
</dialog>

<button class="open-dialog">Open dialog</button>

<div class="result"></div>
```


```
button,
div {
  margin: 0.5rem;
}
```


#### JavaScript


```js
const result = document.querySelector(".result");

const dialog = document.querySelector(".example-dialog");

dialog.addEventListener("cancel", (event) => {
  result.textContent = "dialog was canceled";
});

const openDialog = document.querySelector(".open-dialog");
openDialog.addEventListener("click", () => {
  if (typeof dialog.showModal === "function") {
    dialog.showModal();
    result.textContent = "";
  } else {
    result.textContent = "The dialog API is not supported by this browser";
  }
});

const closeButton = document.querySelector(".close");
closeButton.addEventListener("click", () => {
  dialog.close();
});
```


#### Result

### Canceling an input element

#### HTML


```html
<label for="file">Select or file. Or don't.</label>
<input type="file" id="file" name="file" />

<div id="result"></div>
```


```
div {
  margin-bottom: 10px;
}
```


#### JavaScript


```js
const elem = document.getElementById("file");

const result = document.getElementById("result");

elem.addEventListener("cancel", () => {
  result.textContent = "Canceled.";
});

elem.addEventListener("change", () => {
  if (elem.files.length == 1) {
    result.textContent = "File Selected.";
  }
});
```


#### Result

Open the file selector, then close the selection dialog with the escape key or the cancel button. Both of these will cause the cancel event to be fired. Also, try selecting a local file on your machine; then reopen the file selection window and reselect the same file. This too causes the cancel event to be fired.

Specifications
--------------

#### No specification found

No specification data found for `api.HTMLElement.cancel_event`.  
Check for problems with this page or contribute a missing `spec_url` to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.

Browser compatibility
---------------------

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

See also
--------

* HTML `<input>` element
* HTML `<dialog>` element
* `close`
HTMLElement: translate property
===============================

The **`translate`** property of the `HTMLElement` interface indicates whether an element's attribute values and the values of its `Text` node children are to be translated when the page is localized, or whether to leave them unchanged.

It reflects the value of the `translate` HTML global attribute.

Value
-----

A boolean value that is `true` if an element's attribute values and the values of its `Text` node children are to be translated when the page is localized, `false` otherwise.

Examples
--------

The following example shows how to enable or disable translation via script:


```html
<div>
  <span>The content may always be translated: </span>
  <span translate="yes">El contenido será traducido</div>
</div>
<div>
  <span id="translate-label">The content may be translated:</span>
  <span id="translate-element" translate="no">El contenido puede ser traducido.</div>
</div>
<input id="translate-controller" type="checkbox" /> Enable translation
```



```js
const label = document.getElementById("translate-label");
const element = document.getElementById("translate-element");
const controller = document.getElementById("translate-controller");

controller.addEventListener("change", (e) => {
  if (controller.checked) {
    element.translate = true;
    label.innerText = "The content may be translated:";
  } else {
    element.translate = false;
    label.innerText = "The content may not be translated:";
  }
});
```

Specifications
--------------

| Specification |
| --- |
| HTML Standard # dom-translate |

Browser compatibility
---------------------

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

See also
--------

* `translate` HTML global attribute
HTMLElement: dragend event
==========================

The `dragend` event is fired when a drag operation ends (by releasing a mouse button or hitting the escape key).

This event is cancelable and may bubble up to the `Document` and `Window` objects.

Syntax
------

Use the event name in methods like `addEventListener()`, or set an event handler property.


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

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

Event type
----------

A `DragEvent`. Inherits from `Event`.

Event

UIEvent

MouseEvent

DragEventEvent properties
----------------

*In addition to the properties listed below, properties from the parent interface, `Event`, are available.*

`DragEvent.dataTransfer` Read only 

The data that is transferred during a drag-and-drop interaction.

Examples
--------

### Resetting opacity on dragend

In this example, we have a draggable element inside a container. Try grabbing the element, dragging it, and then releasing it.

We make the element half-transparent while it is dragged, and listen for the `dragend` event to reset the element's opacity when it is released.

For a complete example of drag and drop, see the page for the `drag` event.

#### HTML


```html
<div id="container">
  <div id="draggable" draggable="true">This div is draggable</div>
</div>
<div class="dropzone"></div>
```


#### CSS


```css
body {
  /\* Prevent the user from selecting text in the example \*/
  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) => {
  // make it half transparent
  event.target.classList.add("dragging");
});

source.addEventListener("dragend", (event) => {
  // reset the transparency
  event.target.classList.remove("dragging");
});
```


#### Result

Specifications
--------------

| Specification |
| --- |
| HTML Standard # ix-handler-ondragend |
| HTML Standard # event-dnd-dragend |

Browser compatibility
---------------------

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

See also
--------

* Other drag and drop events:
    + `drag`
    + `dragstart`
    + `dragover`
    + `dragenter`
    + `dragleave`
    + `drop`
HTMLElement: offsetHeight property
==================================

 The **`HTMLElement.offsetHeight`** read-only property returns
 the height of an element, including vertical padding and borders, as an integer.

 Typically, `offsetHeight` is a measurement in pixels of the element's CSS
 height, including any borders, padding, and horizontal scrollbars (if rendered). It does
 not include the height of pseudo-elements such as `::before` or
 `::after`. For the document body object, the measurement includes total
 linear content height instead of the element's CSS height. Floated elements extending
 below other linear content are ignored.

 If the element is hidden (for example, by setting `style.display` on the
 element or one of its ancestors to `"none"`), then `0` is
 returned.


**Note:** This property will round the value to an integer. If you need a fractional value, use
 `element.getBoundingClientRect()`.


Value
-----

A number.

Examples
--------

![An example element with large padding, border and margin. offsetHeight is the layout height of the element including its padding and border, and excluding its margin.](/en-US/docs/Web/API/HTMLElement/offsetHeight/dimensions-offset.png)

 The example image above shows a scrollbar and an `offsetHeight` which fits
 on the window. However, non-scrollable elements may have large `offsetHeight`
 values, much larger than the visible content. These elements are typically contained
 within scrollable elements; consequently, these non-scrollable elements may be
 completely or partly invisible, depending on the `scrollTop` setting of the
 scrollable container.

Specifications
--------------

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

### Notes

`offsetHeight` is a property of the DHTML object model which was first
 introduced by MSIE. It is sometimes referred to as an element's physical/graphical
 dimensions, or an element's border-box height.

Browser compatibility
---------------------

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

See also
--------

* `Element.clientHeight`
* `Element.scrollHeight`
* `HTMLElement.offsetWidth`
* Determining the dimensions of elements
* MSDN Measuring Element Dimension and Location
HTMLElement: inert property
===========================

The `HTMLElement` property **`inert`** reflects the value of the element's `inert` attribute. It is a boolean value that, when present, makes the browser "ignore" user input events for the element, including focus events and events from assistive technologies. The browser may also ignore page search and text selection in the element. This can be useful when building UIs such as modals where you would want to "trap" the focus inside the modal when it's visible.

**Note:** Do not nest interactive elements or important content within elements with the `inert` attribute as inert content and their descendants are neither focusable nor perceivable by all users.

Value
-----

A Boolean which is `true` if the element is inert; otherwise, the value is `false`.

Example
-------

### HTML


```html
<div>
  <label for="button1">Button 1</label>
  <button id="button1">I am not inert</button>
</div>
<div inert>
  <label for="button2">Button 2</label>
  <button id="button2">I am inert</button>
</div>
```

### CSS


```css
[inert] > \* {
  opacity: 0.5;
}
```


**Note:** This attribute, by itself, will not cause any visual change to the content as displayed in the browser. In the example above, CSS has been applied so that any direct descendant of an element with the inert attribute is rendered semi-opaque.

Specifications
--------------

| Specification |
| --- |
| HTML Standard # dom-inert |

Browser compatibility
---------------------

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

See also
--------

* Global attribute: `inert`
* `<dialog>`
* Inert Polyfill
* `disabled`
HTMLElement: isContentEditable property
=======================================

 The **`HTMLElement.isContentEditable`** read-only property
 returns a boolean value that is `true` if the contents of the element
 are editable; otherwise it returns `false`.

Value
-----

A boolean value.

Examples
--------

### HTML


```html
<p id="firstParagraph">Uneditable Paragraph</p>
<p id="secondParagraph" contenteditable="true">Editable Paragraph</p>

<p id="infoText1">Is the first paragraph editable?</p>
<p id="infoText2">Is the second paragraph editable?</p>
```

### JavaScript


```js
const firstParagraph = document.getElementById("firstParagraph");
const secondParagraph = document.getElementById("secondParagraph");

const infoText1 = document.getElementById("infoText1");
const infoText2 = document.getElementById("infoText2");

infoText1.textContent += " " + firstParagraph.isContentEditable;
infoText2.textContent += " " + secondParagraph.isContentEditable;
```

### Result

Specifications
--------------

| Specification |
| --- |
| HTML Standard # dom-iscontenteditable-dev |

Browser compatibility
---------------------

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

See also
--------

* `HTMLElement/contentEditable`
* The `contenteditable` global attribute.
HTMLElement: dragenter event
============================

The `dragenter` event is fired when a dragged element or text selection enters a valid drop target. The target object is the *immediate user selection* (the element directly indicated by the user as the drop target), or the `<body>` element.

This event is cancelable and may bubble up to the `Document` and `Window` objects.

Syntax
------

Use the event name in methods like `addEventListener()`, or set an event handler property.


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

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

Event type
----------

A `DragEvent`. Inherits from `Event`.

Event

UIEvent

MouseEvent

DragEventEvent properties
----------------

*In addition to the properties listed below, properties from the parent interface, `Event`, are available.*

`DragEvent.dataTransfer` Read only 

The data that is transferred during a drag-and-drop interaction.

Examples
--------

### Styling drop zones on dragenter

In this example, we have a draggable element inside a container. Try grabbing the element, dragging it over the other container, and releasing it.

We listen for the `dragenter` event to give the other container a purple background while the draggable element is over it to signal that the draggable element could be dropped onto the container.

However, in this partial example, we haven't implemented dropping: for a complete example of drag and drop, see the page for the `drag` event.

#### HTML


```html
<div class="dropzone">
  <div id="draggable" draggable="true">This div is draggable</div>
</div>
<div class="dropzone" id="droptarget"></div>
```


#### CSS


```css
body {
  /\* Prevent the user from selecting text in the example \*/
  user-select: none;
}

#draggable {
  text-align: center;
  background: white;
}

.dropzone {
  width: 200px;
  height: 20px;
  background: blueviolet;
  margin: 10px;
  padding: 10px;
}

.dropzone.dragover {
  background-color: purple;
}
```


#### JavaScript


```js
const target = document.getElementById("droptarget");
target.addEventListener("dragenter", (event) => {
  // highlight potential drop target when the draggable element enters it
  if (event.target.classList.contains("dropzone")) {
    event.target.classList.add("dragover");
  }
});

target.addEventListener("dragleave", (event) => {
  // reset background of potential drop target when the draggable element leaves it
  if (event.target.classList.contains("dropzone")) {
    event.target.classList.remove("dragover");
  }
});
```


#### Result

Specifications
--------------

| Specification |
| --- |
| HTML Standard # ix-handler-ondragenter |
| HTML Standard # event-dnd-dragenter |

Browser compatibility
---------------------

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

See also
--------

* Other drag and drop events:
    + `drag`
    + `dragstart`
    + `dragend`
    + `dragover`
    + `dragleave`
    + `drop`
HTMLElement: dragstart event
============================

The `dragstart` event is fired when the user starts dragging an element or text selection.

This event is cancelable and may bubble up to the `Document` and `Window` objects.

Syntax
------

Use the event name in methods like `addEventListener()`, or set an event handler property.


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

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

Event type
----------

A `DragEvent`. Inherits from `Event`.

Event

UIEvent

MouseEvent

DragEventEvent properties
----------------

*In addition to the properties listed below, properties from the parent interface, `Event`, are available.*

`DragEvent.dataTransfer` Read only 

The data that is transferred during a drag-and-drop interaction.

Examples
--------

### Setting opacity on drag start

In this example, we have a draggable element inside a container. Try grabbing the element, dragging it, and then releasing it.

We listen for the `dragstart` event to make the element half transparent while dragged.

For a complete example of drag and drop, see the page for the `drag` event.

#### HTML


```html
<div id="container">
  <div id="draggable" draggable="true">This div is draggable</div>
</div>
<div class="dropzone"></div>
```


#### CSS


```css
body {
  /\* Prevent the user from selecting text in the example \*/
  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) => {
  // make it half transparent
  event.target.classList.add("dragging");
});

source.addEventListener("dragend", (event) => {
  // reset the transparency
  event.target.classList.remove("dragging");
});
```


#### Result

Specifications
--------------

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

Browser compatibility
---------------------

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

See also
--------

* Other drag and drop events:
    + `drag`
    + `dragend`
    + `dragover`
    + `dragenter`
    + `dragleave`
    + `drop`
HTMLElement: offsetTop property
===============================

 The **`HTMLElement.offsetTop`** read-only property returns the
 distance from the outer border of the current element (including its margin) to the top padding edge of the `offsetParent`, the *closest positioned*
 ancestor element.

Value
-----

A number.

Examples
--------


```js
const d = document.getElementById("div1");
const topPos = d.offsetTop;

if (topPos > 10) {
  // object offset is more
  // than 10 pixels from its parent
}
```

Specifications
--------------

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

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
HTMLElement: virtualKeyboardPolicy property
===========================================

**Experimental:** **This is an experimental technology**  
Check the Browser compatibility table carefully before using this in production.

The **`virtualKeyboardPolicy`** property of the `HTMLElement` interface gets and sets a string indicating the on-screen virtual keyboard behavior on devices such as tablets, mobile phones, or other devices where a hardware keyboard may not be available, if the element's content is editable (for example, it is an `<input>` or `<textarea>` element, or an element with the `contenteditable` attribute set).

It reflects the value of the `virtualkeyboardpolicy` HTML global attribute.

Value
-----

An enumerated value; possible values are:

* `"auto"` or an empty string (`""`)
    + The browser automatically shows the virtual keyboard when the user taps or focuses the element.
* `"manual"`
    + The browser does not automatically show the virtual keyboard: showing/hiding the virtual keyboard is handled manually by the script.
Examples
--------

The following example shows how to control the on-screen virtual keyboard behavior via script:


```js
const element = document.querySelector("input");

// the on-screen virtual keyboard behavior will be controlled by script manually
element.virtualKeyboardPolicy = "manual";
```

Specifications
--------------

| Specification |
| --- |
| VirtualKeyboard API # dom-elementcontenteditable-virtualkeyboardpolicy |

Browser compatibility
---------------------

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

See also
--------

* `virtualkeyboardpolicy` HTML global attribute