Element：transitioncancel 事件 - Web API 接口参考

Element：transitioncancel 事件
===========================

**`transitioncancel`** 事件在 CSS 转换被取消时触发。

当以下情况时，过渡被取消：

* 应用于目标的`transition-property`属性的值被更改
* `display`属性被设置为"none"。
* 转换在运行到完成之前就停止了，例如通过将鼠标移出悬浮过渡元素。
Syntax
------
```

var transitionCancelHandler = target.ontransitioncancel;

target.ontransitioncancel = `Function`
```

### Value

A `Function` to be called when a `transitioncancel` event occurs indicating that a CSS transition has been cancelled on the *`target`*, where the target object is an HTML element (`HTMLElement`), document (`Document`), or window (`Window`). The function receives as input a single parameter: a `TransitionEvent` object describing the event which occurred; the event's `TransitionEvent.elapsedTime` (en-US) property's value should be the same as the value of `transition-duration`.

**备注：** elapsedTime 不包括过渡效果开始之前的时间;这意味着`transition-delay`的值不会影响 elapsedTime 的值，elapsedTime 在延迟周期结束和动画开始之前都是 0。

示例
--

在本例中，我们使用 `transitionrun` (en-US) 和 `transitionend` 事件来检测转换何时开始和结束，从而导致在转换期间发生文本更新。这也可以用来触发动画或其他效果，以允许连锁反应。

除此之外，我们也使用 `click` 事件使盒子消失 (`display: none;`), 显示如何触发 `transitioncancel` 事件。

### HTML

这只是简单地创建了一个`<div>`，我们将在下面用 CSS 样式使其成为一个框，调整大小和改变颜色等。

```html
<div class="box"></div>
```

### CSS

下面的 CSS 样式框和应用一个过渡效果，使框的颜色和大小改变，并导致框旋转，而鼠标光标在它上面。

```css
.box {
  margin-left: 70px;
  margin-top: 30px;
  border-style: solid;
  border-width: 1px;
  display: block;
  width: 100px;
  height: 100px;
  background-color: #0000ff;
  color: #ffffff;
  padding: 20px;
  font:
    bold 1.6em "Helvetica",
    "Arial",
    sans-serif;
  -webkit-transition:
    width 2s,
    height 2s,
    background-color 2s,
    -webkit-transform 2s,
    color 2s;
  transition:
    width 2s,
    height 2s,
    background-color 2s,
    transform 2s,
    color 2s;
}

.box:hover {
  background-color: #ffcccc;
  color: #000000;
  width: 200px;
  height: 200px;
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}
```

### JavaScript

然后，我们需要建立事件处理程序，以便在转换开始和结束时更改框的文本内容。

```js
let box = document.querySelector(".box");
box.ontransitionrun = function (event) {
  box.innerHTML = "Zooming...";
};

box.ontransitionend = function (event) {
  box.innerHTML = "Done!";
};

box.onclick = function () {
  box.style.display = "none";
  timeout = window.setTimeout(appear, 2000);
  function appear() {
    box.style.display = "block";
  }
};

box.ontransitioncancel = function (event) {
  console.log(
    "transitioncancel fired after " + event.elapsedTime + " seconds.",
  );
};
```

### 结果

The resulting content looks like this:

Notice what happens when you hover your mouse cursor over the box, then move it away.

Also note the log that appears in the JavaScript console when you click the box, or move the cursor away before the transition has run to completion.

规范
--

| Specification |
| --- |
| CSS Transitions # transitioncancel |
| CSS Transitions # dom-globaleventhandlers-ontransitioncancel |

浏览器兼容性
------

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

参见
--

* `TransitionEvent` 接口
* CSS 属性：`transition`、`transition-delay`、`transition-duration`、`transition-property`、`transition-timing-function`
* 相关事件：`transitionrun` (en-US)、`transitionstart`、`transitionend`
* 以 `Document` 为目标的该事件：`transitioncancel` (en-US)
* 以 `Window` 为目标的该事件：`transitioncancel` (en-US)


Element：firstElementChild 属性 - Web API 接口参考

Element：firstElementChild 属性
============================

**`Element.firstElementChild`** 只读属性返回元素的第一个子元素，如果没有子元素，则为 `null`。

`Element.firstElementChild` 仅包含元素节点。要获取所有子节点（包括文本和注释节点等非元素节点），请使用 `Node.firstChild`。

值
-

一个 `Element` 对象，或 `null`。

示例
--

```html
<ul id="list">
  <li>First (1)</li>
  <li>Second (2)</li>
  <li>Third (3)</li>
</ul>

<script>
 const list = document.getElementById("list");
 console.log(list.firstElementChild.textContent);
 // 输出“First (1)”
</script>
```

规范
--

| Specification |
| --- |
| DOM Standard # ref-for-dom-parentnode-firstelementchild① |

浏览器兼容性
------

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

参见
--

* `Element.nextElementSibling`
* `Element.lastElementChild`


Element.classList - Web API 接口参考

Element.classList
=================

**`Element.classList`** 是一个只读属性，返回一个元素 `class` 属性的动态 `DOMTokenList` 集合。这可以用于操作 class 集合。

相比将 `element.className` 作为以空格分隔的字符串来使用，`classList` 是一种更方便的访问元素的类列表的方法。

值
-

一个 `DOMTokenList`，表示元素的 `class` 属性的集合。如果 `class` 属性没有设置或者为空，它将返回一个空的 `DOMTokenList`，即 `length` 属性等于 0 的 `DOMTokenList`。

尽管 `classList` 属性自身是只读的，但是你可以使用 `add()`、`remove()`、`replace()` 和 `toggle()` 方法修改其关联的 `DOMTokenList`。

示例
--

```js
const div = document.createElement("div");
div.className = "foo";

// 初始状态：<div class="foo"></div>
console.log(div.outerHTML);

// 使用 classList API 移除、添加类值
div.classList.remove("foo");
div.classList.add("anotherclass");

// <div class="anotherclass"></div>
console.log(div.outerHTML);

// 如果 visible 类值已存在，则移除它，否则添加它
div.classList.toggle("visible");

// add/remove visible, depending on test conditional, i less than 10
div.classList.toggle("visible", i < 10);

console.log(div.classList.contains("foo"));

// 添加或移除多个类值
div.classList.add("foo", "bar", "baz");
div.classList.remove("foo", "bar", "baz");

// 使用展开语法添加或移除多个类值
const cls = ["foo", "bar"];
div.classList.add(...cls);
div.classList.remove(...cls);

// 将类值 "foo" 替换成 "bar"
div.classList.replace("foo", "bar");
```

**备注：** Firefox 26 之前的版本没有在 add/remove/toggle 实现使用多个参数。参见 https://bugzilla.mozilla.org/show\_bug.cgi?id=814014

规范
--

| Specification |
| --- |
| DOM Standard # ref-for-dom-element-classlist① |

浏览器兼容性
------

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

参考
--

* `element.className`
* `DOMTokenList`
* `classList.js` (a cross-browser JavaScript polyfill that fully implements `element.classList`)


Element.getClientRects() - Web API 接口参考

Element.getClientRects()
========================

**`Element.getClientRects()`** 方法返回一个指向客户端中每一个盒子的边界矩形的矩形集合。

语法
--

```js
getClientRects()
```

### 返回值

返回值是 ClientRect 对象集合，该对象是与该元素相关的 CSS 边框。每个 `DOMRect` 对象以像素为单位描述了边界矩形，这些值是边界矩形的 top-left 相对于视口的 top-left 的。即使当表格的标题在表格的边框外面，该标题仍会被计算在内。

当计算边界矩形时，会考虑视口区域（或其他可滚动元素）内的滚动操作。

返回的矩形不包括任何可能超出元素范围的子元素的边界。

对于 HTML AREA 元素、自身不做任何渲染的 SVG 元素、display：none 元素和不直接渲染出来的任何元素，都将会返回一个空列表。

具有空边框的 CSS 盒子也会返回矩形，此时 left、top、right 和 bottom 坐标仍旧有意义。

小数级别的像素偏移是有可能的。

示例
--

These examples draw client rects in various colors. Note that the JavaScript function that paints the client rects is connected to the markup via the class `withClientRectsOverlay`.

### HTML

示例 1：HTML 创建了三段带有 `<span>` 的段落 `<p>` 并放入 `<div>` 中。在第二个段落 `<p>` 上绘制了客户矩形。在第三个段落 `<p>` 的 `<span>` 元素上绘制了客户矩形。

```html
<h3>A paragraph with a span inside</h3>
<p>
  Both the span and the paragraph have a border set. The client rects are in
  red. Note that the p has only one border box, while the span has multiple
  border boxes.
</p>

<div>
  <strong>Original</strong>
  <p>
    <span>Paragraph that spans multiple lines</span>
  </p>
</div>

<div>
  <strong>p's rect</strong>
  <p class="withClientRectsOverlay">
    <span>Paragraph that spans multiple lines</span>
  </p>
</div>

<div>
  <strong>span's rect</strong>
  <p>
    <span class="withClientRectsOverlay"
 >Paragraph that spans multiple lines</span
 >
  </p>
</div>
```

示例 2：HTML 创建了 3 个有序列表。在第二个列表的 `<ol>` 上绘制了客户矩形，在第三个列表的 `<li>` 上绘制了客户矩形。

```html
<h3>A list</h3>
<p>
  Note that the border box doesn't include the number, so neither do the client
  rects.
</p>

<div>
  <strong>Original</strong>
  <ol>
    <li>Item 1</li>
    <li>Item 2</li>
  </ol>
</div>

<div>
  <strong>ol's rect</strong>
  <ol class="withClientRectsOverlay">
    <li>Item 1</li>
    <li>Item 2</li>
  </ol>
</div>

<div>
  <strong>each li's rect</strong>
  <ol>
    <li class="withClientRectsOverlay">Item 1</li>
    <li class="withClientRectsOverlay">Item 2</li>
  </ol>
</div>
```

示例 3：HTML 创建了两个带有标题的表。第二个表上绘制了客户矩形。

```html
<h3>A table with a caption</h3>
<p>
  Although the table's border box doesn't include the caption, the client rects
  do include the caption.
</p>

<div>
  <strong>Original</strong>
  <table>
    <caption>
      caption
    </caption>
    <thead>
      <tr>
        <th>thead</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>tbody</td>
      </tr>
    </tbody>
  </table>
</div>

<div>
  <strong>table's rect</strong>
  <table class="withClientRectsOverlay">
    <caption>
      caption
    </caption>
    <thead>
      <tr>
        <th>thead</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>tbody</td>
      </tr>
    </tbody>
  </table>
</div>
```

### CSS

使用 CSS 给第一举例的每个 div 内部的段落和 span、第二个举例的 ol 和 li 周围、第三个举例 的 table/th/td 元素周围绘制了边框。

```css
strong {
  text-align: center;
}
div {
  display: inline-block;
  width: 150px;
}
div p,
ol,
table {
  border: 1px solid blue;
}
span,
li,
th,
td {
  border: 1px solid green;
}
```

### JavaScript

JavaScript 代码为所有带有 `widthClientRectsOverlay` 样式的元素绘制了 ClientRects。

```js
function addClientRectsOverlay(elt) {
  /\* Absolutely position a div over each client rect so that its border width
 is the same as the rectangle's width.
 Note: the overlays will be out of place if the user resizes or zooms. \*/
  const rects = elt.getClientRects();
  for (const rect of rects) {
    const tableRectDiv = document.createElement("div");
    tableRectDiv.style.position = "absolute";
    tableRectDiv.style.border = "1px solid red";
    const scrollTop =
      document.documentElement.scrollTop || document.body.scrollTop;
    const scrollLeft =
      document.documentElement.scrollLeft || document.body.scrollLeft;
    tableRectDiv.style.margin = tableRectDiv.style.padding = "0";
    tableRectDiv.style.top = `${rect.top + scrollTop}px`;
    tableRectDiv.style.left = `${rect.left + scrollLeft}px`;
    // We want rect.width to be the border width, so content width is 2px less.
    tableRectDiv.style.width = `${rect.width - 2}px`;
    tableRectDiv.style.height = `${rect.height - 2}px`;
    document.body.appendChild(tableRectDiv);
  }
}

(() => {
  /\* Call function addClientRectsOverlay(elt) for all elements with
 assigned class "withClientRectsOverlay" \*/
  const elts = document.getElementsByClassName("withClientRectsOverlay");
  for (const elt of elts) {
    addClientRectsOverlay(elt);
  }
})();
```

### 结果

规范
--

| Specification |
| --- |
| CSSOM View Module # dom-element-getclientrects |

### 备注

`getClientRects()` 在 MS IE DHTML 对象模型中首次引入。

浏览器兼容性
------

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

参见
--

* `Element.getBoundingClientRect()`


Element：beforescriptexecute 事件 - Web API 接口参考

Element：beforescriptexecute 事件
==============================

**非标准:** 该特性是非标准的，请尽量不要在生产环境中使用它！

**警告：** 此事件是早期版本的规范中的一个提案。不要依赖它。

**`beforescriptexecute`** 事件在一个脚本被执行前触发，取消此事件可以阻止该脚本的执行。

这是一个 Gecko（Firefox）特有的私有事件。

|  |  |
| --- | --- |
| 是否冒泡 | 是 |
| 是否可取消 | 是 |
| 接口 | `Event` |
| 事件处理器属性 | 无 |

规范
--

不属于任何规范。

浏览器兼容性
------

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

参见
--

* `afterscriptexecute` 事件


Node.hasAttributes - Web API 接口参考

Node.hasAttributes
==================

概述
--

`hasAttributes`属性返回一个布尔值`true`或`false`,来表明当前元素节点是否有至少一个的属性 (attribute).

语法
--
```

result = targetNode.hasAttributes();
```

示例
--

```js
var t1 = document.getElementById("table-data");

if (t1.hasAttributes()) {
  // 可以用 t1.attributes 来读取该元素的所有属性
}
```

规范
--

* hasAttributes


Element.insertAdjacentText() - Web API 接口参考

Element.insertAdjacentText()
============================

**`insertAdjacentText()`** 方法将一个给定的文本节点插入在相对于被调用的元素给定的位置。

句法
--
```

element.insertAdjacentText(position, element);
```

### 参数

position

A `DOMString` representing the position relative to the `element`; must be one of the following strings:

* `'beforebegin'`: Before the `element` itself.
* `'afterbegin'`: Just inside the `element`, before its first child.
* `'beforeend'`: Just inside the `element`, after its last child.
* `'afterend'`: After the `element` itself.

element

A `DOMString` representing the text to be inserted into the tree.

### 返回值

Void.

### 例外

| Exception | Explanation |
| --- | --- |
| `SyntaxError` | The `position` specified is not a recognised value. |

### Visualization of position names

```html
<!-- beforebegin -->
<p>
  <!-- afterbegin -->
  foo
  <!-- beforeend -->
</p>
<!-- afterend -->
```

**备注：** 只有当节点位于树中并具有元素父元素时，beforebegin 和 afterend 位置才能工作。

范例
--

```js
beforeBtn.addEventListener("click", function () {
  para.insertAdjacentText("afterbegin", textInput.value);
});

afterBtn.addEventListener("click", function () {
  para.insertAdjacentText("beforeend", textInput.value);
});
```

Have a look at our insertAdjacentText.html demo on GitHub (see the source code too.) Here we have a simple paragraph. You can enter some text into the form element, then press the *Insert before* and *Insert after* buttons to insert it before or after the existing paragraph text using `insertAdjacentText()`. Note that the existing text node is not added to — further text nodes are created containing the new additions.

规范
--

| Specification |
| --- |
| DOM Standard # dom-element-insertadjacenttext |

浏览器兼容性
------

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

参见
--

* `Element.insertAdjacentElement()`
* `Element.insertAdjacentHTML()`


Element：mousemove 事件 - Web API 接口参考

Element：mousemove 事件
====================

`mousemove` 事件在定点设备（通常指鼠标）的光标在元素内移动时，会在该元素上触发。

语法
--

在类似 `addEventListener()` 这样的方法中使用事件名称，或者设置事件处理器属性。

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

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

事件类型
----

一个 `MouseEvent`。继承自 `Event`。

Event

UIEvent

MouseEvent事件属性
----

*这个接口也继承其父接口 `UIEvent` 和 `Event` 的属性。*

`MouseEvent.altKey` 只读

当鼠标事件被触发时，如果 `alt` 键已被按下，返回 `true`。

