recursal/MDN huggingface dataset:
Determining the dimensions of elements
======================================

当想要确认元素的宽高时有几种属性可以选择，但是我们很难确认使用哪个属性才是最适合的。本文将帮助你做出正确的选择。

元素占用了多少空间？
----------

如果你需要知道元素总共占用了多少空间，包括可视内容、滚动条（如果有的话）、内边距和边框的宽度，你会使用 `offsetWidth` 和 offsetHeight 属性，大多数情况下，当元素没有什么形状上的变化时，他们与 getBoundingClientRect()的宽高一致。但是如果发生变化，offsetWidth 和 offsetHeight 将返回元素的布局宽高，而 getBoundingClientRect() 将返回实际渲染的宽高。例如：如果元素的宽 width:100px，变化 transform:scale(0.5)，此时 getBoundingClientRect() 将返回宽 50，而 offsetWidth 将返回宽 100.

![Image:Dimensions-offset.png](/zh-CN/docs/Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements/dimensions-offset.png)

显示内容尺寸是多少？
----------

如果你需要知道展示区域内容占用了多少空间，包括内边距但是不包括边框、外边距或者滚动条，你会使用clientWidth和clientHeight属性：

![Image:Dimensions-client.png](/zh-CN/docs/Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements/dimensions-client.png)

内容有多大？
------

如果你想要知道内容区域的实际大小，而不局限于可见区域的话，你会使用 `scrollWidth`和scrollHeight属性。即使使用了滚动条仅有部分内容可见，这两个属性仍会返回元素的完整内容宽高

例如，一个 300x300 像素 的滚动盒子里放置了一个 600x400 像素的元素，scrollWidth 将会返回 600，scrooHeight 返回 400.

规范
--

http://www.w3.org/TR/cssom-view/

参考文献
----

MSDN Measuring Element Dimension and Location
ImageData()
===========

**`ImageData()`** 构造函数返回一个新的实例化的 `ImageData` 对象，此对象由给定的类型化数组和指定的宽度与高度组成。

这个构造器是创建像这种对象首选的方式。

语法
--
```

new ImageData(array, width, height);
new ImageData(width, height);
```

### 参数

`array`

包含图像隐藏像素的 `Uint8ClampedArray` 数组。如果数组没有给定，指定大小的黑色矩形图像将会被创建。

`width`

无符号长整型（unsigned long）数值，描述图像的宽度。

`height`

 无符号长整型（unsigned long）数值，描述图像的高度。
 如果已给定数组，这个值是可选的：它将通过它的大小和给定的宽度进行推断。


示例
--


```js
var imageData = new ImageData(100, 100); // Creates a 100x100 black rectangle
// ImageData { width: 100, height: 100, data: Uint8ClampedArray[40000] }
```

规范
--

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

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

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

参见
--

* `CanvasRenderingContext2D.createImageData()`, the creator method that can be used outside workers.
ImageData.height
================

只读的 **`ImageData.height`** 属性，返回在图像数据对象中的行的数量。

语法
--
```

imagedata.height
```

示例
--


```js
var imagedata = new ImageData(100, 100);
imagedata.height; // 100
```

规范
--

| Specification |
| --- |
| HTML Standard # dom-imagedata-height-dev |

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

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

参见
--

* `ImageData.width`
ImageData.width
===============

只读的 **`ImageData.width`** 属性，返回在图像数据对象中每一行像素的数量。

语法
--
```

imagedata.width
```

示例
--


```js
var imagedata = new ImageData(100, 100);
imagedata.width; // 100
```

规范
--

| Specification |
| --- |
| HTML Standard # dom-imagedata-width-dev |

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

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

参见
--

* `ImageData.height`
ImageData.data
==============

只读的 **`ImageData.data`** 属性，返回 `Uint8ClampedArray` ，描述一个一维数组，包含以 RGBA 顺序的数据，数据使用 `0` 至 `255`（包含）的整数表示。

