From b9afb23d12dcae1e09f8d04c72143c5ddaa34aea Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Fri, 16 Jul 2021 16:27:00 -0400 Subject: delete conflicting/orphaned docs (zh-CN) (#1412) * delete conflicting docs (zh-CN) * and redirects * do orphaned as well * fix * remove more orphans * revert orphaned docs that can identify origin * move orphaned docs to current loc * adjust slug path * fix redirect change from rebase Co-authored-by: Irvin --- .../creating_and_triggering_events/index.html | 138 +++++++++ .../events/detecting_device_orientation/index.html | 317 +++++++++++++++++++++ files/zh-cn/web/events/mutation_events/index.html | 63 ++++ .../index.html | 52 ++++ 4 files changed, 570 insertions(+) create mode 100644 files/zh-cn/web/events/creating_and_triggering_events/index.html create mode 100644 files/zh-cn/web/events/detecting_device_orientation/index.html create mode 100644 files/zh-cn/web/events/mutation_events/index.html create mode 100644 files/zh-cn/web/events/orientation_and_motion_data_explained/index.html (limited to 'files/zh-cn/web/events') diff --git a/files/zh-cn/web/events/creating_and_triggering_events/index.html b/files/zh-cn/web/events/creating_and_triggering_events/index.html new file mode 100644 index 0000000000..686d6471af --- /dev/null +++ b/files/zh-cn/web/events/creating_and_triggering_events/index.html @@ -0,0 +1,138 @@ +--- +title: 创建和触发 events +slug: Web/Events/Creating_and_triggering_events +translation_of: Web/Events/Creating_and_triggering_events +tags: + - Advanced + - DOM + - Guide + - JavaScript + - NeedsContent + - events +--- +

本文演示了如何创建和分派DOM事件。这些事件通常称为合成事件，而不是浏览器本身触发的事件。

+ +

创建自定义事件

+ +

Events 可以使用 Event 构造函数创建如下：

+ +
var event = new Event('build');
+
+// Listen for the event.
+elem.addEventListener('build', function (e) { ... }, false);
+
+// Dispatch the event.
+elem.dispatchEvent(event);
+ +

上述代码使用了 EventTarget.dispatchEvent() 方法。

+ +

绝大多数现代浏览器中都会支持这个构造函数（Internet Explorer 例外）。 要了解更为复杂的方法，可参考下面的 过时的方式  一节。

+ +

添加自定义数据 – CustomEvent()

+ +

要向事件对象添加更多数据，可以使用 CustomEvent 接口，detail 属性可用于传递自定义数据。
+ 例如，event 可以创建如下：

+ +
var event = new CustomEvent('build', { 'detail': elem.dataset.time });
+ +

下面的代码允许你在事件监听器中访问更多的数据：

+ +
function eventHandler(e) {
+  log('The time is: ' + e.detail);
+}
+
+ +

过时的方式

+ +

早期的创建事件的方法使用了受Java启发的API。下面展示了一个示例：

+ +
// Create the event.
+var event = document.createEvent('Event');
+
+// Define that the event name is 'build'.
+event.initEvent('build', true, true);
+
+// Listen for the event.
+document.addEventListener('build', function (e) {
+  // e.target matches document from above
+}, false);
+
+// target can be any Element or other EventTarget.
+document.dispatchEvent(event);
+
+ +

事件冒泡

+ +

通常需要从子元素触发事件，并让祖先捕获它：

+ +
<form>
+  <textarea></textarea>
+</form>
+ +
const form = document.querySelector('form');
+const textarea = document.querySelector('textarea');
+
+// Create a new event, allow bubbling, and provide any data you want to pass to the "details" property
+const eventAwesome = new CustomEvent('awesome', {
+  bubbles: true,
+  detail: { text: () => textarea.value }
+});
+
+// The form element listens for the custom "awesome" event and then consoles the output of the passed text() method
+form.addEventListener('awesome', e => console.log(e.detail.text()));
+
+// As the user types, the textarea inside the form dispatches/triggers the event to fire, and uses itself as the starting point
+textarea.addEventListener('input', e => e.target.dispatchEvent(eventAwesome));
+ +

动态创建和派发事件

+ +

元素可以侦听尚未创建的事件：

+ +
<form>
+  <textarea></textarea>
+</form>
+ +
const form = document.querySelector('form');
+const textarea = document.querySelector('textarea');
+
+form.addEventListener('awesome', e => console.log(e.detail.text()));
+
+textarea.addEventListener('input', function() {
+  // Create and dispatch/trigger an event on the fly
+  // Note: Optionally, we've also leveraged the "function expression" (instead of the "arrow function expression") so "this" will represent the element
+  this.dispatchEvent(new CustomEvent('awesome', { bubbles: true, detail: { text: () => textarea.value } }))
+});
+ + + +

触发内置事件

+ +

下面的例子演示了一个在复选框上点击（click）的模拟（就是说在程序里生成一个click事件），这个模拟点击使用了DOM方法。参见这个动态示例

+ +
function simulateClick() {
+  var event = new MouseEvent('click', {
+    'view': window,
+    'bubbles': true,
+    'cancelable': true
+  });
+  var cb = document.getElementById('checkbox');
+  var cancelled = !cb.dispatchEvent(event);
+  if (cancelled) {
+    // A handler called preventDefault.
+    alert("cancelled");
+  } else {
+    // None of the handlers called preventDefault.
+    alert("not cancelled");
+  }
+}
+
+ +

参见

+ + diff --git a/files/zh-cn/web/events/detecting_device_orientation/index.html b/files/zh-cn/web/events/detecting_device_orientation/index.html new file mode 100644 index 0000000000..ba00972351 --- /dev/null +++ b/files/zh-cn/web/events/detecting_device_orientation/index.html @@ -0,0 +1,317 @@ +--- +title: 检测设备方向 +slug: Web/Events/Detecting_device_orientation +translation_of: Web/Events/Detecting_device_orientation +tags: + - API + - Device Orientation + - Intermediate + - Mobile + - Motion + - Orientation + - Reference +--- +

{{SeeCompatTable}}

+ +

有越来越多的基于web的设备能够确定它们的方向; 也就是说，它们可以报告数据以指示基于重力方向的方向改变。特别地，手持设备如手机可以利用这些信息以自动旋转屏幕，保持内容直立，当设备旋转至横屏时（宽度大于高度），提供网页内容的横屏视图。

+ +

有两种Javascript事件负责处理设备方向信息。第一种是{{domxref("DeviceOrientationEvent")}}，它会在加速度传感器检测到设备在方向上产生变化时触发。通过处理该事件传来的数据信息，让交互式地响应用户移动设备旋转和仰角变化成为可能。

+ +

第二种是{{domxref("DeviceMotionEvent")}}，它会在加速度发生改变时触发。跟{{domxref("DeviceOrientationEvent")}}不同，{{domxref("DeviceMotionEvent")}}监听的是相应方向上加速度的变化。传感器通常都具有监听{{domxref("DeviceMotionEvent")}}的能力，包括笔记本中用于保护移动中的存储设备的传感器。{{domxref("DeviceOrientationEvent")}}事件更多见于移动设备中。

+ +

处理方向（orientation）事件

+ +

要接收设备方向变化信息，只需要监听{{ event("deviceorientation") }}事件：

+ +
+

注意：gyronorm.js is a polyfill for normalizing the accelerometer and gyroscope data on mobile devices. This is useful for overcoming some of the differences in device support for device orientation.

+
+ +
window.addEventListener("deviceorientation", handleOrientation, true);
+
+ +

注册完事件监听处理函数后（对应这个例子中的handleOrientation），监听函数会定期地接收到最新的设备方向数据。

+ +

方向事件对象中包含四个值：

+ +

{{ domxref("DeviceOrientationEvent.absolute") }}

+ +

{{ domxref("DeviceOrientationEvent.alpha") }}

+ +

{{ domxref("DeviceOrientationEvent.beta") }}

+ +

{{ domxref("DeviceOrientationEvent.gamma") }}

+ +

下面是一个事件处理函数的例子：

+ +
function handleOrientation(orientData) {
+  var absolute = orientData.absolute;
+  var alpha = orientData.alpha;
+  var beta = orientData.beta;
+  var gamma = orientData.gamma;
+
+  // Do stuff with the new orientation data
+}
+
+ +

相关值解释

+ +

关于每一个轴的记录值表示的是相对于标准的坐标系，设备在某一个给定轴上的旋转量。Orientation and motion data explained 这篇文章有更详细的描述，下面是对这篇文章的总结。

+ + + +

例子

+ +

这个例子会成功运行在支持检测自己方向的设备中的支持{{event("deviceorientation")}} 事件的浏览器中。

+ +

让我们想象一下有一个球在花园中：

+ +
<div class="garden">
+  <div class="ball"></div>
+</div>
+
+<pre class="output"></pre>
+ +
+ +
+ +

花园只有200px宽（很小对吧），球在中央：

+ +
.garden {
+  position: relative;
+  width : 200px;
+  height: 200px;
+  border: 5px solid #CCC;
+  border-radius: 10px;
+}
+
+.ball {
+  position: absolute;
+  top   : 90px;
+  left  : 90px;
+  width : 20px;
+  height: 20px;
+  background: green;
+  border-radius: 100%;
+}
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +

现在，如果我们移动设备，球将随之移动：

+ +
var ball   = document.querySelector('.ball');
+var garden = document.querySelector('.garden');
+var output = document.querySelector('.output');
+
+var maxX = garden.clientWidth  - ball.clientWidth;
+var maxY = garden.clientHeight - ball.clientHeight;
+
+function handleOrientation(event) {
+  var x = event.beta;  // In degree in the range [-180,180]
+  var y = event.gamma; // In degree in the range [-90,90]
+
+  output.innerHTML  = "beta : " + x + "\n";
+  output.innerHTML += "gamma: " + y + "\n";
+
+  // Because we don't want to have the device upside down
+  // We constrain the x value to the range [-90,90]
+  if (x >  90) { x =  90};
+  if (x < -90) { x = -90};
+
+  // To make computation easier we shift the range of
+  // x and y to [0,180]
+  x += 90;
+  y += 90;
+
+  // 10 is half the size of the ball
+  // It center the positioning point to the center of the ball
+  ball.style.top  = (maxX*x/180 - 10) + "px";
+  ball.style.left = (maxY*y/180 - 10) + "px";
+}
+
+window.addEventListener('deviceorientation', handleOrientation);
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+
+ +

输出结果:

+ +

在{{LiveSampleLink("Orientation_example", "这里")}}以新窗口打开此示例；因为有些浏览器中的 {{event("deviceorientation")}} 事件不支持跨域。

+ +
{{EmbedLiveSample('Orientation_example', '230', '260')}}
+ +
+

警告: Chrome 和 Firefox 处理角度的机制不同，所以某些轴上的方向是相反的。

+
+ +

处理移动（motion）事件

+ +

移动事件的处理跟方向事件是一样的，除了他们有自己的事件名：{{ event("devicemotion") }}

+ +
window.addEventListener("devicemotion", handleMotion, true);
+ +
+ +

真正不同的是做为参数传递给HandleMotion函数的{{ domxref("DeviceMotionEvent") }}对象所包含的信息。

+ +

这个对象包含四个属性：

+ + + +

相关值解释

+ +

{{ domxref("DeviceMotionEvent") }}对象提供给web开发者设备在位置和方向上的改变速度的相关信息。这些变化信息是通过三个轴来体现的。（Orientation and motion data explained有更详细的说明。）

+ +

acceleration 和 accelerationIncludingGravity，都包含下面三个轴：

+ + + +

对于 rotationRate ，情况有点不同；三个轴的信息对应着以下三种情况：

+ + + +

最后，interval 表示的是从设备获取数据的间隔时间，单位是毫秒。

+ +

规范

+ + + + + + + + + + + + + + + + +
规范状态注释
{{SpecName('Device Orientation')}}{{Spec2('Device Orientation')}}Initial specification.
+ +

浏览器兼容性

+ +

DeviceMotionEvent

+ +

{{Compat("api.DeviceMotionEvent")}}

+ +

DeviceOrientationEvent

+ +

{{Compat("api.DeviceOrientationEvent")}}

+ +

参见

+ + diff --git a/files/zh-cn/web/events/mutation_events/index.html b/files/zh-cn/web/events/mutation_events/index.html new file mode 100644 index 0000000000..732cb7614b --- /dev/null +++ b/files/zh-cn/web/events/mutation_events/index.html @@ -0,0 +1,63 @@ +--- +title: Mutation events +slug: orphaned/Web/Guide/Events/Mutation_events +translation_of: Web/Guide/Events/Mutation_events +original_slug: Web/Guide/Events/Mutation_events +--- +

{{deprecated_header()}}

+ +

Mutation 事件 为web页面提供一种机制或扩展，以便在DOM被改变时获得通知。如果可能请用Mutation Observers代替。

+ +

前言

+ +

这个 mutation 事件在DOM Events 标准 中已被列为反对使用 , 因为在API的设计中有缺陷 (详情见发表于 public-webapps 的"DOM Mutation Events Replacement: The Story So Far / Existing Points of Consensus" ). 

+ +

Mutation Observers 在DOM4中被提议用来取代mutation事件. 预计它们被列入 in Firefox 14 and Chrome 18中。

+ +

避免用mutation事件的实际原因是性能问题和跨浏览器支持。

+ +

性能

+ +

为DOM添加 mutation 监听器极度降低进一步修改DOM文档的性能（慢1.5 - 7倍），此外, 移除监听器不会逆转的损害。

+ +

性能好坏 限制了文档拥有mutation事件监听.

+ +

跨浏览器支持

+ +

这些事件在不同的浏览器实现并不一致, 例如:

+ + + +

Dottoro documents browser support for mutation events.

+ +

Mutation 事件列表

+ +

下面是所有 mutation 事件列表, DOM Level 3 Events specification 中定义的:

+ + + +

使用

+ +

你可以如下所示使用element.addEventListener 注册一个mutation 事件监听器:

+ +
element.addEventListener("DOMNodeInserted", function (ev) {
+  // ...
+}, false);
+
+ +

事件对象在 {{ domxref("MutationEvent") }}传递给监听器 (见 its definition in the specification) 对于大多数的事件, 和 {{ domxref("MutationNameEvent") }} 用于 DOMAttributeNameChanged and DOMElementNameChanged.

diff --git a/files/zh-cn/web/events/orientation_and_motion_data_explained/index.html b/files/zh-cn/web/events/orientation_and_motion_data_explained/index.html new file mode 100644 index 0000000000..97e52cd168 --- /dev/null +++ b/files/zh-cn/web/events/orientation_and_motion_data_explained/index.html @@ -0,0 +1,52 @@ +--- +title: Orientation 和 motion 数据解释 +slug: Web/Events/Orientation_and_motion_data_explained +translation_of: Web/Events/Orientation_and_motion_data_explained +tags: + - Intermediate + - Mobile + - Motion + - NeedsContent + - Orientation + - páginas_a_traducir + - rotation +--- +

{{ Draft() }}

+

总言

+

当我们要使用orientation和motion事件时，理解浏览器给我们的相关值是什么意思就显的相当重要了。这篇文章会详细介绍在用的坐标系统并会教你如何全用它们。

+
+

警告: 目前, Firefox 和 Chrome 处理坐标的方式不同。 在使用它们的时候要多加注意.

+
+

坐标系

+

坐标系是一种描述物体位置的系统，它包含三个轴(X,Y,Z)，三个轴共同描述了物体相对于参照物的位置信息。当我们使用orientation和motion事件时会接触到两种坐标系统。

+

地球坐标系

+

地球坐标系是相对于地心的，也就是说，它的轴是基于重力方向和磁场北方向。我们使用大写的X,Y,Z来描述地球坐标系的轴。

+ +

设备坐标系

+

设备坐标系是相对于设备中心的。我们使用小写的x,y,z来描述它的轴。

+

,axes.png

+ +
+ 注意：对于手机或平台而言，这里的设备方向总是相对于屏幕的标准方向，大部分是“竖屏”方向。而对于笔记本电脑来说，设备方向是相对于键盘的。如果你想检测设备方向变化来进行补偿调整，你可以使用orientationchange事件。
+

旋转(Rotation)

+

旋转描述的是设备在设备坐标系跟地球坐标系中任意轴上的差异值，用角度表示。

+

Alpha

+

围绕z轴旋转设备将使alpha角度值发生变化:

+

alpha.png

+

alpha为0°时表示设备的顶部正指北极方向，当设备向左旋转时，alpha将增加。

+

Beta

+

围绕x轴旋转，也就是前后旋转，将使beta值发生改变:

+

beta.png

+

当beta为0° 时表示设备顶部和底部与地表面的距离是一样的，当设备向前翻转时，beta递增到180°，向后翻转递减到-180°。

+

Gamma

+

当围绕y轴旋转，也就是左右倾斜设备时，将使gamma值发生改变:

+

gamma.png

+

gamma等于0°表示设备左右两边与地表面的距离相等，当设备向右翻转时，gamma递增到90° ，向左翻转时，递减到-90°。

-- cgit v1.2.3-54-g00ecf