`MouseEvent.button` 只读

触发鼠标事件时，按下按钮的编号（如果适用）。

`MouseEvent.buttons` 只读

触发鼠标事件时，按下的按钮（如果存在）。

`MouseEvent.clientX` 只读

鼠标指针相对于局部 DOM 元素的 X 轴坐标。

`MouseEvent.clientY` 只读

鼠标指针相对于局部 DOM 元素的 Y 轴坐标。

`MouseEvent.ctrlKey` 只读

当鼠标事件被触发时，如果 `control` 键已被按下，返回 `true`。

`MouseEvent.layerX` (en-US)
非标准
 只读

返回事件相对于当前层的水平坐标。

`MouseEvent.layerY` (en-US)
非标准
 只读

返回事件相对于当前层的垂直坐标。

`MouseEvent.metaKey` 只读

当鼠标事件被触发时，如果 `meta` 键已被按下，返回 `true`。

`MouseEvent.movementX` 只读

鼠标指针相对于最后一次 `mousemove` 事件位置的 X 轴坐标。

`MouseEvent.movementY` 只读

鼠标指针相对于最后一次 `mousemove` 事件位置的 Y 轴坐标。

`MouseEvent.offsetX` 只读

鼠标指针相对于目标节点的内填充边的 X 轴坐标。

`MouseEvent.offsetY` 只读

鼠标指针相对于目标节点的内填充边的 Y 轴坐标。

`MouseEvent.pageX` 只读

鼠标指针相对于整个文档的 X 轴坐标。

`MouseEvent.pageY` 只读

鼠标指针相对于整个文档的 Y 轴坐标。

`MouseEvent.relatedTarget` 只读

事件的次要目标（如果存在）。

`MouseEvent.screenX` 只读

鼠标指针相对于屏幕的 X 轴坐标。

`MouseEvent.screenY` 只读

鼠标指针相对于屏幕的 Y 轴坐标。

`MouseEvent.shiftKey` 只读

当鼠标事件被触发时，如果 `shift` 键已被按下，返回 `true`。

`MouseEvent.mozInputSource`
非标准
 只读

生成事件的设备类型（`MOZ_SOURCE_*` 常量之一）。例如，这允许你决定鼠标事件是否由实际的鼠标还是触摸事件生成（这可能会在一定程度影响你对事件相关坐标判断的准确性）。

`MouseEvent.webkitForce` (en-US)
非标准
 只读

单击时施加的压力大小。

`MouseEvent.x` 只读

`MouseEvent.clientX` 的别名。

`MouseEvent.y` 只读

`MouseEvent.clientY` 的别名。

示例
--

下面的例子将使用 `mousedown`、`mousemove` 以及 `mouseup` 事件，实现一个允许用户在 HTML canvas 上绘图的功能。它的功能很简单：直线的粗细设置为 1，颜色始终为黑色。

当页面加载时，我们使用常量 `myPics` 和 `context` 分别保存将用于绘制的 ID 为 `myPics` 的 canvas 元素和 2d 上下文。

当 `mousedown` 事件被触发时，绘图也开始了。首先，我们将鼠标的 `x` 坐标和 `y` 坐标分别赋值给变量 `x` 和 `y`，然后设置 `isDrawing` 为 `true`。

当鼠标在页面上移动时，`mousemove` 事件被触发。当 `isDrawing` 为 true 时，事件处理器将会调用 `drawLine` 函数，该函数从变量 `x` 和 `y` 所指的位置开始到鼠标现在所在的位置画一条线。

当 `drawLine()` 调用结束时，我们需要把调整后的坐标赋值到 `x` 和 `y` 中。

`mouseup` 事件绘制图形的最后一段，并把 `x` 和 `y` 设置为 0。通过把设置 `isDrawing` 为 false 以停止绘制。

### HTML

```html
<h1>使用鼠标事件绘制</h1>
<canvas id="myPics" width="560" height="360"></canvas>
```

### CSS

```css
canvas {
  border: 1px solid black;
  width: 560px;
  height: 360px;
}
```

### JavaScript

```js
// 如果为 true 时，移动鼠标会在画布上绘制
let isDrawing = false;
let x = 0;
let y = 0;

const myPics = document.getElementById("myPics");
const context = myPics.getContext("2d");

// event.offsetX 与 event.offsetY 给出与画布边缘的 (x,y) 的偏移量。

// 向 mousedown、mousemove 与 mouseup 事件添加事件侦听器
myPics.addEventListener("mousedown", (e) => {
  x = e.offsetX;
  y = e.offsetY;
  isDrawing = true;
});

myPics.addEventListener("mousemove", (e) => {
  if (isDrawing) {
    drawLine(context, x, y, e.offsetX, e.offsetY);
    x = e.offsetX;
    y = e.offsetY;
  }
});

window.addEventListener("mouseup", (e) => {
  if (isDrawing) {
    drawLine(context, x, y, e.offsetX, e.offsetY);
    x = 0;
    y = 0;
    isDrawing = false;
  }
});

function drawLine(context, x1, y1, x2, y2) {
  context.beginPath();
  context.strokeStyle = "black";
  context.lineWidth = 1;
  context.moveTo(x1, y1);
  context.lineTo(x2, y2);
  context.stroke();
  context.closePath();
}
```

### 结果

规范
--

| Specification |
| --- |
| UI Events # event-type-mousemove |
| HTML Standard # handler-onmousemove |

浏览器兼容性
------

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

参见
--

* 事件介绍
* `mousedown`
* `mouseup`
* `click`
* `dblclick`
* `mouseover`
* `mouseout`
* `mouseenter`
* `mouseleave`
* `contextmenu`


Element：beforeinput 事件 - Web API 接口参考

Element：beforeinput 事件
======================

DOM 事件 **`beforeinput`** 在`<input>`, `<select>` 或 `<textarea>` 的值即将被修改前触发。这个事件也可以在 `contenteditable` 被设置为 `true` 的元素和打开 `designMode` 后的任何元素上被触发。

In the case of `contenteditable` and `designMode`, the event target is the **editing host**. If these properties apply to multiple elements, the editing host is the nearest ancestor element whose parent isn't editable.

|  |  |
| --- | --- |
| Bubbles | Yes |
| Cancelable | Yes |
| Interface | `InputEvent` |
| Event handler property | None |
| Sync / Async | Sync |
| Composed | Yes |
| Default Action | Update the DOM element |

示例
--

这个例子会在 `<input>` 元素的值即将被新的值更新前记录下当前的值。

### HTML

```html
<input placeholder="Enter some text" name="name" />
<p id="values"></p>
```

### JavaScript

```js
const input = document.querySelector("input");
const log = document.getElementById("values");

input.addEventListener("beforeinput", updateValue);

function updateValue(e) {
  log.textContent = e.target.value;
}
```

### 结果

规范
--

| Specification |
| --- |
| UI Events # event-type-beforeinput |

浏览器兼容性
------

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

参见
--

* 相关事件：`input`


element.getElementsByTagName - Web API 接口参考

element.getElementsByTagName
============================

**`Element.getElementsByTagName()`** 方法返回一个动态的包含所有指定标签名的元素的 HTML 集合`HTMLCollection`。指定的元素的子树会被搜索，不包括元素自己。返回的列表是动态的，这意味着它会随着 DOM 树的变化自动更新自身。所以，使用相同元素和相同参数时，没有必要多次的调用`Element.getElementsByTagName()` .

如果是 HTML 文档中的某个元素调用了`getElementsByTagName 函数，` 运行前会将参数转为小写字母形式。故不建议在驼峰式命名的 SVG 元素中使用。 `Element.getElementsByTagNameNS()` 适用于那种情况。

`Element.getElementsByTagName` 和 `Document.getElementsByTagName()`类似，除了它的搜索被限制为指定元素的后代。

语法
--
```

elements = element.getElementsByTagName(tagName)
```

* `elements` 搜索到的元素的动态 HTML 集合 `HTMLCollection`，它们的顺序是在子树中出现的顺序。如果没有搜索到元素则这个集合为空。
* `element` 搜索从 element 开始。请注意只有 element 的后代元素会被搜索，不包括元素自己。
* `tagName` 要查找的限定名。字符 `"*"` 代表所有元素。考虑到兼容 XHTML，应该使用小写。
实例
--

```js
// check the alignment on a number of cells in a table.
var table = document.getElementById("forecast-table");
var cells = table.getElementsByTagName("td");
for (var i = 0; i < cells.length; i++) {
  var status = cells[i].getAttribute("data-status");
  if (status == "open") {
    // grab the data
  }
}
```

规范
--

| Specification |
| --- |
| DOM Standard # dom-element-getelementsbytagname |

浏览器兼容性
------

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


dblclick - Web API 接口参考

dblclick
========

在单个元素上单击两次鼠标的指针设备按钮 (通常是小鼠的主按钮) 时，将触发 `dblclick` 事件。

常规信息
----

规范

DOM L3

接口
`MouseEvent`
是否冒泡

是

可取消默认行为

是

目标对象

元素（Element）

默认行为

多种：开始 drag/drop 操作；开始文本选择、开始滚动或移动操作（若支持该操作时，可与鼠标中键协同）

属性
--

| 属性 | 类型 | 描述 |
| --- | --- | --- |
| `target` 只读  | `EventTarget` | 事件对象 (位于 DOM 树最上面的元素). |
| `type` 只读  | `DOMString` | 事件类型。 |
| `bubbles` 只读  | `Boolean` (en-US) | 是否冒泡 |
| `cancelable` 只读  | `Boolean` (en-US) | 是否可被取消 |
| `view` 只读  | `WindowProxy` | `document.defaultView` (该文档的`window` 对象) |
| `detail` 只读  | `long` (`float`) | 在短时间内发生的连续点击次数的计数。 |
| `currentTarget` 只读  | EventTarget | 被事件监听触发的节点。 |
| `relatedTarget` 只读  | EventTarget | 对于 `mouseover`, `mouseout`, `mouseenter` 和`mouseleave` 事件：值为与其互补的事件 (比如`mouseenter` 就为`mouseleave`). 否则为`null`. |
| `screenX` 只读  | long | 点击事件发生时鼠标对应的屏幕 x 轴坐标。 |
| `screenY` 只读  | long | 点击事件发生时鼠标对应的屏幕 y 轴坐标。 |
| `clientX` 只读  | long | 点击事件发生时鼠标对应的浏览器窗口的 x 轴坐标。 |
| `clientY` 只读  | long | 点击事件发生时鼠标对应的浏览器窗口的 y 轴坐标。 |
| `button` 只读  | unsigned short | 点击时按下的鼠标按钮：左键=0，中间按钮=1 (如果实现的话), 右键=2. 对于配置为左手使用按钮的操作被反转的鼠标，这些值从右向左读取。 |
| `buttons` 只读  | unsigned short | 当鼠标事件被触发时按钮的 buttons: 左键=1，右键=2，中间按钮=4，第四个按钮 (通常是"返回")=8，第五个按钮 (通常是"前进")=16.若有两个或以上的按钮按下，返回以逻辑或运算形成的合并值。例如左键右键同时按下就返回 3 (=1 | 2). 更多信息. |
| `ctrlKey` 只读  | boolean | 当事件被触发时 ctrl 按键被按下时为 true，否则为 false。 |
| `shiftKey` 只读  | boolean | 当事件被触发时 shift 按键被按下时为 true，否则为 false。 |
| `altKey` 只读  | boolean | 当事件被触发时 alt 按键被按下时为 true，否则为 false。 |
| `metaKey` 只读  | boolean | 当事件被触发时 meta 按键被按下时为 true，否则为 false。 |

规范
--

| Specification |
| --- |
| UI Events # event-type-dblclick |
| HTML Standard # handler-ondblclick |

浏览器兼容性
------

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

参见
--

* `mousedown`
* `mouseup`
* `mousemove`
* `click`
* `dblclick`
* `mouseover`
* `mouseout`
* `mouseenter`
* `mouseleave`
* `contextmenu`


Element.getAttributeNames() - Web API 接口参考

Element.getAttributeNames()
===========================

`Element.getAttributeNames()` 返回一个`Array`，该数组包含指定元素（Element）的所有属性名称，如果该元素不包含任何属性，则返回一个空数组。

将 `getAttributeNames()` 与 `getAttribute()` 组合使用，是一种有效替代 `Element.attributes` 的使用方法。

语法
--
```

let attributeNames = element.getAttributeNames();
```

例子
--

```js
// 遍历 elements 的元素
for (let name of element.getAttributeNames()) {
  let value = element.getAttribute(name);
  console.log(name, value);
}
```

规范
--

| Specification |
| --- |
| DOM Standard # ref-for-dom-element-getattributenames① |

浏览器兼容性
------

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


Element：touchcancel 事件 - Web API 接口参考

Element：touchcancel 事件
======================

`touchcancel` 事件在触点被中断时触发，中断方式基于特定实现而有所不同（例如，创建了太多的触点）。

语法
--

在类似 `addEventListener()` 这样的方法中使用事件名称，或设置事件处理器属性。

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

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

事件类型
----

`TouchEvent`。继承自 `Event`。

Event

UIEvent

TouchEvent事件属性
----

*此接口从其父接口 `UIEvent` 和 `Event` 继承属性。*

`TouchEvent.altKey` (en-US) 只读

一个布尔值，表示在事件触发时 Alt 键是否被按下。

`TouchEvent.changedTouches` 只读

一个包含所有的 `Touch` 对象的 `TouchList`，这些 `Touch` 对象表示在前一个 touch 事件和当前的事件之间，状态发生变化的独立触点。

`TouchEvent.ctrlKey` (en-US) 只读

一个布尔值，表示在事件触发时控制键是否被按下。

`TouchEvent.metaKey` (en-US) 只读

一个布尔值，表示在事件触发时 Meta 键是否被按下。

`TouchEvent.shiftKey` (en-US) 只读

一个布尔值，表示在事件触发时 Shift 键是否被按下。

`TouchEvent.targetTouches` 只读

一个包含所有的 `Touch` 对象的 `TouchList`，这些 `Touch` 对象表示当前与触摸表面接触的触点，且触点起始于事件发生的目标元素。

`TouchEvent.touches` 只读

一个包含所有的 `Touch` 对象的 `TouchList`，这些 `Touch` 对象表示当前与表面接触的触点（不论事件目标或状态变化）。

`TouchEvent.rotation`
非标准
 只读

自事件开始以来的旋转角度变化（以度为单位）。正值表示顺时针旋转；负值表示逆时针旋转。初始值为 `0.0`。

`TouchEvent.scale`
非标准
 只读

自事件开始以来，两个数值之间的距离（缩放倍数）。表示事件开始至现在，触点距离的缩放倍数（浮点数）。小于 1.0 表示向内收缩（缩小），大于 1.0 表示向外松开（放大）。初始值为 `1.0`。

示例
--

这些事件的代码示例可在这个专用页面查看：Touch 事件。

规范
--

| Specification |
| --- |
| Touch Events # event-touchcancel |
| Touch Events # dom-globaleventhandlers-ontouchcancel |

浏览器兼容性
------

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

参见
--

* 以 `Document` 为目标的相同事件：`touchcancel`


Element.scrollWidth - Web API 接口参考

Element.scrollWidth
===================

**`Element.scrollWidth`** 这个只读属性是元素内容宽度的一种度量，包括由于 overflow 溢出而在屏幕上不可见的内容。
`scrollWidth`值等于元素在不使用水平滚动条的情况下适合视口中的所有内容所需的最小宽度。宽度的测量方式与`clientWidth`相同：它包含元素的内边距，但不包括边框，外边距或垂直滚动条（如果存在）。它还可以包括伪元素的宽度，例如`::before`或`::after`。如果元素的内容可以适合而不需要水平滚动条，则其`scrollWidth`等于`clientWidth`

**备注：** 1. 这个属性会进行四舍五入并返回整数，如果你需要小数形式的值，使用`element.getBoundingClientRect()`*.*

*2. 在实际测试过程中，谷歌获取的* **`Element.scrollWidth`** 和 IE，火狐下获取的 **`Element.scrollWidth`** 并不相同

语法
--
```

var xScrollWidth = element.scrollWidth;
```

xScrollWidth 的值是元素的内容宽度。