语法
--
```

imagedata.data
```

示例
--


```js
var imagedata = new ImageData(100, 100);
imagedata.data; // Uint8ClampedArray[40000]
```

规范
--

| Specification |
| --- |
| HTML Standard # dom-imagedata-data-dev |

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

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

参见
--

* `ImageData.height`
* `ImageData.width`
Event.composedPath()
====================

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
**`composedPath()`** 是 `Event` 接口的一个方法，当对象数组调用该侦听器时返回事件路径。如果影子根节点被创建并且`ShadowRoot.mode`是关闭的，那么该路径不包括影子树中的节点。

语法
--
```

var composed = Event.composedPath();
```

### 参数

无。

### 返回值

一个 `EventTarget`对象数组，表示将在其上调用事件侦听器的对象。

示例
--

在我们的 composed-composed-path 例子中，我们定义了两个自定义元素，`<open-shadow>` 和 `<closed-shadow>，`两 个全都调用了它们文本属性的内容然后作为`<p>` 元素的文本内容将它们插入到元素的影子 DOM 中。两者之间唯一的区别是它们影子的根结点是在它们的模式被分别设置成`open` 和 `closed` 的情况下连接的。

第一个定义就像这样，比如：


```js
customElements.define(
  "open-shadow",
  class extends HTMLElement {
    constructor() {
      super();

      let pElem = document.createElement("p");
      pElem.textContent = this.getAttribute("text");

      let shadowRoot = this.attachShadow({ mode: "open" }).appendChild(pElem);
    }
  },
);
```


然后我们在我们的页面中插入其中一个元素：


```html
<open-shadow text="I have an open shadow root"></open-shadow>
<closed-shadow text="I have a closed shadow root"></closed-shadow>
```


然后在 `<html>` 元素中插入一个鼠标点击事件：


```js
document.querySelector("html").addEventListener("click", function (e) {
  console.log(e.composed);
  console.log(e.composedPath());
});
```


当你先后点击 `<open-shadow>` 和 `<closed-shadow>` 这两个元素，你将会注意到两件事情。第一， `composed` 这个属性返回值为 `true` 因为 `click` 事件总能够在影子边界中传播。第二，你将注意到两个元素中`composedPath` 的值的不同。 `<open-shadow>` 元素的组成路径是这个：


```js
Array [ p, ShadowRoot, open-shadow, body, html, HTMLDocument https://mdn.github.io/web-components-examples/composed-composed-path/, Window ]
```


尽管 `<closed-shadow>` 元素的组成路径是像下面这样：


```js
Array [ closed-shadow, body, html, HTMLDocument https://mdn.github.io/web-components-examples/composed-composed-path/, Window ]
```


在第二个例子中，事件监听器仅能够传播到 `<closed-shadow>` 元素本身，但是不会到影子边界内的节点。

规范
--

| Specification |
| --- |
| DOM Standard # ref-for-dom-event-composedpath① |

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

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

`Event` 接口的 **`target`** 只读属性是对事件分派到的对象的引用。当事件处理器在事件的冒泡或捕获阶段被调用时，它与 `event.currentTarget` 不同。

值
-

与 `EventTarget` 有关。

示例
--

`event.target` 属性可以用来实现**事件委托** (**event delegation**)。


```js
// Make a list
var ul = document.createElement("ul");
document.body.appendChild(ul);

var li1 = document.createElement("li");
var li2 = document.createElement("li");
ul.appendChild(li1);
ul.appendChild(li2);

function hide(e) {
  // e.target 引用着 <li> 元素
  // 不像 e.currentTarget 引用着其父级的 <ul> 元素。
  e.target.style.visibility = "hidden";
}

// 添加监听事件到列表，当每个 <li> 被点击的时候都会触发。
ul.addEventListener("click", hide, false);
```

规范
--

