recursal/MDN huggingface dataset:
元素：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
========================

只读属性 **`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
===============================

`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()
=========================

**`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">转移到"是" --&gt;</button>
    <button id="to-no">&lt;-- 转移到 "否"</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 事件
===========

**`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 事件
==============

当用户通过浏览器的用户界面发起“剪切”动作时，将触发 **`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()
======================

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() 方法
====================

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

`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：滚轮事件
============

**滚轮**（**`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
=================

`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 标准中移除，也许正准备移除或出于兼容性而保留。请尽量不要使用该特性，并更新现有的代码；参见本页面底部的兼容性表格以指导你作出决定。请注意，该特性随时可能无法正常工作。

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

当元素被激活，如使用鼠标点击或使用键盘导航并激活至这个元素时， **`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 标准中移除，也许正准备移除或出于兼容性而保留。请尽量不要使用该特性，并更新现有的代码；参见本页面底部的兼容性表格以指导你作出决定。请注意，该特性随时可能无法正常工作。

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

在处理 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`