例子
--
```

<!DOCTYPE html>
<html>
<head>
    <title>Example</title>
    <style>
        div {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        #aDiv {
            width: 100px;
        }

        button {
            margin-bottom: 2em;
        }
    </style>
</head>

<body>
    <div id="aDiv">
        FooBar-FooBar-FooBar-FooBar
    </div>
    <button id="aButton">
        Check for overflow
    </button>

    <div id="anotherDiv">
        FooBar-FooBar-FooBar-FooBar
    </div>
    <button id="anotherButton">
        Check for overflow
    </button>
</body>
<script>
    var buttonOne = document.getElementById('aButton'),
    buttonTwo = document.getElementById('anotherButton'),
    divOne = document.getElementById('aDiv'),
    divTwo = document.getElementById('anotherDiv');

    //check to determine if an overflow is happening
    function isOverflowing(element) {
        return (element.scrollWidth > element.offsetWidth);
    }

    function alertOverflow(element) {
        if (isOverflowing(element)) {
            alert('Contents are overflowing the container.');
        } else {
            alert('No overflows!');
        }
    }

    buttonOne.addEventListener('click', function() {
        alertOverflow(divOne);
    });

    buttonTwo.addEventListener('click', function() {
        alertOverflow(divTwo);
    });
</script>
</html>
```

规范
--

The CSSOM View Module defines `scrollWidth`

相关
--

* `Element.clientWidth`
* `Element.offsetWidth`
* Determining the dimensions of elements (en-US)


Element.requestPointerLock() - Web API 接口参考

Element.requestPointerLock()
============================

**实验性:** **这是一项实验性技术**
在将其用于生产之前，请仔细检查浏览器兼容性表格。

**`Element.requestPointerLock()`** 方法允许你异步地请求将鼠标指针锁定在指定元素上。

若想追踪请求成功还是失败，则需要在 `Document` 级别监听 `pointerlockchange` 和 `pointerlockerror` (en-US) 事件。

语法
--
```

instanceOfElement.requestPointerLock();
```

规范
--

| Specification |
| --- |
| Pointer Lock 2.0 # dom-element-requestpointerlock |

浏览器兼容性
------

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

参见
--

* `Document.pointerLockElement`
* `Document.exitPointerLock()`
* Pointer Lock


元素：keypress 事件 - Web API 接口参考

元素：keypress 事件
==============

**已弃用:** 不再推荐使用该特性。虽然一些浏览器仍然支持它，但也许已从相关的 web 标准中移除，也许正准备移除或出于兼容性而保留。请尽量不要使用该特性，并更新现有的代码；参见本页面底部的兼容性表格以指导你作出决定。请注意，该特性随时可能无法正常工作。

当按下产生字符或符号值的键时，将触发 `keypress` 事件。

产生字符值的键包括字母、数字和标点符号键。不产生字符值的键是修饰键，例如 `Alt`、`Shift`、`Ctrl` 或 `Meta` 键。

**警告：** 由于此事件已被弃用，你应该改用 `beforeinput` 或 `keydown`。

语法
--

在 `addEventListener()` 等方法中使用事件名称，或设置事件处理器属性。

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

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

事件类型
----

`KeyboardEvent`。继承自 `Event`。

Event

UIEvent

KeyboardEvent事件属性
----

*该接口还继承了其父接口 `UIEvent` 和 `Event` 的属性。*

`KeyboardEvent.altKey` 只读

返回一个布尔值，如果在发生此事件时按下 `Alt`（macOS 上的 `Option` 或 `⌥`）键，则返回 `true`。

`KeyboardEvent.code` 只读

返回一个字符串，其中包含由事件表示的物理键的代码值。

**警告：** 此方法忽略用户的键盘布局，因此，如果用户按下 QWERTY 键盘布局中“Y”位置（在主键盘区域上方的一行中间），即使用户使用 QWERTZ 键盘（这意味着用户期望“Z”，而且所有其他属性都指示为“Z”）或 Dvorak 键盘布局（其中用户期望“F”），此方法仍将始终返回“KeyY”。如果你想向用户显示正确的按键信息，则可以使用 `Keyboard.getLayoutMap()` (en-US) 方法。

`KeyboardEvent.ctrlKey` 只读

返回一个布尔值，如果生成键事件时 `Ctrl` 键处于激活状态，则为 `true`。

`KeyboardEvent.isComposing` 只读

返回一个布尔值，如果事件在 `compositionstart` 之后、`compositionend` 之前触发，则为 `true`。

`KeyboardEvent.key` 只读

返回一个字符串，表示由事件表示的键的键值。

`KeyboardEvent.locale` 只读

返回一个表示键盘配置的区域设置的语言环境字符串。如果浏览器或设备不知道键盘的语言环境，则可能是空字符串。

**备注：** 这并不描述正在输入的数据的区域设置。用户可能在使用一种键盘布局时在输入不同语言的文本。

`KeyboardEvent.location` (en-US) 只读

返回一个数字，表示键在键盘或其他输入设备上的位置。标识位置的常量列表如上面的键盘位置部分所示。

`KeyboardEvent.metaKey` 只读

如果在生成按键事件时 `Meta` 键（在 Mac 键盘上是 `⌘ Command` 键，在 Windows 键盘上是 Windows 键（`⊞`））处于活动状态，则返回一个布尔值，该布尔值为 `true`。

`KeyboardEvent.repeat` 只读

如果该按键被按住并且正在生成自动重复事件，则此函数返回一个布尔值 `true`。

`KeyboardEvent.shiftKey` 只读

如果在生成按键事件时 `Shift` 键处于激活状态，则返回一个布尔值，该布尔值为 `true`。

示例
--

### addEventListener 按键示例

该示例在聚焦 `<input>` 元素后，每当你按下一个键时，记录 `KeyboardEvent.code` 的值。

```html
<div>
  <label for="sample">请将光标放在 input 元素上并输入一些内容：</label>
  <input type="text" name="text" id="sample" />
</div>
<p id="log"></p>
```

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

input.addEventListener("keypress", logKey);

function logKey(e) {
  log.textContent += ` ${e.code}`;
}
```

### 等同于 onkeypress

```js
input.onkeypress = logKey;
```

规范
--

| Specification |
| --- |
| UI Events # event-type-keypress |
| HTML Standard # handler-onkeypress |

浏览器兼容性
------

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

参见
--

* 事件同样也适用于 `Document` 接口。
* 相关事件：
    + `input`
    + `keydown`
    + `keyup`


Element.lastElementChild - Web API 接口参考

Element.lastElementChild
========================

只读属性 **`Element.lastElementChild`** 返回对象的最后一个子`元素`，如果没有子元素，则返回 `null`。

**备注：** This property was initially defined in the `ElementTraversal` pure interface. As this interface contained two distinct set of properties, one aimed at `Node` that have children, one at those that are children, they have been moved into two separate pure interfaces, `Element` and `ChildNode`. In this case, `lastElementChild` moved to `Element`. This is a fairly technical change that shouldn't affect compatibility.

语法
--
```

var element = node.lastElementChild;
```

例子
--

```html
<ul id="foo">
  <li>First (1)</li>
  <li>Second (2)</li>
  <li>Third (3)</li>
</ul>

<script>
 const list = document.getElementById("list");
 console.log(list.lastElementChild.textContent);
 // 输出 "Third (3)"
</script>
```

适用于 IE8、IE9 和 Safari 的 Polyfill
-------------------------------

```js
// Overwrites native 'lastElementChild' prototype.
// Adds Document & DocumentFragment support for IE9 & Safari.
// Returns array instead of HTMLCollection.
(function (constructor) {
  if (
    constructor &&
    constructor.prototype &&
    constructor.prototype.lastElementChild == null
  ) {
    Object.defineProperty(constructor.prototype, "lastElementChild", {
      get: function () {
        var node,
          nodes = this.childNodes,
          i = nodes.length - 1;
        while ((node = nodes[i--])) {
          if (node.nodeType === 1) {
            return node;
          }
        }
        return null;
      },
    });
  }
})(window.Node || window.Element);
```

规范
--

| Specification |
| --- |
| DOM Standard # ref-for-dom-parentnode-lastelementchild① |

浏览器兼容性
------

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

参见
--

* 纯接口 `Element` 和 `ChildNode`。
* 实现了此纯接口的对象类型：`Document`、`Element`，和 `DocumentFragment`。


GlobalEventHandlers.onpointerup - Web API 接口参考

GlobalEventHandlers.onpointerup
===============================

`pointerup` 是一个全局的事件处理函数。

语法
--
```

var upHandler = targetElement.onpointerup;
```

### 返回值

`upHandler`

返回 `targetElement` 元素的`pointerup`事件处理函数。

示例
--

如下是两种设置元素`pointerup`事件处理函数的方法。

```js
<html>
<script>
function upHandler(ev) {
 // 这里添加元素的 pointup 事件处理函数
}
function init() {
 var el=document.getElementById("target1");
 el.onpointerup = upHandler;
}
</script>
<body onload="init();">
<div id="target1"> Touch me ... </div>
<div id="target2" onpointerup="upHandler(event)"> Touch me ... </div>
</body>
</html>
```

规范
--

| Specification |
| --- |
| Pointer Events # the-pointerup-event |
| Pointer Events # dom-globaleventhandlers-onpointerup |

浏览器兼容性
------

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

参见
--

* 相关事件
    + `gotpointercapture`
    + `lostpointercapture`
    + `pointerover`
    + `pointerenter`
    + `pointerdown`
    + `pointermove`
    + `pointercancel`
    + `pointerout`
    + `pointerleave`


Element.replaceChildren() - Web API 接口参考

Element.replaceChildren()
=========================

**`Element.replaceChildren()`** 方法将一个 `Node` 的后代替换为指定的后代集合。这些新的后代可以为字符串或 `Node` 对象。

语法
--

```js
replaceChildren(param1)
replaceChildren(param1, param2)
replaceChildren(param1, param2, /\* …, \*/ paramN)
```

### 参数

`param1`、…、`paramN`

一组用于替换 `Element` 现有后代的 `Node` 或字符串对象。若没有指定替代对象时，`Element` 的所有后代都将被清空。

### 异常

`HierarchyRequestError` `DOMException`

当违反了节点树的约束条件时抛出。

示例
--

### 清空一个节点

`replaceChildren()` 为清空一个节点的后代提供了非常方便的机制，你只需在父节点不指定任何实参调用该方法即可。

```js
myNode.replaceChildren();
```

### 在父节点之间转移节点

`replaceChildren()` 允许你更轻松地在父节点之间转移节点，而无需依赖冗余的循环代码。例如，有一个简单的应用程序让你选择你派对上的食物。它的 HTML 可能如下：

```html
<h2>派对食物列表</h2>

<main>
  <div>
    <label for="no">不，谢谢了！</label>

    <select id="no" multiple size="10">
      <option>苹果</option>
      <option>橘子</option>
      <option>葡萄</option>
      <option>香蕉</option>
      <option>奇异果</option>
      <option>巧克力饼干</option>
      <option>花生饼干</option>
      <option>巧克力棒</option>
      <option>火腿三明治</option>
      <option>乳酪三明治</option>
      <option>沙拉三明治</option>
      <option>冰淇淋</option>
      <option>果冻</option>
      <option>胡萝卜和鹰嘴豆泥</option>
      <option>玛格丽特披萨</option>
      <option>腊肠比萨</option>
      <option>素比萨</option>
    </select>
  </div>

  <div class="buttons">
    <button id="to-yes">转移到"是" --></button>
    <button id="to-no"><-- 转移到 "否"</button>
  </div>

  <div>
    <label for="yes">是的，请！</label>

    <select id="yes" multiple size="10"></select>
  </div>
</main>
```

使用一些简单的 CSS 将两个选择列表排成一行，并将控制按钮放置在它们之间是很有意义的：

```css
main {
  display: flex;
}

div {
  margin-right: 20px;
}

label,
button {
  display: block;
}

.buttons {
  display: flex;
  flex-flow: column;
  justify-content: center;
}

select {
  width: 200px;
}
```

我们要做的是，当按下“是”按钮时，将“否”列表中的所有选定选项都转移到“是”列表中，然后当按下“否”按钮时，将“是”列表中的所有选定选项都转移到“否”列表中。

为此，我们为每个按钮提供一个 click 事件处理句柄，该事件句柄将所选选项赋值到第一个常量中，将要转移到的列表中的现有的选项赋值到第二个常量中。然后，它会调用列表的 `replaceChildren()` 方法，使用延展运算符传入两个常量，进而将两个常量中包含的所有选项转移到目标列表。

```js
const noSelect = document.getElementById("no");
const yesSelect = document.getElementById("yes");
const noBtn = document.getElementById("to-no");
const yesBtn = document.getElementById("to-yes");

yesBtn.addEventListener("click", () => {
  const selectedTransferOptions =
    document.querySelectorAll("#no option:checked");
  const existingYesOptions = document.querySelectorAll("#yes option");
  yesSelect.replaceChildren(...selectedTransferOptions, ...existingYesOptions);
});

noBtn.addEventListener("click", () => {
  const selectedTransferOptions = document.querySelectorAll(
    "#yes option:checked",
  );
  const existingNoOptions = document.querySelectorAll("#no option");
  noSelect.replaceChildren(...selectedTransferOptions, ...existingNoOptions);
});
```

最终结果如下：

规范
--

| Specification |
| --- |
| DOM Standard # ref-for-dom-parentnode-replacechildren① |

浏览器兼容性
------

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

参见
--

* `Element.prepend()`
* `Element.append()`
* `NodeList`


元素：focus 事件 - Web API 接口参考

元素：focus 事件
===========

**`focus`** 事件在元素获取焦点时触发。这个事件和 `focusin` (en-US) 最大的区别仅仅在于后者会事件冒泡。

`focus` 与 `blur` 正好相反。

该事件不可取消，也不会冒泡。

语法
--

在象 `addEventListener()` 这样的方法中使用事件名称或设置事件处理器属性。

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

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

事件属性
----

*该接口还从其父级 `UIEvent` 和 `Event` 继承属性。*

`FocusEvent.relatedTarget` (en-US)

一个 `EventTarget`，表示此事件的次要目标。在某些情况下（例如切换到当前标签页或离开当前标签页），处于安全原因，该属性可能会被设置为 `null`。

示例
--

### 简单示例

#### HTML

```html
<form id="form">
  <input type="text" placeholder="text input" />
  <input type="password" placeholder="password" />
</form>
```

#### 结果

### 事件委托

此事件有两个可以实现事件委托的方法：通过在支持的浏览器上使用 `focusin` (en-US) 事件，或者通过设置 `addEventListener()` 的参数`useCapture` 值为 `true`。

#### HTML

```html
<form id="form">
  <input type="text" placeholder="text input" />
  <input type="password" placeholder="password" />
</form>
```

#### JavaScript

```js
const form = document.getElementById("form");

form.addEventListener(
  "focus",
  (event) => {
    event.target.style.background = "pink";
  },
  true,
);

form.addEventListener(
  "blur",
  (event) => {
    event.target.style.background = "";
  },
  true,
);
```

#### 结果

规范
--

| Specification |
| --- |
| UI Events # event-type-focus |
| HTML Standard # handler-onfocus |

浏览器兼容性
------

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

参见
--

* 相关的事件：`blur`、`focusin` (en-US)、`focusout`
* 在 `Window` 目标上的该事件：`focus` 事件
* Focusing: focus/blur


Element：cut 事件 - Web API 接口参考

Element：cut 事件
==============

当用户通过浏览器的用户界面发起“剪切”动作时，将触发 **`cut`** 事件。

如果用户尝试对不可编辑内容执行剪切操作，则 `cut` 事件仍会触发，但事件对象不包含任何数据。

该事件的默认行为是将当前选中的内容（如有）复制到系统剪贴板，并从当前文档中移除。

事件处理器可以通过调用 `ClipboardEvent.clipboardData` 属性上的 `setData(format, data)` *修改*剪贴板内容，并通过 `event.preventDefault()` 取消默认行为。

但是请注意，取消默认动作也会阻止文档被更新。所以一个事件处理器想要在修改剪贴板时模仿默认动作“剪切”，也必须手动从文档中删除选择。

事件处理器不可以*读取*剪贴板数据。

可以构建和派发一个合成 `cut` 事件，但这不会影响系统剪贴板或文档内容。

语法
--

在类似于 `addEventListener()` 这样的方法中使用事件名，或设置事件处理器属性。

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

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

事件类型
----

`ClipboardEvent`。继承自 `Event`。

Event

ClipboardEvent示例
--

### 实时示例

#### HTML

```html
<div class="source" contenteditable="true">从这个盒子剪切文字</div>
<div class="target" contenteditable="true">在这里粘贴</div>
```

```
div.source,
div.target {
  border: 1px solid gray;
  margin: 0.5rem;
  padding: 0.5rem;
  height: 1rem;
  background-color: #e9eef1;
}
```

#### JavaScript

```js
const source = document.querySelector("div.source");