| Specification |
| --- |
| DOM Standard # ref-for-dom-event-target③ |

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

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

在 IE6-8 中，事件模型与标准不同。使用非标准的 `element.attachEvent()` 方法绑定事件监听器。在该模型中，事件对象有一个 `srcElement` 属性，等价于`target` 属性。


```js
function hide(e) {
  // 支持 IE6-8
  var target = e.target || e.srcElement;
  target.style.visibility = "hidden";
}
```

参见
--

* Comparison of Event Targets
* `Event.currentTarget`
event.stopPropagation
=====================

`Event` 接口的 **`stopPropagation()`** 方法阻止捕获和冒泡阶段中当前事件的进一步传播。但是，它不能防止任何默认行为的发生；例如，对链接的点击仍会被处理。如果要停止这些行为，请参见 `preventDefault()` 方法，它可以阻止事件触发后默认动作的发生。它也不能阻止附加到相同元素的相同事件类型的其他事件处理器，如果要阻止这些处理器的运行，请参见 `stopImmediatePropagation()` 方法。

语法
--


```js
event.stopPropagation();
```

### 参数

None.

### 返回值

None.

示例
--

参见冒泡事件。

规范
--

| Specification |
| --- |
| DOM Standard # ref-for-dom-event-stoppropagation① |

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

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

`Event` 接口的 **`isTrusted`** 属性是一个只读属性，它是一个布尔值（`Boolean` (en-US)）。当事件是由用户行为生成的时候，这个属性的值为 `true` ，而当事件是由脚本创建、修改、通过 `EventTarget.dispatchEvent()` 派发的时候，这个属性的值为 `false` 。

语法
--
```

var eventIsTrusted = event.isTrusted;
```

### 值

`Boolean` (en-US)（布尔值）

示例
--


```js
if (e.isTrusted) {
  /\* Event 事件可信 \*/
} else {
  /\* Event 事件不可信 \*/
}
```

规范
--

| Specification |
| --- |
| DOM Standard # ref-for-dom-event-istrusted① |

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

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

只读属性 **Event.type** 会返回一个字符串，表示该事件对象的事件类型。

传给 `EventTarget.addEventListener()` 和 `EventTarget.removeEventListener()` 方法的 event 参数的值是忽略大小写的。

要了解所有的事件类型，请查看 Mozilla 事件类型参考.

语法
--
```

event.type
```

示例
--


```html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />

    <title>Event.type Example</title>

    <script>
 var currEvent = null;
 function getEvtType(evt) {
 console.log("//Start------------getEvtType(evt)------------ ");

 currEvent = evt.type;
 console.log(currEvent);

 //document.getElementById("Etype").firstChild.nodeValue = currEvent;
 document.getElementById("Etype").innerHTML = currEvent;

 console.log("//End--------------getEvtType(evt)------------ ");
 }

 //Keyboard events
 document.addEventListener("keypress", getEvtType, false); //[second]

 document.addEventListener("keydown", getEvtType, false); //first
 document.addEventListener("keyup", getEvtType, false); //third

 //Mouse events
 document.addEventListener("click", getEvtType, false); // third

 document.addEventListener("mousedown", getEvtType, false); //first
 document.addEventListener("mouseup", getEvtType, false); //second
 </script>
  </head>

  <body>
    <p>Press any key or click the mouse to get the event type.</p>
    <p>Event type: <span id="Etype" style="color:red">-</span></p>
  </body>
</html>
```

### Result

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

| Specification |
| --- |
| DOM Standard # ref-for-dom-event-type④ |
event.timeStamp
===============

**警告：** 在 Gecko 中，该属性的值不是事件发生时正确的事件戳。查看 https://bugzilla.mozilla.org/show\_bug.cgi?id=238041

### 概述

返回事件发生时的时间戳。

### 语法
```

var number = event.timeStamp;
```

### 例子


```html
<html>
  <head>
    <title>timeStamp example</title>

    <script type="text/javascript">
 function getTime(event) {
 document.getElementById("time").firstChild.nodeValue = event.timeStamp;
 }
 </script>
  </head>

  <body onkeypress="getTime(event)">
    <p>按下任意键获取 onkeypress 事件对象的 timestamp 属性值。</p>
    <p>timeStamp: <span id="time">-</span></p>
  </body>
</html>
```

### 备注

此属性仅适用于事件系统支持该属性的特定事件类型。

### 规范

event.timestamp
Event.currentTarget
===================

`Event` 接口的只读属性 **`currentTarget`** 表示的，标识是当事件沿着 DOM 触发时事件的当前目标。它总是指向事件绑定的元素，而 `Event.target` 则是事件触发的元素。

语法
--
```

var currentEventTarget = event.currentTarget;
```

### Value

`EventTarget`例子
--

当将相同的事件处理程序附加到多个元素时 `event.currentTarget` 就很有用。


```js
function hide(e) {
  e.currentTarget.style.visibility = "hidden";
  console.log(e.currentTarget);
  // 该函数用作事件处理器时：this === e.currentTarget
}

var ps = document.getElementsByTagName("p");

for (var i = 0; i < ps.length; i++) {
  // console: 打印被点击的 p 元素
  ps[i].addEventListener("click", hide, false);
}
// console: 打印 body 元素
document.body.addEventListener("click", hide, false);
```


**备注：** `event.currentTarget` 的值*只能*在事件处理过程中被使用。如果你尝试用 `console.log()` 在控制台打印 `event` 对象，你会发现 `currentTarget` 的值是 `null`。如果你想在控制台打印 `currentTarget` 的值，你应该使用 `console.log(event.currentTarget)`，或者也可以在代码中使用 `debugger` 语句来暂停代码的执行从而看到 `event.currentTarget` 的值。

规范
--

| Specification |
| --- |
| DOM Standard # ref-for-dom-event-currenttarget② |

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

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

参考
--

* Comparison of Event Targets
event.bubbles
=============

### 概述

返回一个布尔值，表明当前事件是否会向 DOM 树上层元素冒泡。

### 语法
```

var bool = event.bubbles;
```

### 备注

一些特定的事件类型会冒泡。这时，该事件对象的`bubbles`属性为`true`. 你可以检查该属性的值来判断一个事件对象是否冒泡。

### 例子


```js
function goInput(e) {
  // 检查事件对象是否冒泡
  if (!e.bubbles) {
    // 如果不冒泡，则手动传递事件
    passItOn(e);
  }
  // 如果冒泡的话
  doOutput(e);
}
```

### 规范

event.bubbles
Event：preventDefault() 方法
=========================

`Event` 接口的 **`preventDefault()`** 方法，告诉用户代理：如果此事件没有被显式处理，它默认的动作也不应该照常执行。

此事件还是继续传播，除非碰到事件监听器调用 `stopPropagation()` 或 `stopImmediatePropagation()`，才停止传播。

如后文所述，对于不可取消的事件（例如通过 `EventTarget.dispatchEvent()` 分派的、没有指定 `cancelable: true` 的事件），调用 **`preventDefault()`** 是没有任何效果的。

### 语法


```js
event.preventDefault()
```

示例
--

### 阻止默认的点击事件执行

选中复选框是点击复选框的默认行为。下面这个例子说明了怎样阻止默认行为的发生：

#### JavaScript


```js
const checkbox = document.querySelector("#id-checkbox");

checkbox.addEventListener("click", checkboxClick, false);

function checkboxClick(event) {
  let warn = "preventDefault() won't let you check this!<br>";
  document.getElementById("output-box").innerHTML += warn;
  event.preventDefault();
}
```


#### HTML


```html
<p>Please click on the checkbox control.</p>

<form>
  <label for="id-checkbox">Checkbox:</label>
  <input type="checkbox" id="id-checkbox" />
</form>

<div id="output-box"></div>
```