source.addEventListener("cut", (event) => {
  const selection = document.getSelection();
  event.clipboardData.setData("text/plain", selection.toString().toUpperCase());
  selection.deleteFromDocument();
  event.preventDefault();
});
```

#### 结果

规范
--

| Specification |
| --- |
| Clipboard API and events # clipboard-event-cut |
| HTML Standard # handler-oncut |

浏览器兼容性
------

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

参见
--

* 相关联事件：`copy`、`paste`
* `Document` 目标上的这个事件：`cut` (en-US)
* `Window` 目标上的这个事件：`cut`


Element.attachShadow() - Web API 接口参考

Element.attachShadow()
======================

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

* Learn more
* See full compatibility
* Report feedback
**`Element.attachShadow()`** 方法给指定的元素挂载一个 Shadow DOM，并且返回对 `ShadowRoot` 的引用。

可以被挂载的 shadow DOM 元素
--------------------

要注意的是，不是每一种类型的元素都可以附加到 shadow root（影子根）下面。出于安全考虑，一些元素不能使用 shadow DOM（例如`<a>`），以及许多其他的元素。下面是一个**可以**挂载 shadow root 的元素列表：

* 任何带有有效的名称且可独立存在的（autonomous）自定义元素
* `<article>`
* `<aside>`
* `<blockquote>`
* `<body>`
* `<div>`
* `<footer>`
* `<h1>` (en-US)
* `<h2>` (en-US)
* `<h3>` (en-US)
* `<h4>` (en-US)
* `<h5>` (en-US)
* `<h6>` (en-US)
* `<header>`
* `<main>`
* `<nav>`
* `<p>`
* `<section>`
* `<span>`
语法
--
```

var shadowroot = element.attachShadow(shadowRootInit);
```

### 参数

`shadowRootInit`

一个 `ShadowRootInit` 字典，包括下列字段：

`mode 模式`

指定 Shadow DOM 树*封装模式*的字符串，可以是以下值：

* `open` shadow root 元素可以从 js 外部访问根节点，例如使用 `Element.shadowRoot`:
```

element.shadowRoot; // 返回一个 ShadowRoot 对象
```

* `closed` 拒绝从 js 外部访问关闭的 shadow root 节点
```

element.shadowRoot; // 返回 null
```

`delegatesFocus 焦点委托`

 一个布尔值，当设置为 `true` 时，指定减轻自定义元素的聚焦性能问题行为。
 当 shadow DOM 中不可聚焦的部分被点击时，让第一个可聚焦的部分成为焦点，并且 shadow host（影子主机）将提供所有可用的 `:focus` 样式。

### 返回值

返回一个 `ShadowRoot` 对象或者 `null`。

### 异常

| 异常 | 说明 |
| --- | --- |
| `InvalidStateError 无效状态错误` | 你添加的元素已经是一个 shadow host（影子主机）. |
| `NotSupportedError 不被支持错误` | 你应该添加 HTML 元素的命名空间之外的 shadow root，或者这个元素不能有其他 shadow 挂载到它上面 (见上). |

示例
--

下面的例子取至 word-count-web-component 片段 ( 现场看看 ). 你可以看到使用 `attachShadow()` 在代码中间创建一个 shadow root，然后我们可以将自定义元素的内容挂载添加到它上面。

```js
// 为新元素创建一个类
class WordCount extends HTMLParagraphElement {
  constructor() {
    // 在构造器中先调用一下 super
    super();

    // 计数器指向元素的父级
    var wcParent = this.parentNode;

    function countWords(node) {
      var text = node.innerText || node.textContent;
      return text.trim().split(/\s+/g).length;
    }

    var count = "Words: " + countWords(wcParent);

    // 创建一个 shadow root
    var shadow = this.attachShadow({ mode: "open" });

    // 创建文本节点并向其添加计数器
    var text = document.createElement("span");
    text.textContent = count;

    // 将其添加到 shadow root 上
    shadow.appendChild(text);

    // 当元素内容发生变化时更新计数
    setInterval(function () {
      var count = "Words: " + countWords(wcParent);
      text.textContent = count;
    }, 200);
  }
}

// 定义新元素
customElements.define("word-count", WordCount, { extends: "p" });
```

规范
--

| Specification |
| --- |
| DOM Standard # ref-for-dom-element-attachshadow① |

浏览器兼容性
------

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


Element：setHTML() 方法 - Web API 接口参考

Element：setHTML() 方法
====================

**实验性:** **这是一项实验性技术**
在将其用于生产之前，请仔细检查浏览器兼容性表格。

`Element` 接口的 **`setHTML()`** 方法用于解析和清理（sanitize）HTML 字符串，然后将其作为元素的子树插入到 DOM 中。应使用它来代替 `Element.innerHTML`，以将不受信任的 HTML 字符串插入到元素中。

解析过程会删除 HTML 字符串中的对于当前元素上下文无效的任何元素，而清理则会删除任何不安全或不需要的元素、属性或者注释。默认的 `Sanitizer()` 配置会默认删除 XSS 相关的输入，包括 `<script>` 标签、自定义元素和注释。可以使用 `Sanitizer()` (en-US) 构造函数的选项来自定义清理器配置。

**备注：** 如果字符串必须在之后的时间点插入到 DOM 中，例如目标元素尚不可用，则应使用 `Sanitizer.sanitizeFor()` (en-US) 代替此方法。

语法
--

```js
setHTML(input, options)
```

### 参数

`input`

定义要清理的 HTML 字符串。

`options` 可选

具有以下可选参数的选项对象：

`sanitizer`

一个 `Sanitizer` (en-US) 对象，用于定义输入的哪些元素将被清理。如果未指定，则使用默认的 `Sanitizer` (en-US) 对象。

### 返回值

无（`undefined`）。

### 异常

无。

示例
--

以下代码演示了如何清理 HTML 字符串并将其插入 id 为 `target` 的元素（`Element`）中。

```js
const unsanitized_string = "abc <script>alert(1)<" + "/script> def"; // 未清理的 HTML 字符串
const sanitizer1 = new Sanitizer(); // 默认的清理器；

// 获取 id 为“target”的元素并将其设置为清理后的字符串。
document
  .getElementById("target")
  .setHTML(unsanitized_string, { sanitizer: sanitizer1 });

// 结果（字符串）：“abc def”
```

**备注：** 该示例使用默认的清理器。`Sanitizer` (en-US) 构造函数用于配置清理器选项。

规范
--

| Specification |
| --- |
| HTML Sanitizer API # dom-element-sethtml |

浏览器兼容性
------

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

参见
--

* `Sanitizer.sanitizeFor()` (en-US)
* `HTML Sanitizer API` (en-US)


Element：滚轮事件 - Web API 接口参考

Element：滚轮事件
============

**滚轮**（**`wheel`**）事件会在滚动鼠标滚轮或操作其他类似输入设备时触发。

滚轮事件取代了已被弃用的非标准 `mousewheel` 事件。

**备注：** 不要将滚轮事件与 `scroll` 事件混淆。滚轮事件的默认行为是取决于实现的，所以不一定会触发 `scroll` 事件。即便如此，滚轮事件的 `delta*` 值也不一定能反映文档内容的实际滚动方向。因此，请不要依赖滚轮事件的 `delta*` 值来获得滚动方向。请通过检测目标的 `scroll` 事件的 `scrollLeft` 和 `scrollTop` 这两个值代替。

语法
--

在 `addEventListener()` 方法中使用事件名称，或设置事件处理器属性。

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

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

事件类型
----

`WheelEvent`。继承自 `Event`。

Event

UIEvent

MouseEvent

WheelEvent事件属性
----

*此接口从父接口：`MouseEvent`、`UIEvent` 和 `Event` 继承属性。*

`WheelEvent.deltaX` 只读

返回一个浮点数（`double`），表示水平方向的滚动量。

`WheelEvent.deltaY` 只读

返回一个浮点数（`double`），表示垂直方向的滚动量。

`WheelEvent.deltaZ` 只读

返回一个浮点数（`double`）表示 z 轴方向的滚动量。

`WheelEvent.deltaMode` 只读

返回一个无符号长整型数（`unsigned long`），表示 `delta*` 值滚动量的单位。允许的值为：

| 常量 | 值 | 描述 |
| --- | --- | --- |
| `WheelEvent.DOM_DELTA_PIXEL` | `0x00` | `delta*` 值以像素为单位。 |
| `WheelEvent.DOM_DELTA_LINE` | `0x01` | `delta*` 值以行为单位。每次鼠标单击都会滚动一行内容，其中行高计算的方法取决于浏览器。 |
| `WheelEvent.DOM_DELTA_PAGE` | `0x02` | `delta*` 值以页为单位。每次鼠标单击都会滚动一页内容。 |

`WheelEvent.wheelDelta` 只读
已弃用

返回一个（32 位）整型数，表示像素距离。

`WheelEvent.wheelDeltaX` 只读
已弃用

返回一个整型数，表示水平滚动量。

`WheelEvent.wheelDeltaY` 只读
已弃用

返回一个整型数，表示垂直滚动量。

示例
--

### 通过滚轮缩放元素

此示例展示了如何使用鼠标（或其他定点设备）滚轮缩放元素。

```html
<div>使用鼠标滚轮来进行缩放</div>
```

```css
body {
  min-height: 100vh;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

div {
  width: 105px;
  height: 105px;
  background: #cdf;
  padding: 5px;
}
```

```js
function zoom(event) {
  event.preventDefault();

  scale += event.deltaY \* -0.01;

  // Restrict scale
  scale = Math.min(Math.max(0.125, scale), 4);

  // Apply scale transform
  el.style.transform = `scale(${scale})`;
}

let scale = 1;
const el = document.querySelector("div");
el.onwheel = zoom;
```

### 使用 addEventListener 的等价形式

上面的事件处理器也可以通过 `addEventListener()` 方法来设置：

```js
el.addEventListener("wheel", zoom, { passive: false });
```

规范
--

| Specification |
| --- |
| UI Events # event-type-wheel |
| HTML Standard # handler-onwheel |

浏览器兼容性
------

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

参见
--

* `WheelEvent`
* Document：`wheel` 事件 (en-US)


element.outerHTML - Web API 接口参考

element.outerHTML
=================

`element` DOM 接口的`outerHTML`属性获取描述元素（包括其后代）的序列化 HTML 片段。它也可以设置为用从给定字符串解析的节点替换元素。

要仅获取元素内容的 HTML 表示形式或替换元素的内容，请使用 `innerHTML` 属性

语法
--
```

let content = element.outerHTML;
```

返回时，内容包含描述元素及其后代的序列化 HTML 片段。
```

element.outerHTML = content;
```

将元素替换为通过使用元素的父作为片段解析算法的上下文节点解析字符串内容生成的节点。

例子
--

获取一个元素的 outerHTML 属性的值：

```js
// HTML:
/\*
<div id="d">
 <p>Content</p>
 <p>Further Elaborated</p>
</div>
\*/

const d = document.getElementById("d");
console.log(d.outerHTML);

/\*
 字符串 '<div id="d"><p>Content</p><p>Further Elaborated</p></div>'
 被显示到控制台窗口
\*/
```

通过设置 outerHTML 属性来替换节点：

```js
// HTML:
/\*
<div id="container">
 <div id="d">This is a div.</div>
</div>
\*/

let container = document.getElementById("container");
let d = document.getElementById("d");

console.log(container.firstChild.nodeName);
// logs "div"

d.outerHTML = "<p>This paragraph replaced the original div.</p>";

console.log(container.firstChild.nodeName);
// logs "P"

/\*
 #d div 不再是文档树的一部分，新段替换了它。
 (不在页面中显示，但仍然在内存中)
\*/
```

注意事项
----

如果元素没有父元素，即如果它是文档的根元素，则设置其 outerHTML 属性将抛出一个带有错误代码 ***NO\_MODIFICATION\_ALLOWED\_ERR*** 的 `DOMException` 。例如：

```js
document.documentElement.outerHTML = "test";
// 抛出一个 DOMException
```

此外，虽然元素将在文档中被替换，设置了 outerHTML 属性的变量仍将保持对原始元素的引用：

```js
let p = document.getElementsByTagName("p")[0];
console.log(p.nodeName);
// 显示："P"
p.outerHTML = "<div>This div replaced a paragraph.</div>";

console.log(p.nodeName);
// 仍然为："P";
```

规范
--

| Specification |
| --- |
| DOM Parsing and Serialization # dom-element-outerhtml |

浏览器兼容性
------

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

参见
--

* MSDN: outerHTML 属性
* You Don't Need jQuery
* http://youmightnotneedjquery.com/
* insertAdjacentHTML


Element: DOMActivate event - Web API 接口参考

Element: DOMActivate event
==========================

**已弃用:** 不再推荐使用该特性。虽然一些浏览器仍然支持它，但也许已从相关的 web 标准中移除，也许正准备移除或出于兼容性而保留。请尽量不要使用该特性，并更新现有的代码；参见本页面底部的兼容性表格以指导你作出决定。请注意，该特性随时可能无法正常工作。

当元素被激活时发生，例如点击鼠标或键盘按键。

当元素被激活，如使用鼠标点击或使用键盘导航并激活至这个元素时， **`DOMActivate`** 事件被触发。

|  |  |
| --- | --- |
| Bubbles | Yes |
| Cancelable | Yes |
| Interface | `MouseEvent` |

示例
--
```

<svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny"
     xmlns:ev="http://www.w3.org/2001/xml-events"
     width="6cm" height="5cm" viewBox="0 0 600 500">

  <desc>Example: invoke an ECMAScript function from a DOMActivate event</desc>

  <!-- ECMAScript to change the radius -->
  <script type="application/ecmascript"><![CDATA[
    function change(evt) {
      var circle = evt.target;
      var currentRadius = circle.getFloatTrait("r");
      if (currentRadius == 100)
        circle.setFloatTrait("r", currentRadius * 2);
      else
        circle.setFloatTrait("r", currentRadius * 0.5);
    }
  ]]></script>

  <!-- Act on each DOMActivate event -->
  <circle cx="300" cy="225" r="100" fill="red">
    <handler type="application/ecmascript" ev:event="DOMActivate"> change(evt); </handler>
  </circle>

  <text x="300" y="480" font-family="Verdana" font-size="35" text-anchor="middle">
    Activate the circle to change its size
  </text>
</svg>
```

规范
--

| Specification |
| --- |
| UI Events # event-type-DOMActivate |

浏览器兼容性
------

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

参见
--

* `MouseEvent`
* `mousedown`
* `mouseup`
* `mousemove`


Element：setCapture() 方法 - Web API 接口参考

Element：setCapture() 方法
=======================

**已弃用:** 不再推荐使用该特性。虽然一些浏览器仍然支持它，但也许已从相关的 web 标准中移除，也许正准备移除或出于兼容性而保留。请尽量不要使用该特性，并更新现有的代码；参见本页面底部的兼容性表格以指导你作出决定。请注意，该特性随时可能无法正常工作。

**非标准:** 该特性是非标准的，请尽量不要在生产环境中使用它！

在处理 mousedown 事件的期间调用此方法以将所有的鼠标事件的目标都设置为该元素，直到释放鼠标按钮或者调用 `document.releaseCapture()`。

**警告：** 这个接口从未得到过很好的跨浏览器支持，你也许应使用 `element.setPointerCapture`（来自指针事件 API）代替。

语法
--

```js
setCapture(retargetToElement)
```

### 参数

`retargetToElement`

如果为 `true`，所有事件的目标都会被设置为这个元素；如果为 `false`，则事件也可以在这个元素的子元素上触发。

### 返回值

无（`undefined`）。

### 示例

在此示例中，当你在点中一个元素并且按住鼠标，然后再移动鼠标的时候，会显示鼠标的当前位置。

```html
<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>鼠标捕获示例</title>
    <style>
 #myButton {
 border: solid black 1px;
 color: black;
 padding: 2px;
 box-shadow: black 2px 2px;
 }
 </style>

    <script>
 function init() {
 const btn = document.getElementById("myButton");
 if (btn.setCapture) {
 btn.addEventListener("mousedown", mouseDown, false);
 btn.addEventListener("mouseup", mouseUp, false);
 } else {
 document.getElementById("output").textContent =
 "抱歉，当前浏览器似乎不支持 setCapture";
 }
 }

 function mouseDown(e) {
 e.target.setCapture();
 e.target.addEventListener("mousemove", mouseMoved, false);
 }

 function mouseUp(e) {
 e.target.removeEventListener("mousemove", mouseMoved, false);
 }

 function mouseMoved(e) {
 const output = document.getElementById("output");
 output.textContent = `位置：${e.clientX}, ${e.clientY}`;
 }
 </script>
  </head>
  <body onload="init()">
    <p>这是一个关于如何在 Gecko 2.0 中针对元素使用鼠标捕捉的示例。</p>
    <p><a id="myButton" href="#">在这里测试</a></p>
    <div id="output">还没有任何事件</div>
  </body>
</html>
```

查看在线演示

备注
--

这个元素可能无法被完全滚动到顶部或底部，这取决于其他元素的布局。

规范
--

不属于任何规范。

浏览器兼容性
------

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

参见
--

* `document.releaseCapture()`
* `element.setPointerCapture`


Element.setPointerCapture() - Web API 接口参考

Element.setPointerCapture()
===========================

`Element`接口的\*\*`setPointerCapture()`\*\* 方法用于将特定元素指定为未来指针事件的捕获目标。指针的后续事件将以捕获元素为目标，直到捕获被释放（通过`Element.releasePointerCapture()` (en-US)）。

**备注：** 一旦设置了 pointer capture，`pointerover`、`pointerout`、`pointerenter` 和 `pointerleave` 事件将不会被触发，直到越过设置了 capture 的元素的边界。这是因为其他元素将不能再作为 pointer 事件的目标了。这会影响到这些事件在其他元素上的触发。

### 指针捕获概述

指针捕获允许一个特定的指针事件 (`PointerEvent`) 事件从一个事件触发时候的目标重定位到另一个目标上。这个功能可以确保一个元素可以持续的接收到一个 pointer 事件，即使这个事件的触发点已经移出了这个元素（比如，在滚动的时候）。

语法
--
```

targetElement.setPointerCapture(pointerId);
```

### 参数

`pointerId`

`PointerEvent` 对象的`pointerId` (en-US) 。

### 返回值

返回 void。如果`pointerId`不匹配任何当前活动的指针事件，将抛出`DOMException`。

示例
--

当你按下它时，此示例在 `<div>` 上设置指针捕获。这使你可以滑动元素，即使指针移动到其边界之外也是如此。

### HTML

```html
<div id="slider">SLIDE ME</div>
```

### CSS

```css
div {
  width: 140px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fbe;
}
```

### JavaScript

```js
function beginSliding(e) {
  slider.onpointermove = slide;
  slider.setPointerCapture(e.pointerId);
}

function stopSliding(e) {
  slider.onpointermove = null;
  slider.releasePointerCapture(e.pointerId);
}

function slide(e) {
  slider.style.transform = `translate(${e.clientX - 70}px)`;
}

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

slider.onpointerdown = beginSliding;
slider.onpointerup = stopSliding;
```

### 结果

规范
--

| Specification |
| --- |
| Pointer Events # dom-element-setpointercapture |

浏览器兼容性
------

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

参见
--

* `Element.releasePointerCapture` (en-US)
* `Pointer Events`


Element：afterscriptexecute 事件 - Web API 接口参考

Element：afterscriptexecute 事件
=============================

**非标准:** 该特性是非标准的，请尽量不要在生产环境中使用它！

**警告：** 此事件是早期版本的规范中的一个提案。不要依赖它。

**`afterscriptexecute`** 事件在一个脚本执行完毕后触发。

这是一个 Gecko（Firefox）特有的私有事件。

|  |  |
| --- | --- |
| 是否冒泡 | 是 |
| 是否可取消 | 是 |
| 接口 | `Event` |
| 事件处理器属性 | 无 |

规范
--

不属于任何规范。

浏览器兼容性
------

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

参见
--

* `beforescriptexecute` 事件


Element：touchmove 事件 - Web API 接口参考

Element：touchmove 事件
====================

`touchmove` 事件在触点于触控平面上移动时触发。

语法
--

在类似 `addEventListener()` 这样的方法中使用事件名称，或设置事件处理器属性。

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

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

事件类型
----

`TouchEvent`。继承自 `Event`。

Event

UIEvent

TouchEvent事件属性
----

*此接口从其父接口 `UIEvent` 和 `Event` 继承属性。*

`TouchEvent.altKey` (en-US) 只读

一个布尔值，表示在事件触发时 Alt 键是否被按下。

`TouchEvent.changedTouches` 只读

一个包含所有的 `Touch` 对象的 `TouchList`，这些 `Touch` 对象表示在前一个 touch 事件和当前的事件之间，状态发生变化的独立触点。

`TouchEvent.ctrlKey` (en-US) 只读

一个布尔值，表示在事件触发时控制键是否被按下。

`TouchEvent.metaKey` (en-US) 只读

一个布尔值，表示在事件触发时 Meta 键是否被按下。

`TouchEvent.shiftKey` (en-US) 只读

一个布尔值，表示在事件触发时 Shift 键是否被按下。

`TouchEvent.targetTouches` 只读

一个包含所有的 `Touch` 对象的 `TouchList`，这些 `Touch` 对象表示当前与触摸表面接触的触点，且触点起始于事件发生的目标元素。

`TouchEvent.touches` 只读

一个包含所有的 `Touch` 对象的 `TouchList`，这些 `Touch` 对象表示当前与表面接触的触点（不论事件目标或状态变化）。

`TouchEvent.rotation`
非标准
 只读

自事件开始以来的旋转角度变化（以度为单位）。正值表示顺时针旋转；负值表示逆时针旋转。初始值为 `0.0`。

`TouchEvent.scale`
非标准
 只读

自事件开始以来，两个数值之间的距离（缩放倍数）。表示事件开始至现在，触点距离的缩放倍数（浮点数）。小于 1.0 表示向内收缩（缩小），大于 1.0 表示向外松开（放大）。初始值为 `1.0`。

示例
--

这些事件的代码示例可在这个专用页面查看：Touch 事件。

规范
--

| Specification |
| --- |
| Touch Events # event-touchmove |
| Touch Events # dom-globaleventhandlers-ontouchmove |

浏览器兼容性
------

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

参见
--

* Touch 事件
* `mousemove`
* 以 `Document` 为目标的相同事件：`touchmove`


Element：mouseover 事件 - Web API 接口参考

Element：mouseover 事件
====================

当一个定点设备（通常指鼠标）在一个元素本身或者其子元素上移动时，**`mouseover`** 事件在该元素上触发。

语法
--

在类似 `addEventListener()` 这样的方法中使用事件名称，或者设置事件处理器属性。

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

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

事件类型
----

一个 `MouseEvent`。继承自 `Event`。

Event

UIEvent

MouseEvent事件属性
----

*这个接口也继承其父接口 `UIEvent` 和 `Event` 的属性。*

`MouseEvent.altKey` 只读

当鼠标事件被触发时，如果 `alt` 键已被按下，返回 `true`。

`MouseEvent.button` 只读

触发鼠标事件时，按下按钮的编号（如果适用）。

`MouseEvent.buttons` 只读

触发鼠标事件时按下的按钮（如果存在）。

`MouseEvent.clientX` 只读

鼠标指针相对于局部 DOM 元素的 X 轴坐标。

`MouseEvent.clientY` 只读

鼠标指针相对于局部 DOM 元素的 Y 轴坐标。

`MouseEvent.ctrlKey` 只读

当鼠标事件被触发时，如果 `control` 键已被按下，返回 `true`。

`MouseEvent.layerX` (en-US)
非标准
 只读

返回事件相对于当前层的水平坐标。

`MouseEvent.layerY` (en-US)
非标准
 只读

返回事件相对于当前层的垂直坐标。

`MouseEvent.metaKey` 只读

当鼠标事件被触发时，如果 `meta` 键已被按下，返回 `true`。

`MouseEvent.movementX` 只读

鼠标指针相对于最后一次 `mousemove` 事件位置的 X 轴坐标。

`MouseEvent.movementY` 只读

鼠标指针相对于最后一次 `mousemove` 事件位置的 Y 轴坐标。

`MouseEvent.offsetX` 只读

鼠标指针相对于目标节点的内填充边的 X 轴坐标。

`MouseEvent.offsetY` 只读

鼠标指针相对于目标节点的内填充边的 Y 轴坐标。

`MouseEvent.pageX` 只读

鼠标指针相对于整个文档的 X 轴坐标。

`MouseEvent.pageY` 只读

鼠标指针相对于整个文档的 Y 轴坐标。

`MouseEvent.relatedTarget` 只读

事件的次要目标（如果存在）。

`MouseEvent.screenX` 只读

鼠标指针相对于屏幕的 X 轴坐标。

`MouseEvent.screenY` 只读

鼠标指针相对于屏幕的 Y 轴坐标。

`MouseEvent.shiftKey` 只读

当鼠标事件被触发时，如果 `shift` 键已被按下，返回 `true`。

`MouseEvent.mozInputSource`
非标准
 只读

生成事件的设备类型（`MOZ_SOURCE_*` 常量之一）。例如，这让你决定鼠标事件是否由实际的鼠标还是触摸事件生成（这可能会在一定程度影响你对事件相关坐标判断的准确性）。

`MouseEvent.webkitForce` (en-US)
非标准
 只读

单击时施加的压力。

`MouseEvent.x` 只读

`MouseEvent.clientX` 的别名。

`MouseEvent.y` 只读

`MouseEvent.clientY` 的别名。

示例
--

以下的示例阐述了 `mouseover` 和 `mouseenter` 之间的区别。

### HTML

```html
<ul id="test">
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ul>
```

### JavaScript

```js
const test = document.getElementById("test");

// 当光标移到无序列表上时，此处理函数将仅执行一次
test.addEventListener(
  "mouseenter",
  (event) => {
    // 突出显示鼠标悬停目标
    event.target.style.color = "purple";

    // 短暂延迟后重置颜色
    setTimeout(() => {
      event.target.style.color = "";
    }, 500);
  },
  false,
);

// 每次将光标移动到不同的列表项上时，此处理函数都会执行
test.addEventListener(
  "mouseover",
  (event) => {
    // 突出显示鼠标悬停目标
    event.target.style.color = "orange";

    // 短暂延迟后重置颜色
    setTimeout(() => {
      event.target.style.color = "";
    }, 500);
  },
  false,
);
```

### 结果

规范
--

| Specification |
| --- |
| UI Events # event-type-mouseover |
| HTML Standard # handler-onmouseover |

浏览器兼容性
------

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

参见
--

* 事件介绍
* `mousedown`
* `mouseup`
* `mousemove`
* `click`
* `dblclick`
* `mouseover`
* `mouseout`
* `mouseenter`
* `mouseleave`
* `contextmenu`


Element.toggleAttribute() - Web API 接口参考

Element.toggleAttribute()
=========================

`Element` 接口的 **`toggleAttribute()`** 方法切换给定元素的某个布尔值属性的状态（如果属性不存在则添加属性，属性存在则移除属性）。

语法
--
```

Element.toggleAttribute(name [, force]);
```

### 参数

`name`

A `DOMString` specifying the name of the attribute to be toggled. The attribute name is automatically converted to all lower-case when `toggleAttribute()` is called on an HTML element in an HTML document.

`force` 可选

A boolean value to determine whether the attribute should be added or removed, no matter whether the attribute is present or not at the moment.

### 返回值

`true` if attribute **`name`** is eventually present, and `false` otherwise.

### 异常

`InvalidCharacterError`

The specified attribute `name` contains one or more characters which are not valid in attribute names.

示例
--

在下面的例子中，`toggleAttribute()` 被用于切换 `<input>` 的 `readonly` 属性。

### HTML

```html
<input value="text" /> <button>toggleAttribute("readonly")</button>
```

### JavaScript

```js
var button = document.querySelector("button");
var input = document.querySelector("input");

button.addEventListener("click", function () {
  input.toggleAttribute("readonly");
});
```

### 结果

DOM methods dealing with element's attributes:

| Not namespace-aware, most commonly used methods | Namespace-aware variants (DOM Level 2) | DOM Level 1 methods for dealing with `Attr` nodes directly (seldom used) | DOM Level 2 namespace-aware methods for dealing with `Attr` nodes directly (seldom used) |
| --- | --- | --- | --- |
| `setAttribute` (DOM 1) | `setAttributeNS` | `setAttributeNode` | `setAttributeNodeNS` |
| `getAttribute` (DOM 1) | `getAttributeNS` (en-US) | `getAttributeNode` | `getAttributeNodeNS` |
| `hasAttribute` (DOM 2) | `hasAttributeNS` | - | - |
| `removeAttribute` (DOM 1) | `removeAttributeNS` | `removeAttributeNode` | - |

规范
--

| Specification |
| --- |
| DOM Standard # ref-for-dom-element-toggleattribute① |

浏览器兼容性
------

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


animationstart - Web API 接口参考

animationstart
==============

`animationstart` 事件会在 CSS 动画开始时触发。如果有 `animation-delay` 延时，事件会在延迟时效过后立即触发。为负数的延时时长会致使事件被触发时事件的 `elapsedTime` 属性值等于该时长的绝对值（并且，相应地，动画将直接播放该时长绝对值之后的动画）。

基本信息
----

规格

CSS Animations

接口

AnimationEvent

是否冒泡

是

事件可取消

否

目标

Document, Element

默认行为

无

属性表
---

| 属性 | 类型 | 描述 |
| --- | --- | --- |
| `target` 只读  | `EventTarget` | 事件来源（DOM 顶层目标）。 |
| `type` 只读  | `DOMString` | 事件类型 |
| `bubbles` 只读  | `boolean` | 事件是否正常冒泡？ |
| `cancelable` 只读  | `boolean` | 可否取消该事件？ |
| `animationName` 只读  | `DOMString` | 与该动画相关的 CSS 属性值。 |
| `elapsedTime` 只读  | `Float` | 动画运行时长，单位为秒，与直到该事件被触发的时间相一致，不包括任何动画暂停时的时长。此值应为 0 除非 `animation-delay` 是一个负值，这种情况下此值为 (-1 \* `animation-delay`)，并且动画将直接从此值后的序列开始播放。 |

规范
--

| Specification |
| --- |
| CSS Animations Level 1 # eventdef-globaleventhandlers-animationstart |

相关事件
----

* `animationstart`
* `animationend`
* `animationiteration`
参见
--

* Using CSS Animations (en-US)


Element.childElementCount - Web API 接口参考

Element.childElementCount
=========================

**`Element.childElementCount`** 只读属性返回一个***无符号长整型数字***，表示给定元素的子元素数。

**备注：** This property was initially defined in the `ElementTraversal` pure interface. As this interface contained two distinct set of properties, one aimed at `Node` that have children, one at those that are children, they have been moved into two separate pure interfaces, `Element` and `ChildNode`. In this case, `childElementCount` moved to `Element`. This is a fairly technical change that shouldn't affect compatibility.

语法
--
```

var count = node.childElementCount;
```

```
var elCount = elementNodeReference.childElementCount;
```

count

holds the return value an `unsigned long` (simply an integer) type.

node

is an object representing a `Document`, `DocumentFragment` or `Element`.

例子
--
```

var foo = document.getElementById("foo");
if (foo.childElementCount > 0) {
    // do something
}
```

下例演示了一个元素节点的`childElementCount`属性以及`children`属性的用法。
```

<head>
    <script type="text/javascript">
        function GetChildCount () {
            var container = document.getElementById ("container");

            var childCount = 0;
            //如果支持 childElementCount 属性
            if ('childElementCount' in container) {
                childCount = container.childElementCount;
            }
            else {
            //如果支持 children 属性，IE6/7/8
            //译者注：没有判断 nodeType 是否为 1，可能包含注释节点。
                if (container.children) {
                    childCount = container.children.length;
                }
                else {  //,如果都不支持，Firefox 3.5 之前版本
                    var child = container.firstChild;
                    while (child) {
                        if (child.nodeType == 1 /*Node.ELEMENT_NODE*/) {
                            childCount++;
                        }
                        child = child.nextSibling;
                    }
                }
            }

            alert ("The number of child elements is " + childCount);
        }
    </script>