#### 结果

你可以看到如下的行为：

### 在编辑域中阻止按键

下面的这个例子说明了如何使用 `preventDefault()` 在文本编辑域中阻止有效的文本输入。如今，你通常可以使用原生的 HTML 表单验证来代替。

#### HTML

此 HTML 表单用于捕获用户输入。由于我们只对按键输入感兴趣，因此我们禁用 `autocomplete` 功能来防止浏览器使用缓存的值填充输入字段。


```html
<div class="container">
  <p>Please enter your name using lowercase letters only.</p>

  <form>
    <input type="text" id="my-textbox" />
  </form>
</div>
```


#### CSS

当用户按下一个有效按键的时候，我们就给这个 warning box 加上一些样式：


```css
.warning {
  border: 2px solid #f39389;
  border-radius: 2px;
  padding: 10px;
  position: absolute;
  background-color: #fbd8d4;
  color: #3b3c40;
}
```


#### JavaScript

这里是相关的 JavaScript 代码。首先，监听 `keypress` 事件：


```js
var myTextbox = document.getElementById("my-textbox");
myTextbox.addEventListener("keypress", checkName, false);
```


`checkName()` 方法可以监听按键并且决定是否允许按键的默认行为发生。


```js
function checkName(evt) {
  var charCode = evt.charCode;
  if (charCode != 0) {
    if (charCode < 97 || charCode > 122) {
      evt.preventDefault();
      displayWarning(
        "Please use lowercase letters only." +
          "\n" +
          "charCode: " +
          charCode +
          "\n",
      );
    }
  }
}
```


`displayWarning()` 方法显示了一个问题的通知。这不是一种优雅的方法，但是确实可以达到我们的目的。


```js
var warningTimeout;
var warningBox = document.createElement("div");
warningBox.className = "warning";

function displayWarning(msg) {
  warningBox.innerHTML = msg;

  if (document.body.contains(warningBox)) {
    window.clearTimeout(warningTimeout);
  } else {
    // insert warningBox after myTextbox
    myTextbox.parentNode.insertBefore(warningBox, myTextbox.nextSibling);
  }

  warningTimeout = window.setTimeout(function () {
    warningBox.parentNode.removeChild(warningBox);
    warningTimeout = -1;
  }, 2000);
}
```


#### 结果

这里就是代码的执行结果：

备注
--

在事件流的任何阶段调用 `preventDefault()` 都会取消事件，这意味着任何通常被该实现触发并作为结果的默认行为都不会发生。

你可以使用 `Event.cancelable` 来检查该事件是否支持取消。为一个不支持 cancelable 的事件调用 `preventDefault()` 将没有效果。

规范
--

| Specification |
| --- |
| DOM Standard # ref-for-dom-event-preventdefault③ |

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

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

**`Event.cancelBubble`** 属性是 `Event.stopPropagation()`的一个曾用名。在从事件处理程序返回之前将其值设置为 true 可阻止事件的传播。

语法
--
```

event.cancelBubble = bool;
let bool = event.cancelBubble;
```

用例
--


```js
ele.onclick = function (e) {
  // 在这儿可以做点儿有趣的事情
  e.cancelBubble = true;
};
```

规范
--

*这个属性的规范并未统一。* 因为他还有其他标准 W3C 版： an old Working Draft of W3C DOM Level 2. 微软版： description of it on MSDN.

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

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

参考
--

* `UIEvent.cancelBubble` (en-US)
* translated by cnvoid
Event.composed
==============

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
`Event` 接口的只读属性 **`composed`** 返回一个 `Boolean` 值，用来指示该事件是否可以从 Shadow DOM 传递到一般的 DOM。

**备注：** 此属性以前命名为`scoped`。

语法
--


```js
var composed = Event.composed;
```

### 值