</head>
<body>
    <div id="container" style="width:300px; background-color:#a0d0e0;">
        Some text inside the container.
        <input type="text" size="40" value="a child element of the container" />
        <div>
            <div>a descendant element of the container</div>
            <div>another descendant element of the container</div>
        </div>
    </div>
    <br /><br />
    <button onclick="GetChildCount ();">Get the number of container's child elements</button>
</body>
```

执行上面的例子：http://help.dottoro.com/external/examples/ljsfamht/childElementCount\_1.htm

浏览器兼容性
------

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

规范
--

childElementCount (W3C)

参见
--

* `children`
* `firstElementChild`
* `lastElementChild`
* `nextElementSibling`
* `previousElementSibling`


Element.scrollTo() - Web API 接口参考

Element.scrollTo()
==================

`Element` 的 **`scrollTo()`** 方法可以使界面滚动到给定元素的指定坐标位置。

语法
--

```js
scrollTo(x-coord, y-coord)
scrollTo(options)
```

### 参数

* `x-coord` 是你想要显示在左上角的元素沿水平轴的像素。
* `y-coord` 是你想要显示在左上角的元素沿垂直轴的像素。

- 或者 -

`options`

包含以下参数的对象：

`top`

指定沿 Y 轴滚动窗口或元素的像素数。

`left`

指定沿 X 轴滚动窗口或元素的像素数。

`behavior`

`smooth` 表示平滑滚动并产生过渡效果、`instant` 表示滚动会直接跳转到目标位置，没有过渡效果。`auto` 或缺省值表示浏览器会自动选择滚动时的过渡效果。

### 返回值

无 (`undefined`)。

示例
--

```js
element.scrollTo(0, 1000);
```

使用 `options`:

```js
element.scrollTo({
  top: 100,
  left: 100,
  behavior: "smooth",
});
```

规范
--

| Specification |
| --- |
| CSSOM View Module # dom-element-scrollto |

浏览器兼容性
------

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

参见
--

* `Element.scrollTop`, `Element.scrollLeft`
* `Window.scrollTo()`


Element.scrollLeftMax - Web API 接口参考

Element.scrollLeftMax
=====================

**非标准:** 该特性是非标准的，请尽量不要在生产环境中使用它！

这个 **`Element.scrollLeftMax`** 是只读的属性返回一个 `Number` 表示一个元素横向滚动条可滚动的最大距离。

语法
--
```

var pxl = elt.scrollLeftMax;
```

规范
--

*这个属性还没纳入规范。*

浏览器兼容性
------

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

更多
--

* `Element.scrollTopMax` 纵坐标用法相同。


元素：mouseleave 事件 - Web API 接口参考

元素：mouseleave 事件
================

**`mouseleave`** 事件在定点设备（通常是鼠标）的指针移出某个元素时被触发。

`mouseleave` 和 `mouseout` 是相似的，但是两者的不同在于 `mouseleave` 不会冒泡而 `mouseout` 会冒泡。这意味着当指针离开元素*及*其所有后代时，会触发 `mouseleave`，而当指针离开元素*或*离开元素的后代（即使指针仍在元素内）时，会触发 `mouseout`。

语法
--

在类似 `addEventListener()` 这样的方法中使用事件名称，或设置事件处理器属性。

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

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

事件类型
----

`MouseEvent`，继承自 `Event`。

Event

UIEvent

MouseEvent事件属性
----

*此接口也从其父接口 `UIEvent` 和 `Event` 继承属性。*

`MouseEvent.altKey` 只读

在鼠标事件触发时，如果 `alt` 键被按下，则返回 `true`。

`MouseEvent.button` 只读

在鼠标事件触发时，按下的按钮编号（如果适用）。

`MouseEvent.buttons` 只读

在鼠标事件触发时，按下的按钮。

`MouseEvent.clientX` 只读

鼠标指针在本地（DOM 内容）坐标系中的 X 坐标。

`MouseEvent.clientY` 只读

鼠标指针在本地（DOM 内容）坐标系中的 Y 坐标。

`MouseEvent.ctrlKey` 只读

在鼠标事件触发时，如果 `control` 键被按下，则返回 `true`。

`MouseEvent.layerX` (en-US)
非标准
 只读

返回与事件相对于当前图层的水平坐标。

`MouseEvent.layerY` (en-US)
非标准
 只读

返回与事件相对于当前图层的垂直坐标。

`MouseEvent.metaKey` 只读

在鼠标事件触发时，如果 `meta` 键被按下，则返回 `true`。

`MouseEvent.movementX` 只读

鼠标指针相对于上一次 `mousemove` 事件的 X 坐标。

`MouseEvent.movementY` 只读

鼠标指针相对于上一次 `mousemove` 事件的 Y 坐标。

`MouseEvent.offsetX` 只读

鼠标指针相对于目标节点的内填充边的 X 坐标。

`MouseEvent.offsetY` 只读

鼠标指针相对于目标节点的内填充边的 Y 坐标。

`MouseEvent.pageX` 只读

鼠标指针相对于整个文档的 X 坐标。

`MouseEvent.pageY` 只读

鼠标指针相对于整个文档的 Y 坐标。

`MouseEvent.relatedTarget` 只读

事件的次要目标（如果适用）。

`MouseEvent.screenX` 只读

鼠标指针在全局（屏幕）坐标系中的 X 坐标。

`MouseEvent.screenY` 只读

鼠标指针在全局（屏幕）坐标系中的 Y 坐标。

`MouseEvent.shiftKey` 只读

在鼠标事件触发时，如果 `shift` 键被按下，则返回 `true`。

`MouseEvent.mozInputSource`
非标准
 只读

产生该事件的设备类型（`MOZ_SOURCE_*` 常量之一）。例如，你可以确定鼠标事件是由实际的鼠标还是由触摸事件生成的（这可能会影响你判断与事件关联的坐标时的准确度）。

`MouseEvent.webkitForce` (en-US)
非标准
 只读

点击时施加的压力量。

`MouseEvent.x` 只读

`MouseEvent.clientX` 的别名。

`MouseEvent.y` 只读

`MouseEvent.clientY` 的别名。

### `mouseleave` 事件的行为

![mouseleave 的行为](/zh-CN/docs/Web/API/Element/mouseleave_event/mouseleave.png)

在指针离开层次结构时，`mouseleave` 事件将被发送到层次结构的每一个元素。当指针从文本（Text）移动到最外层的 div 之外的区域时，会有四个事件分别被发送到层次结构的四个元素。

### `mouseout` 事件的行为

![mouseout 的行为](/zh-CN/docs/Web/API/Element/mouseleave_event/mouseout.png)

单个 `mouseout` 事件被发送到 DOM 树中最深的元素，然后其在层次结构中逐层向上冒泡，直至其被事件处理器取消或到达根元素。

示例
--

`mouseout` 文档有一个示例，说明了 `mouseout` 和 `mouseleave` 之间的区别。

### mouseleave

以下示例使用 `mouseenter` 事件，在鼠标进入委派了该事件的 `<div>` 的空间时，改变该元素的边框。然后在列表中添加一条带有 `mouseenter` 和 `mouseleave` 事件编号的记录。

#### HTML

```html
<div id="mouseTarget">
  <ul id="unorderedList">
    <li>还没有事件！</li>
  </ul>
</div>
```

#### CSS

向 `<div>` 添加一些样式，使其更加可视化。

```css
#mouseTarget {
  box-sizing: border-box;
  width: 15rem;
  border: 1px solid #333;
}
```

#### JavaScript

```js
let enterEventCount = 0;
let leaveEventCount = 0;
const mouseTarget = document.getElementById("mouseTarget");
const unorderedList = document.getElementById("unorderedList");

mouseTarget.addEventListener("mouseenter", (e) => {
  mouseTarget.style.border = "5px dotted orange";
  enterEventCount++;
  addListItem(`这是 mouseenter 事件 ${enterEventCount}.`);
});

mouseTarget.addEventListener("mouseleave", (e) => {
  mouseTarget.style.border = "1px solid #333";
  leaveEventCount++;
  addListItem(`这是 mouseleave 事件 ${leaveEventCount}.`);
});

function addListItem(text) {
  // 使用提供的文本创建一个新的文本节点
  const newTextNode = document.createTextNode(text);

  // 创建一个新的 li 元素
  const newListItem = document.createElement("li");

  // 将文本节点添加到 li 元素中
  newListItem.appendChild(newTextNode);

  // 将新创建的列表元素添加到列表中
  unorderedList.appendChild(newListItem);
}
```

#### 结果

规范
--

| Specification |
| --- |
| UI Events # event-type-mouseleave |
| HTML Standard # handler-onmouseleave |

浏览器兼容性
------

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

参见
--

* 事件介绍
* `mousedown`
* `mouseup`
* `mousemove`
* `click`
* `dblclick`
* `mouseover`
* `mouseout`
* `mouseenter`
* `mouseleave`
* `contextmenu`


HTMLElement：transitionstart 事件 - Web API 接口参考

HTMLElement：transitionstart 事件
==============================

**`transitionstart`** 事件会在 CSS transition 实际开始的时候触发，或者说在某个 `transition-delay` 已经结束之后触发。

|  |  |
| --- | --- |
| 是否冒泡 | 是 |
| 是否可取消 | 否 |
| 接口 | `TransitionEvent` |
| 事件处理器属性 | `ontransitionstart` |

示例
--

下列代码对 `transitionstart` 事件添加了一个监听器：

```js
element.addEventListener("transitionstart", () => {
  console.log("transition 开始");
});
```

一样的代码，但是使用 `ontransitionstart` 属性来替代 `addEventListener()`：

```js
element.ontransitionstart = () => {
  console.log("transition 开始");
};
```

### 运行实例

在下面的例子中，我们有一个简单的 `<div>` 元素，并设置了一个包含 delay 的 transition 样式。

```html
<div class="transition">Hover over me</div>
<div class="message"></div>
```

```css
.transition {
  width: 100px;
  height: 100px;
  background: rgba(255, 0, 0, 1);
  transition-property: transform, background;
  transition-duration: 2s;
  transition-delay: 1s;
}

.transition:hover {
  transform: rotate(90deg);
  background: rgba(255, 0, 0, 0);
}
```

对此，我们再添加一些 JavaScript 代码来指出 `transitionstart` 和 `transitionrun` (en-US) 事件在哪里触发。

```js
const transition = document.querySelector(".transition");
const message = document.querySelector(".message");

transition.addEventListener("transitionrun", function () {
  message.textContent = "transitionrun 触发了";
});

transition.addEventListener("transitionstart", function () {
  message.textContent = "transitionstart 触发了";
});

transition.addEventListener("transitionend", function () {
  message.textContent = "transitionend 触发了";
});
```

不同的地方是：

* transitionrun 在 transition 创建的时候被触发。（或者说在某个 delay 开始的时候）
* transitionstart 在动画实际开始的时候被触发。 (或者说在某个 delay 结束的时候)
规范
--

| Specification |
| --- |
| CSS Transitions # transitionstart |

浏览器兼容性
------

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

参见
--

* `GlobalEventHandlers.ontransitionstart` 事件处理器
* `TransitionEvent` 接口
* CSS 属性：`transition`, `transition-delay`, `transition-duration`, `transition-property`, `transition-timing-function`
* 相关的事件：`transitionend`, `transitionrun` (en-US), `transitioncancel` (en-US)
* 在 `Document` targets 上的此事件：`transitionstart` (en-US)
* 在 `Window` targets 上的此事件：`transitionstart` (en-US)


Element：paste 事件 - Web API 接口参考

Element：paste 事件
================

当用户通过浏览器的用户界面发起“粘贴”动作时，将触发 **`paste`** 事件。

如果光标处于可编辑的上下文中（例如，在 `<textarea>` 或 `contenteditable` 属性设置为 `true` 的元素中），那么默认动作是将剪贴板的内容插入光标位置的文档中。

事件处理器可以通过调用事件 `clipboardData` 属性的 `getData()` 方法来访问剪贴板内容。

要覆盖默认行为（例如插入一些不同的数据或转换剪贴板内容），事件处理程序必须使用 `event.preventDefault()` 取消默认动作，然后手动插入其想要的数据。

可以构建和派发一个合成 `paste` 事件，但这不会影响系统剪贴板或文档内容。

语法
--

在类似于 `addEventListener()` 这样的方法中使用事件名，或设置事件处理器属性。

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

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

事件类型
----

`ClipboardEvent`。继承自 `Event`。

Event

ClipboardEvent示例
--

### 实时示例

#### HTML

```html
<div class="source" contenteditable="true">从这个盒子复制文字</div>
<div class="target" contenteditable="true">在这里粘贴</div>
```

```
div.source,
div.target {
  border: 1px solid gray;
  margin: 0.5rem;
  padding: 0.5rem;
  height: 1rem;
  background-color: #e9eef1;
}
```

#### JavaScript

```js
const target = document.querySelector("div.target");

target.addEventListener("paste", (event) => {
  event.preventDefault();

  let paste = (event.clipboardData || window.clipboardData).getData("text");
  paste = paste.toUpperCase();
  const selection = window.getSelection();
  if (!selection.rangeCount) return;
  selection.deleteFromDocument();
  selection.getRangeAt(0).insertNode(document.createTextNode(paste));
  selection.collapseToEnd();
});
```

#### 结果

规范
--

| Specification |
| --- |
| Clipboard API and events # clipboard-event-paste |
| HTML Standard # handler-onpaste |

浏览器兼容性
------

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

参见
--

* 相关联事件：`cut`、`copy`
* `Document` 目标上的这个事件：`paste` (en-US)
* `Window` 目标上的这个事件：`paste`


compositionend - Web API 接口参考

compositionend
==============

当文本段落的组成完成或取消时，compositionend 事件将被触发 (具有特殊字符的触发，需要一系列键和其他输入，如语音识别或移动中的字词建议)。

|  |  |
| --- | --- |
| Bubbles | Yes |
| Cancelable | Yes |
| Target objects | `Element` |
| Interface | `TouchEvent` |

Properties
----------

| Property | Type | Description |
| --- | --- | --- |
| `target` 只读  | `EventTarget` | 聚焦元素处理成分 |
| `type` 只读  | `DOMString` | 事件类型 |
| `bubbles` 只读  | `boolean` | 事件是否冒泡 |
| `cancelable` 只读  | `boolean` | 是否可以取消该事件 |
| `view` 只读  | `WindowProxy` | `Document.defaultView` (`window` of the document) |
| `detail` 只读  | `long` (`float`) | 0. |
| `data` 只读  | `DOMString` (string) | 正在编辑的原始字符串，否则为空字符串。只读。 |
| `locale` | `DOMString` (string) | 组合事件的语言代码 (如果可用);否则，为空字符串。只读。 |

规范
--

| Specification |
| --- |
| UI Events # event-type-compositionend |

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

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

Related events
--------------

* `compositionstart`
* `compositionupdate`


Element.prepend() - Web API 接口参考

Element.prepend()
=================

**`Element.prepend`** 方法可以在父节点的第一个子节点之前插入一系列`Node`对象或者`DOMString`对象。`DOMString`会被当作`Text` (en-US)节点对待（也就是说插入的不是 HTML 代码）。

语法
--
```

Element.prepend((Node or DOMString)... nodes);
```

### 参数

`nodes`

要插入的一系列`Node`或者`DOMString`。

### 返回值

`undefined`.

### 异常

* `HierarchyRequestError`：节点不能插入当前层级内。
示例
--

### Prepending an element

```js
var parent = document.createElement("div");
var p = document.createElement("p");
var span = document.createElement("span");
parent.append(p);
parent.prepend(span);

console.log(parent.childNodes); // NodeList [ <span>, <p> ]
```

### Prepending text

```js
var parent = document.createElement("div");
parent.append("Some text");
parent.prepend("Headline: ");

console.log(parent.textContent); // "Headline: Some text"
```

### Appending an element and text

```js
var parent = document.createElement("div");
var p = document.createElement("p");
parent.prepend("Some text", p);

console.log(parent.childNodes); // NodeList [ #text "Some text", <p> ]
```

### `Element.prepend()` is unscopable

`prepend()` 不能在 with 语句内使用，详情参考 `Symbol.unscopables`。

```js
var parent = document.createElement("div");

with (parent) {
  prepend("foo");
}
// ReferenceError: prepend is not defined
```

规范
--

| Specification |
| --- |
| DOM Standard # ref-for-dom-parentnode-prepend① |

浏览器兼容性
------

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

参见
--

* `Element.append()`
* `Node.appendChild()`
* `Node.insertBefore()`
* `Element.before()`
* `Element.insertAdjacentElement()`
* `NodeList`


Element：mouseenter 事件 - Web API 接口参考

Element：mouseenter 事件
=====================

**`mouseenter`** 事件在定点设备（通常指鼠标）首次移动到元素的激活区域内时，在该元素上触发。

语法
--

在类似 `addEventListener()` 这样的方法中使用事件名称，或者设置事件处理器属性。

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

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

事件类型
----

一个 `MouseEvent`。继承自 `Event`。

Event

UIEvent

MouseEvent事件属性
----

*这个接口也继承其父接口 `UIEvent` 和 `Event` 的属性。*

`MouseEvent.altKey` 只读

当鼠标事件被触发时，如果 `alt` 键已被按下，返回 `true`。

`MouseEvent.button` 只读

触发鼠标事件时，按下按钮的编号（如果适用）。

`MouseEvent.buttons` 只读

触发鼠标事件时按下的按钮（如果存在）。

`MouseEvent.clientX` 只读

鼠标指针相对于局部 DOM 元素的 X 轴坐标。

`MouseEvent.clientY` 只读

鼠标指针相对于局部 DOM 元素的 Y 轴坐标。

`MouseEvent.ctrlKey` 只读

当鼠标事件被触发时，如果 `control` 键已被按下，返回 `true`。

`MouseEvent.layerX` (en-US)
非标准
 只读

返回事件相对于当前层的水平坐标。

`MouseEvent.layerY` (en-US)
非标准
 只读

返回事件相对于当前层的垂直坐标。

`MouseEvent.metaKey` 只读

当鼠标事件被触发时，如果 `meta` 键已被按下，返回 `true`。

`MouseEvent.movementX` 只读

鼠标指针相对于最后一次 `mousemove` 事件位置的 X 轴坐标。

`MouseEvent.movementY` 只读

鼠标指针相对于最后一次 `mousemove` 事件位置的 Y 轴坐标。

`MouseEvent.offsetX` 只读

鼠标指针相对于目标节点的内填充边的 X 轴坐标。

`MouseEvent.offsetY` 只读

鼠标指针相对于目标节点的内填充边的 Y 轴坐标。

`MouseEvent.pageX` 只读

鼠标指针相对于整个文档的 X 轴坐标。

`MouseEvent.pageY` 只读

鼠标指针相对于整个文档的 Y 轴坐标。

`MouseEvent.relatedTarget` 只读

事件的次要目标（如果存在）。

`MouseEvent.screenX` 只读

鼠标指针相对于屏幕的 X 轴坐标。

`MouseEvent.screenY` 只读

鼠标指针相对于屏幕的 Y 轴坐标。

`MouseEvent.shiftKey` 只读

当鼠标事件被触发时，如果 `shift` 键已被按下，返回 `true`。

`MouseEvent.mozInputSource`
非标准
 只读

生成事件的设备类型（`MOZ_SOURCE_*` 常量之一）。例如，这让你决定鼠标事件是否由实际的鼠标还是触摸事件生成（这可能会在一定程度影响你对事件相关坐标判断的准确性）。

`MouseEvent.webkitForce` (en-US)
非标准
 只读

单击时施加的压力。

`MouseEvent.x` 只读

`MouseEvent.clientX` 的别名。

`MouseEvent.y` 只读

`MouseEvent.clientY` 的别名。

使用说明
----

尽管与 `mouseover` 类似，但是 `mouseenter` 的不同之处在于当鼠标指针从它后代的物理空间移动到它自己的物理空间时，它不会冒泡，也不会发送给它的任何后代。

### `mouseenter` 事件的行为

![鼠标移入行为图](/zh-CN/docs/Web/API/Element/mouseenter_event/mouseenter.png)
 移入时，一个 `mouseenter` 事件会向层次结构中的每个元素发送一个鼠标输入事件。在这里，当指针到达文本时，四个事件被发送到层次结构中的四个元素。

### `mouseover` 事件的行为

![鼠标悬停行为图](/zh-CN/docs/Web/API/Element/mouseenter_event/mouseover.png)
 单个 `mouseover` 事件被发送到 DOM 树最深的元素中，然后它会按层次结构冒泡，直到它被处理程序取消或者到达根元素。

由于层次结构很深，发送到 `mouseover` 事件可能相当多，并导致严重的性能问题。在这种情况下，最好是监听 `mouseenter` 事件。

结合相应的 `mouseleave`（当鼠标退出其内容区域时向元素触发），`mouseenter` 事件的作用与 CSS 伪类 `:hover` 非常相似。

示例
--

`mouseover` 文档有一个阐述了 `mouseover` 和 `mouseenter` 之间区别的示例。

### mouseenter

以下简单的示例展示了当鼠标进入分配给它的空间时，`mouseenter` 事件将改变 `div` 上的边框。然后它会将 `mouseenter` 或 `mouseleave` 事件触发次数的文本添加到列表中。

#### HTML

```html
<div id="mouseTarget">
  <ul id="unorderedList">
    <li>No events yet!</li>
  </ul>
</div>
```

#### CSS

向 `div` 添加一些样式，使其更加可视化。

```css
#mouseTarget {
  box-sizing: border-box;
  width: 15rem;
  border: 1px solid #333;
}
```

#### JavaScript

```js
let enterEventCount = 0;
let leaveEventCount = 0;
const mouseTarget = document.getElementById("mouseTarget");
const unorderedList = document.getElementById("unorderedList");

mouseTarget.addEventListener("mouseenter", (e) => {
  mouseTarget.style.border = "5px dotted orange";
  enterEventCount++;
  addListItem(`This is mouseenter event ${enterEventCount}.`);
});

mouseTarget.addEventListener("mouseleave", (e) => {
  mouseTarget.style.border = "1px solid #333";
  leaveEventCount++;
  addListItem(`This is mouseleave event ${leaveEventCount}.`);
});

function addListItem(text) {
  // 使用提供的文本创建新的文本节点
  const newTextNode = document.createTextNode(text);

  // 创建一个新的 li 元素
  const newListItem = document.createElement("li");

  // 将文本节点添加到 li 元素
  newListItem.appendChild(newTextNode);

  // 将新创建的列表项添加到列表中
  unorderedList.appendChild(newListItem);
}
```

#### 结果

规范
--

| Specification |
| --- |
| UI Events # event-type-mouseenter |
| HTML Standard # handler-onmouseenter |

浏览器兼容性
------

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

参见
--

* 事件介绍
* `mousedown`
* `mouseup`
* `mousemove`
* `click`
* `dblclick`
* `mouseover`
* `mouseout`
* `mouseenter`
* `mouseleave`
* `contextmenu`


GlobalEventHandlers.onpointerout - Web API 接口参考

GlobalEventHandlers.onpointerout
================================

一个`global event handler` 用于处理 `pointerout` 事件。

语法
--
```

var outHandler = targetElement.onpointerout;
```

### 返回值

`outHandler`

元素`targetElement`的指针输出事件处理程序。

例子
--

这个例子展示了两种方式来使用 onpointerout 设置元素的 pointerout 事件处理程序。

```js
<html>
<script>
function outHandler(ev) {
 // Process the pointerout event
}
function init() {
 var el=document.getElementById("target1");
 el.onpointerout = outHandler;
}
</script>
<body onload="init();">
<div id="target1"> Touch me ... </div>
<div id="target2" onpointerout="outHandler(event)"> Touch me ... </div>
</body>
</html>
```

规范
--

| Specification |
| --- |
| Pointer Events # the-pointerout-event |
| Pointer Events # dom-globaleventhandlers-onpointerout |

浏览器兼容性
------

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

参见
--

* 相关事件
    + `gotpointercapture`
    + `lostpointercapture`
    + `pointerover`
    + `pointerenter`
    + `pointerdown`
    + `pointermove`
    + `pointerup`
    + `pointercancel`
    + `pointerleave`


Element.getAttributeNode() - Web API 接口参考

Element.getAttributeNode()
==========================

概要
--

返回指定元素的指定属性节点

语法
--
```

var attrNode = element.getAttributeNode(attrName);
```

* `attrNode` 获得的属性返回值，是 Attr 节点，nodeType 为 2
* `attrName` 是一个包含属性名称的 字符串
举例
--
```

// html: <div id="top" />
var t = document.getElementById("top");
var idAttr = t.getAttributeNode("id");
alert(idAttr.value == "top")
```

注意
--

当在一个被标记为 HTML 文档的 DOM 中的 HTML 元素上调用这个方法时，getAttributeNode 会将参数转变为小写形式。

Attr 节点继承自 Node，但不被认为是文档树的一部分。Node 上定义的常用属性，如 parentNode, previousSibling，和 nextSibling 对于 Attr 节点来说都为 null。然而，你可以使用 ownerElement 来得到拥有这个属性的元素。

getAttribute 通常用于替换 getAttributeNode 方法，来获得元素的属性值。性能也更快。性能对比是 element.id 大于 element.getAttribute('id') 大于 element.getAttributeNode('id').nodeValue.

DOM methods dealing with element's attributes:

| Not namespace-aware, most commonly used methods | Namespace-aware variants (DOM Level 2) | DOM Level 1 methods for dealing with `Attr` nodes directly (seldom used) | DOM Level 2 namespace-aware methods for dealing with `Attr` nodes directly (seldom used) |
| --- | --- | --- | --- |
| `setAttribute` (DOM 1) | `setAttributeNS` | `setAttributeNode` | `setAttributeNodeNS` |
| `getAttribute` (DOM 1) | `getAttributeNS` (en-US) | `getAttributeNode` | `getAttributeNodeNS` |
| `hasAttribute` (DOM 2) | `hasAttributeNS` | - | - |
| `removeAttribute` (DOM 1) | `removeAttributeNS` | `removeAttributeNode` | - |

规范
--

* DOM Level 2 Core: getAttributeNode (introduced in DOM Level 1 Core)
* HTML 5: APIs in HTML documents


Element.matches() - Web API 接口参考

Element.matches()
=================

如果元素被指定的选择器字符串选择，**`Element.matches()`** 方法返回 true; 否则返回 false。

**警告：** 有一些浏览器使用前缀，在非标准名称 matchesSelector () 下实现了这个方法！

语法
--
```

let result = element.matches(selectorString);
```

* `result` 的值为 `true` 或 `false`.
* `selectorString` 是个 css 选择器字符串。
例子
--

```html
<ul id="birds">
  <li>Orange-winged parrot</li>
  <li class="endangered">Philippine eagle</li>
  <li>Great white pelican</li>
</ul>

<script type="text/javascript">
 var birds = document.getElementsByTagName("li");

 for (var i = 0; i < birds.length; i++) {
 if (birds[i].matches(".endangered")) {
 console.log("The " + birds[i].textContent + " is endangered!");
 }
 }
</script>
```

```js
<div id="foo">This is the element!</div>
  <script type="text/javascript">
    var el = document.getElementById("foo");
    if (el.mozMatchesSelector("div")) {
      alert("Match!");
    }
  </script>
```

会显示弹出框，因为"div"选择器可以选择到 el 元素。

异常
--

`SYNTAX_ERR`

如果给定的 css 选择器无效。在 Gecko 2.0 之前，该方法会返回`false,2.0 之后`,会直接抛出异常。

替代方案 (Polyfill)
---------------

对于不支持 `Element.matches()` 或`Element.matchesSelector()，但支持`document.querySelectorAll() 方法的`浏览器，存在以下替代方案`

```js
if (!Element.prototype.matches) {
  Element.prototype.matches =
    Element.prototype.matchesSelector ||
    Element.prototype.mozMatchesSelector ||
    Element.prototype.msMatchesSelector ||
    Element.prototype.oMatchesSelector ||
    Element.prototype.webkitMatchesSelector ||
    function (s) {
      var matches = (this.document || this.ownerDocument).querySelectorAll(s),
        i = matches.length;
      while (--i >= 0 && matches.item(i) !== this) {}
      return i > -1;
    };
}
```

>
> 关于 Polyfill 的补充：
>
>
> * Polyfill Wikipedia
> * What are Polyfills in Javascript ?
>
>
>

规范
--

| Specification |
| --- |
| DOM Standard # ref-for-dom-element-matches① |

浏览器兼容性
------

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


Element.className - Web API 接口参考

Element.className
=================

概述
--

**className** 获取或设置指定元素的 class 属性的值。

语法
--
```

let cName = elementNodeReference.className;

elementNodeReference.className = cName;
```

* *cName*是一个字符串变量，表示当前元素的`class`属性的值，可以是由空格分隔的多个`class`属性值。
示例
--

```js
let elm = document.getElementById("div1");

if (elm.className == "fixed") {
  // 跳过 class 属性为特定值的元素
  goNextElement();
}
```

注释
--

**备注：** 使用名称`className`而不是`class`作为属性名，是因为"class" 在 JavaScript 中是个保留字。

规范
--

| Specification |
| --- |
| DOM Standard # ref-for-dom-element-classname① |

浏览器兼容性
------

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

参见
--

* `element.classList`


Element：ariaLive 属性 - Web API 接口参考

Element：ariaLive 属性
===================

`Element` 接口的 **`ariaLive`** 属性反映了 `aria-live` (en-US) 属性的值，该属性表示一个元素将被更新，并描述了用户代理、辅助技术和用户可以从实时区域中期望的更新类型。

值
-

一个具有以下值之一的字符串：

`"assertive"`

表示对该区域的更新具有最高优先级，并应立即呈现给用户。

`"off"`

表示除非用户当前聚焦于该区域，否则不应向用户呈现对该区域的更新。

`"polite"`

表示应在下一个适当的机会（例如，在说完当前句子或用户暂停输入时）呈现对该区域的更新。

示例
--

在此示例中，ID 为 `planetInfo` 的元素上的 `aria-live` (en-US) 属性设置为 `"polite"`。然后我们将值更新为 `"assertive"`。

```html
<div role="region" id="planetInfo" aria-live="polite">
  <h2 id="planetTitle">未选择星球</h2>
  <p id="planetDescription">选择一个星球以查看其描述</p>
</div>
```

```js
let el = document.getElementById("planetInfo");
console.log(el.ariaLive); // "polite"
el.ariaLive = "assertive";
console.log(el.ariaLive); // "assertive"
```

规范
--

| Specification |
| --- |
| Accessible Rich Internet Applications (WAI-ARIA) # dom-ariamixin-arialive |

浏览器兼容性
------

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


Element.animate() - Web API 接口参考

Element.animate()
=================

Baseline 2022
-------------

Newly availableSince September 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
`Element` 接口的 **`animate()`** 方法是创建一个新的 `Animation` 的便捷方法，将它应用于元素，然后运行动画。它将返回一个新建的 `Animation` 对象实例

**备注：** 一个元素上可以应用多个动画效果。你可以通过调用 `Element.getAnimations()` (en-US) 函数获得这些动画效果的一个列表。

语法
--

```js
animate(keyframes, options)
```

### 参数

`keyframes`

关键帧对象数组，**或**一个关键帧对象（其属性为可迭代值的数组）。参见关键帧格式以了解详细信息。

`options`

**代表动画持续时间的整数**（以毫秒为单位），或者一个包含一个或多个时间属性（在 `KeyframeEffect()` options 参数 (en-US)和下方列出）的对象：

`id` 可选

在 `animate()` 里可作为唯一标识的属性：一个用来引用动画的字符串。

### 返回值

返回 `Animation`。

示例
--

### 旋转和缩放

在以下示例中，我们使用 `animate()` 方法旋转和缩放元素。

#### HTML

```html
<div class="newspaper">翻报纸真的<br />会头晕</div>
```

#### CSS

```css
html,
body {
  height: 100%;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: black;
}

.newspaper {
  padding: 0.5rem;
  text-transform: uppercase;
  text-align: center;
  background-color: white;
  cursor: pointer;
}
```

#### JavaScript

```js
const newspaperSpinning = [
  { transform: "rotate(0) scale(1)" },
  { transform: "rotate(360deg) scale(0)" },
];

const newspaperTiming = {
  duration: 2000,
  iterations: 1,
};

const newspaper = document.querySelector(".newspaper");