如果返回的 `Boolean` 值为 `true`，表明当事件到达 shadow DOM 的根节点（也就是 shadow DOM 中事件开始传播的第一个节点）时，事件可以从 shadow DOM 传递到一般 DOM。当然，事件要具有可传播性，即该事件的 `bubbles` 属性必须为 `true`。你也可以通过调用 `composedPath()` 来查看事件从 shadow DOM 传播到普通 DOM 的路径。

如果属性值为 `false`，那么事件将不会跨越 shadow DOM 的边界传播。

例子
--

在我们的组合组合路径示例（实时查看）中，我们定义了两个不重要的自定义元素 `<open-shadow>` 和 `<closed-shadow>`，它们都将获取其 `text` 属性的内容并将它们作为元素的文本内容插入到元素的 shadow DOM 中。两者之间的唯一区别是它们的阴影根附加了它们的模式分别设置为 open 和 closed。

第一个定义如下所示：


```js
customElements.define(
  "open-shadow",
  class extends HTMLElement {
    constructor() {
      super();

      let pElem = document.createElement("p");
      pElem.textContent = this.getAttribute("text");

      let shadowRoot = this.attachShadow({ mode: "open" }).appendChild(pElem);
    }
  },
);
```


我们将他们插入我们的页面当中：


```html
<open-shadow text="I have an open shadow root"></open-shadow>
<closed-shadow text="I have a closed shadow root"></closed-shadow>
```


然后在 `html` 标签上监听 click 事件：


```js
document.querySelector("html").addEventListener("click", function (e) {
  console.log(e.composed);
  console.log(e.composedPath());
});
```


当我们点击 `<open-shadow>` 和 `<closed-shadow>` 元素时候我们会注意到：

1. `composed` 属性返回 `true` 因为`click` 事件总是能总是能够跨越`Shadow DOM`的边界传播。
2. 你应该会注意到，两个元素返回`composedPath`的值不同。

`<open-shadow>` 元素的组合路径是：
```

Array [ p, ShadowRoot, open-shadow, body, html, HTMLDocument https://mdn.github.io/web-components-examples/composed-composed-path/, Window ]
```


而 `<closed-shadow>` 元素的组合路径是：
```

Array [ closed-shadow, body, html, HTMLDocument https://mdn.github.io/web-components-examples/composed-composed-path/, Window ]
```


第二种情况下，监听器只会捕获到 `<closed-shadow>` 元素本身，而不会去继续捕捉该元素中的节点。

规范
--

| Specification |
| --- |
| DOM Standard # ref-for-dom-event-composed① |

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

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

`Event` 接口的 **`stopImmediatePropagation()`** 方法阻止监听同一事件的其他事件监听器被调用。

如果多个事件监听器被附加到相同元素的相同事件类型上，当此事件触发时，它们会按其被添加的顺序被调用。如果在其中一个事件监听器中执行 `stopImmediatePropagation()` ，那么剩下的事件监听器都不会被调用。

**备注：** 注意与 `event.stopPropagation()` 之间的区别

语法
--
```

event.stopImmediatePropagation();
```

例子
--
```

<!DOCTYPE html>
<html>
    <head>
        <style>
            p { height: 30px; width: 150px; background-color: #ccf; }
            div {height: 30px; width: 150px; background-color: #cfc; }
        </style>
    </head>
    <body>
        <div>
            <p>paragraph</p>
        </div>
        <script>
            const p = document.querySelector('p')
            p.addEventListener("click", (event) => {
              alert("我是 p 元素上被绑定的第一个监听函数");
            }, false);

            p.addEventListener("click", (event) => {
              alert("我是 p 元素上被绑定的第二个监听函数");
              event.stopImmediatePropagation();
              // 执行 stopImmediatePropagation 方法，阻止 click 事件冒泡，并且阻止 p 元素上绑定的其他 click 事件的事件监听函数的执行。
            }, false);

            p.addEventListener("click",(event) => {
              alert("我是 p 元素上被绑定的第三个监听函数");
              // 该监听函数排在上个函数后面，该函数不会被执行
            }, false);

            document.querySelector("div").addEventListener("click", (event) => {
              alert("我是 div 元素，我是 p 元素的上层元素");
              // p 元素的 click 事件没有向上冒泡，该函数不会被执行
            }, false);
        </script>
    </body>
</html>
```

规范
--

| Specification |
| --- |
| DOM Standard # ref-for-dom-event-stopimmediatepropagation① |

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

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

**`Event()`** 构造函数，创建一个新的事件对象 `Event`。

语法
--
```

 event = new Event(typeArg, eventInit);
```

### 参数

*typeArg*

是`DOMString` 类型，表示所创建事件的名称。

*eventInit*可选

是 `EventInit` 类型的字典，接受以下字段：

* `"bubbles"`，可选，`Boolean`类型，默认值为 `false`，表示该事件是否冒泡。
* `"cancelable"`，可选，`Boolean`类型，默认值为 `false`，表示该事件能否被取消。
* `"composed"`，可选，`Boolean`类型，默认值为 `false`，指示事件是否会在影子 DOM 根节点之外触发侦听器。

示例
--


```js
// 创建一个支持冒泡且不能被取消的 look 事件

var ev = new Event("look", { bubbles: true, cancelable: false });
document.dispatchEvent(ev);

// 事件可以在任何元素触发，不仅仅是 document
myDiv.dispatchEvent(ev);
```

规范
--

| Specification |
| --- |
| DOM Standard # ref-for-dom-event-event |

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

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

相关阅读
----

* `Event`
Event.initEvent()
=================

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

**`Event.initEvent()`** 方法可以用来初始化由`Document.createEvent()` 创建的 `event` 实例。

用这种方式初始化事件必须是由 `Document.createEvent()` 方法创建的实例。本方法必须在事件被触发之前调用（用`EventTarget.dispatchEvent()`调用）.事件 一旦被调用，便不再做其他任何事。

**备注：** **不建议再使用此方法（方法已经过时 deprecated）**

可以使用特定的 event 构造器函数，比如 `Event()`. 该页有关于这些的更多信息 Creating and triggering events (en-US) .

语法
--
```

event.initEvent(type, bubbles, cancelable);
```


`type`

一个 `DOMString` 类型的字段，定义了事件的类型。

`bubbles`

一个 `Boolean` 值，决定是否事件是否应该向上冒泡。一旦设置了这个值，只读属性`Event.bubbles`也会获取相应的值。

`cancelable`

一个 `Boolean` 值，决定该事件的默认动作是否可以被取消。一旦设置了这个值，只读属性 `Event.cancelable` 也会获取相应的值。

范例
--
```

// 创建事件。
var event = document.createEvent('Event');

// 初始化一个点击事件，可以冒泡，无法被取消
event.initEvent('click', true, false);

// 设置事件监听。
elem.addEventListener('click', function (e) {
  // e.target 就是监听事件目标元素
}, false);

// 触发事件监听
elem.dispatchEvent(event);
```

规范
--

| Specification |
| --- |
| DOM Standard # ref-for-dom-event-initevent① |

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

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

另见
--

* The constructor to use instead of this deprecated method: `Event()`. More specific constructors can be used too.
event.defaultPrevented
======================

概述
--

返回一个布尔值，表明当前事件是否调用了 `event.preventDefault()`方法。

**备注：** 你应该使用该属性来代替以前的非标准的已经被废弃的`getPreventDefault()`方法 (查看Firefox bug 691151).

语法
--


```js
bool = event.defaultPrevented;
```

示例
--


```js
if (e.defaultPrevented) {
  /\* 事件的默认动作已被取消\*/
}
```

规范
--

| Specification |
| --- |
| DOM Standard # ref-for-dom-event-defaultprevented① |

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

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