newspaper.addEventListener("click", () => {
  newspaper.animate(newspaperSpinning, newspaperTiming);
});
```

#### 结果

### Down the Rabbit Hole 演示

在演示 Down the Rabbit Hole (with the Web Animation API) 中，我们用 `animate()` 来快速创建并运行使 `#tunnel` 元素无限循环缓慢升起的动画。注意关键帧的对象数组和时间可选项。

```js
document.getElementById("tunnel").animate(
  [
    // keyframes
    { transform: "translateY(0px)" },
    { transform: "translateY(-300px)" },
  ],
  {
    // timing options
    duration: 1000,
    iterations: Infinity,
  },
);
```

### 隐含关键帧

在新版的浏览器中，你可以只设置动画的开始或结束状态（即单个关键帧），如果可以，浏览器会自动推断动画的另一端（结束或开始）的状态。例如，考虑这个简单动画——关键帧对象如下所示：

```js
let rotate360 = [{ transform: "rotate(360deg)" }];
```

我们仅指定了动画的结束状态，开始状态是隐含的。

规范
--

| Specification |
| --- |
| Web Animations # dom-animatable-animate |

浏览器兼容性
------

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

参见
--

* Web Animation API
* `Element.getAnimations()` (en-US)
* `Animation`


Element：input 事件 - Web API 接口参考

Element：input 事件
================

Baseline 2023
-------------

Newly availableSince March 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
当一个 `<input>`, `<select>`, 或 `<textarea>` 元素的 `value` 被修改时，会触发 **`input`** 事件。

|  |  |
| --- | --- |
| Bubbles | Yes |
| Cancelable | No |
| Interface | `InputEvent` |
| Event handler property | `GlobalEventHandlers.oninput` |

**`input`** 事件也适用于启用了 `contenteditable` 的元素，以及开启了 `designMode` 的任意元素。在`contenteditable` 和 `designMode` 的情况下，事件的 target 为当前正在编辑的宿主。如果这些属性应用于多个元素上，当前正在编辑的宿主为最近的父节点不可编辑的祖先元素。

对于 `type=checkbox` 或 `type=radio` 的 `input` 元素，每当用户切换控件（通过触摸、鼠标或键盘）时（HTML5 规范），`input` 事件都应该触发。然而，历史事实并非如此。请检查兼容性，或使用 `change` 事件代替这些类型的元素。

**备注：** 每当元素的 `value` 改变，`input` 事件都会被触发。这与 `change` (en-US) 事件不同。change 事件仅当 value 被提交时触发，如按回车键，从一个 options 列表中选择一个值等。

示例
--

每当用户修改 `<input>` 元素的 value 时，这个示例会记录 value。

### HTML

```html
<input placeholder="Enter some text" name="name" />
<p id="values"></p>
```

### JavaScript

```js
const input = document.querySelector("input");
const log = document.getElementById("values");

input.addEventListener("input", updateValue);

function updateValue(e) {
  log.textContent = e.srcElement.value;
}
```

### 结果

属性
--

| Property | Type | Description |
| --- | --- | --- |
| `target` 只读  | `EventTarget` | The event target (the topmost target in the DOM tree). |
| `type` 只读  | `DOMString` | The type of event. |
| `bubbles` 只读  | `Boolean` | Whether the event normally bubbles or not. |
| `cancelable` 只读  | `Boolean` | Whether the event is cancellable or not. |

规范
--

| Specification |
| --- |
| UI Events # event-type-input |
| HTML Standard # handler-oninput |

浏览器兼容性
------

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

[1] 在 Gecko 12.0 之前，用户在输入法中输入时，或者 dead keys were used on Mac OS X 时，Gecko 不触发 input 事件。

[2] IE 9 在用户删除输入的文字时不触发 input 事件 (例如，按 Backspace 或者删除键，或者“剪切”文字).

[3] Opera 在用户把文字拖进输入框时，不触发 input 事件。

[4] 事件 target 是光标所在的最内侧的元素。

参见
--

* 相关事件
    + `beforeinput`
    + `change`
    + `invalid`


NonDocumentTypeChildNode.nextElementSibling - Web API 接口参考

NonDocumentTypeChildNode.nextElementSibling
===========================================

概述
--

**`nextElementSibling`** 返回当前元素在其父元素的子元素节点中的后一个元素节点，如果该元素已经是最后一个元素节点，则返回 `null`, 该属性是只读的。

语法
--
```

var nextNode = elementNodeReference.nextElementSibling;
```

例子
--
```

<div id="div-01">Here is div-01</div>
<div id="div-02">Here is div-02</div>

<script type="text/javascript">
  var el = document.getElementById('div-01').nextElementSibling;
  document.write('<p>Siblings of div-01</p><ol>');
  while (el) {
    document.write('<li>' + el.nodeName + '</li>');
    el = el.nextElementSibling;
  }
  document.write('</ol>');
</script>
```

上面的例子会输出以下内容：
```

Siblings of div-01

   1. DIV
   2. SCRIPT
   3. P
   4. OL
```

Internet Explorer 8 支持补丁
------------------------

该属性不支持 IE9 之前的版本，下面的代码片段可以增进对 IE8 的支持：
```

// Source: https://github.com/Alhadis/Snippets/blob/master/js/polyfills/IE8-child-elements.js
if(!("nextElementSibling" in document.documentElement)){
    Object.defineProperty(Element.prototype, "nextElementSibling", {
        get: function(){
            var e = this.nextSibling;
            while(e && 1 !== e.nodeType)
                e = e.nextSibling;
            return e;
        }
    });
}
```

Internet Explorer 9+ 和 Safari 支持补丁
----------------------------------
```

// Source: https://github.com/jserz/js_piece/blob/master/DOM/NonDocumentTypeChildNode/nextElementSibling/nextElementSibling.md
(function (arr) {
  arr.forEach(function (item) {
    if (item.hasOwnProperty('nextElementSibling')) {
      return;
    }
    Object.defineProperty(item, 'nextElementSibling', {
      configurable: true,
      enumerable: true,
      get: function () {
        var el = this;
        while (el = el.nextSibling) {
          if (el.nodeType === 1) {
              return el;
          }
        }
        return null;
      },
      set: undefined
    });
  });
})([Element.prototype, CharacterData.prototype]);
```

规范
--

| Specification |
| --- |
| DOM Standard # ref-for-dom-nondocumenttypechildnode-nextelementsibling② |

浏览器兼容性
------

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

参见
--

* `nextSibling`
* `childElementCount`
* `children`
* `firstElementChild`
* `lastElementChild`
* `previousElementSibling`


Element.requestFullscreen() - Web API 接口参考

Element.requestFullscreen()
===========================

**`Element.requestFullscreen()`** 方法用于发出异步请求使元素进入全屏模式。

调用此 API 并不能保证元素一定能够进入全屏模式。如果元素被允许进入全屏幕模式，返回的`Promise`会 resolve，并且该元素会收到一个`fullscreenchange`事件，通知它已经进入全屏模式。如果全屏请求被拒绝，返回的 promise 会变成 rejected 并且该元素会收到一个`fullscreenerror`事件。如果该元素已经从原来的文档中分离，那么该文档将会收到这些事件。

语法
--

```js
requestFullscreen()
requestFullscreen(options)
```

### 参数

`options` 可选

一个`FullscreenOptions` (en-US)对象提供切换到全屏模式的控制选项。目前，唯一的选项是`navigationUI` (en-US)，这控制了是否在元素处于全屏模式时显示导航条 UI。默认值是`"auto"`，表明这将由浏览器来决定是否显示导航条。

### 返回值

在完成切换全屏模式后，返回一个已经用值 `undefined` resolved 的`Promise`

### 异常

*`requestFullscreen()` 通过拒绝返回的 `Promise`来生成错误条件，而不是抛出一个传统的异常。拒绝控制器接收以下的某一个值：*

`TypeError`

在以下几种情况下，会抛出`TypeError`：

* 文档中包含的元素未完全激活，也就是说不是当前活动的元素。
* 元素不在文档之内。
* 因为功能策略限制配置或其他访问控制，元素不被允许使用`"fullscreen"`功能。
* 元素和它的文档是同一个节点。

示例
--

在调用 `requestFullScreen()` 之前，可以对 `fullscreenchange` 和 `fullscreenerror` 事件进行监听，这样在请求进入全屏模式成功或者失败时都能收到事件通知。

规范
--

| Specification |
| --- |
| Fullscreen API Standard # ref-for-dom-element-requestfullscreen① |

浏览器兼容性
------

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

参见
--

* Full-screen API
* `Element.requestFullscreen()`
* `Document.exitFullscreen()`
* `Document.fullscreen`
* `Document.fullscreenElement`
* `:fullscreen`
* `allowfullscreen`


Element.querySelector() - Web API 接口参考

Element.querySelector()
=======================

返回与指定的选择器组匹配的元素的后代的第一个元素。语法
--

```js
element = baseElement.querySelector(selectors);
```

* `element` 和 `baseElement` 是 `element` 对象。
* `selectors` 是一个 CSS 选择器字符串 ( selectors (en-US) )
### 参数

`selectors`

一组用来匹配`Element` `baseElement`后代元素的选择器selectors (en-US)；必须是合法的 css 选择器，否则会引起语法错误。返回匹配指定选择器的第一个元素。

### 返回值

基础元素（baseElement）的子元素中满足指定选择器组的第一个元素。匹配过程会对整个结构进行，包括基础元素和他的后代元素的集合以外的元素，也就是说，选择器首先会应用到整个文档，而不是基础元素，来创建一个可能有匹配元素的初始列表。然后从结果元素中检查它们是否是基础元素的后代元素。第一个匹配的元素将会被 querySelector() 方法返回。

如果没有找到匹配项，返回值为 null。

### 异常

`SyntaxError`

指定的选择器无效。

例子
--

我们来看几个例子。

### 查找一个具有特殊属性值的元素

在第一个例子中，会返回 HTML 文档里第一个没有 type 属性或者有值为“text/css”的 type 属性的`<style>`元素：

```js
let el = document.body.querySelector(
  "style[type='text/css'], style:not([type])",
);
```

### 整个层次结构有效

下面的例子演示了在应用选择器时考虑整个文档的层次结构，因此在定位匹配时仍然考虑指定的 **baseElement** 之外的级别。

#### HTML

```html
<div>
  <h5>Original content</h5>
  <p>
    inside paragraph
    <span>inside span</span>
    inside paragraph
  </p>
</div>
<div>
  <h5>Output</h5>
  <div id="output"></div>
</div>
```

#### JavaScript

```js
var baseElement = document.querySelector("p");
document.getElementById("output").innerHTML =
  baseElement.querySelector("div span").innerHTML;
```

#### 结果

结果是像这样的：

注意，尽管基础元素没有包括选择器中含有的 `div` 元素，选择器"`div span`"依旧匹配了其中的`<span>`元素。

### 更多例子

`Document.querySelector()` 查看更多正确格式选择器的例子。

规范
--

| Specification |
| --- |
| DOM Standard # ref-for-dom-parentnode-queryselectorall① |

浏览器兼容性
------

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

参见
--

* `element.querySelectorAll`
* `document.querySelector` (en-US)
* `document.querySelectorAll`
* Code snippets for querySelector


blur (event) - Web API 接口参考

blur (event)
============

当一个元素失去焦点的时候 blur 事件被触发。它和 `focusout` (en-US) 事件的主要区别是 focusout 支持冒泡。

常规信息
----

规范

DOM L3

接口
`FocusEvent`
是否冒泡

否

可取消默认行为

否

目标对象

元素（Element）

默认行为

无

**备注：** `Document.activeElement` 的值随浏览器的不同而不同（Firefox bug 452307）：IE10 把值设为焦点将要移向的对象，而 Firefox 和 Chrome 往往把值设为 `body`。

属性
--

| 属性 | 类型 | 描述 |
| --- | --- | --- |
| `target` 只读  | `EventTarget` | 产生该事件的对象 (DOM 树中最顶级的那个对象). |
| `type` 只读  | `DOMString` | 事件类型。 |
| `bubbles` 只读  | `Boolean` | 该事件是否冒泡。 |
| `cancelable` 只读  | `Boolean` | 该事件是否可取消默认行为。 |
| `relatedTarget` 只读  | `EventTarget` (DOM 元素) | 无 |

事件代理
----

有两种方法来为这个事件实现事件代理：在支持 `focusout` 事件的浏览器中使用 focusout 事件（除了 FireFox 以外的浏览器都支持 focusout）或者通过设置 `addEventListener` 方法的第三个参数 "useCapture" 为 `true：`

### HTML

```html
<form id="form">
  <input type="text" placeholder="text input" />
  <input type="password" placeholder="password" />
</form>
```

### JavaScript

```js
var form = document.getElementById("form");
form.addEventListener(
  "focus",
  function (event) {
    event.target.style.background = "pink";
  },
  true,
);
form.addEventListener(
  "blur",
  function (event) {
    event.target.style.background = "";
  },
  true,
);
```

规范
--

| Specification |
| --- |
| UI Events # event-type-blur |
| HTML Standard # handler-onblur |

浏览器兼容性
------

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

相关的事件
-----

* `focus`
* `blur`
* `focusin` (en-US)
* `focusout`


GlobalEventHandlers.onpointermove - Web API 接口参考

GlobalEventHandlers.onpointermove
=================================

一个`global event handler`(全局事件) `pointermove` 事件。

语法
--
```

var moveHandler = targetElement.onpointermove;
```

### 返回值

`moveHandler`

返回 `targetElement` 元素的 pointermove 事件处理函数。

示例
--

下面展示了两种设置元素 pointermove 事件处理函数的方法。

```js
<html>
<script>
function moveHandler(ev) {
 // 此处添加事件处理语句
}
function init() {
 var el=document.getElementById("target1");
 el.onpointermove = moveHandler;
}
</script>
<body onload="init();">
<div id="target1"> Touch me ... </div>
<div id="target2" onpointermove="moveHandler(event)"> Touch me ... </div>
</body>
</html>
```

规范
--

| Specification |
| --- |
| Pointer Events # the-pointermove-event |
| Pointer Events # dom-globaleventhandlers-onpointermove |

浏览器兼容性
------

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

参见
--

* 相关事件
    + `gotpointercapture`
    + `lostpointercapture`
    + `pointerover`
    + `pointerenter`
    + `pointerdown`
    + `pointerup`
    + `pointercancel`
    + `pointerout`
    + `pointerleave`


Element：keydown 事件 - Web API 接口参考

Element：keydown 事件
==================

**`keydown`** 事件触发于键盘按键按下的时候。

与 `keypress` 事件不同的是，所有按键均会触发 `keydown` 事件，无论这些按键是否会产生字符值。

| Bubbles | Yes |
| Cancelable | Yes |
| Interface | `KeyboardEvent` |
| Event handler property | `onkeydown` |

`keydown` 与 `keyup` 事件捕获了键盘按键的操作，而 `keypress` 反映了具体输入某个字符的值。比如，小写"a" 在`keydown` 和 `keyup`事件中输出的是大写 A 的 Unicode 编码 65，但是在`keypress`中输出的就是小写"a"的 Unicode 编码 97。大写 "A"在这些事件中输出的都是 Unicode 编码 65。

键盘事件只能由 `<inputs>`, `<textarea>` 以及任何具有 `contentEditable` 或 `tabindex="-1"`属性的组件触发。

自 Firefox 65 起， `keydown` 与 `keyup` 事件会在 IME（输入法编辑器）复合事件中被触发，目的是为了提升 CJKT（中日韩台地区）用户跨浏览器性能，(Firefox bug 354358). 若要忽略复合事件中所有 `keydown` 事件，可以按照如下代码修改 (229 是某个在 IME 中触发的键盘事件对应的 `keyCode`):

```js
eventTarget.addEventListener("keydown", (event) => {
  if (event.isComposing || event.keyCode === 229) {
    return;
  }
  // do something
});
```

示例
--

### addEventListener keydown 示例

这个例子展示了当你在`<input>`元素中按下一个按键时， `KeyboardEvent.code` 的取值

```html
<input placeholder="Click here, then press down a key." size="40" />
<p id="log"></p>
```

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

input.addEventListener("keydown", logKey);

function logKey(e) {
  log.textContent += ` ${e.code}`;
}
```

### onkeydown 示例

```js
input.onkeydown = logKey;
```

规范
--

| Specification |
| --- |
| UI Events # event-type-keydown |
| HTML Standard # handler-onkeydown |

浏览器兼容性
------

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

参见
--

* `input`
* `keypress`
* `keyup`
* Document `keydown` event (en-US)