From de630426a538c1f77d7c59e66827cb75693ed95b Mon Sep 17 00:00:00 2001 From: MDN Date: Wed, 21 Apr 2021 00:11:44 +0000 Subject: [CRON] sync translated content --- .../api/document_object_model/events/index.html | 80 ---------------------- 1 file changed, 80 deletions(-) delete mode 100644 files/zh-cn/web/api/document_object_model/events/index.html (limited to 'files/zh-cn/web/api/document_object_model') diff --git a/files/zh-cn/web/api/document_object_model/events/index.html b/files/zh-cn/web/api/document_object_model/events/index.html deleted file mode 100644 index b2dc638d82..0000000000 --- a/files/zh-cn/web/api/document_object_model/events/index.html +++ /dev/null @@ -1,80 +0,0 @@ ---- -title: 事件及DOM -slug: Web/API/Document_Object_Model/Events -tags: - - DOM - - events -translation_of: Web/API/Document_Object_Model/Events ---- -

{{DefaultAPISidebar("DOM")}}

- -

简介

- -

这一章节介绍了DOM事件模型（DOM Event Model）。主要描述了事件（Event）接口本身以及DOM节点中的事件注册接口、事件监听接口，以及几个展示了多种事件接口之间相互关联的较长示例。

- -

这里有一张非常不错的图表清晰地解释了在DOM3级事件草案（DOM Level 3 Events draft）中通过DOM处理事件流的三个阶段。

- -

也可以通过示例章节的 示例5：事件传递 获取更多事件如何在DOM中流转的相关细节。

- -

注册事件监听器

- -

这里有3种方法来为一个DOM元素注册事件回调。

- -

{{domxref("EventTarget.addEventListener")}}

- -
// 假设 myButton 是一个按钮
-myButton.addEventListener('click', greet, false);
-function greet(event) {
-    // 打印并查看event对象
-    // 打印arguments，以防忽略了其他参数
-    console.log('greet: ' + arguments);
-    alert('Hello world');
-}
-
- -

你应该在现代Web技术的页面中使用这个方法。

- -

备注：IE 6-8 不支持这一方法，但提供了类似的API即 {{domxref("EventTarget.attachEvent")}} 用以替代。考虑到跨浏览器兼容性问题请使用有效的JS代码库。

- -

更多细节可在 {{domxref("EventTarget.addEventListener")}} 参考页面中找到.

- -

HTML 属性

- -
<button onclick="alert('Hello world!')">
-
- -

属性中的JS代码触发时通过event参数将Event类型对象传递过去的。其返回值以特殊的方式来处理，已经在HTML规范中被描述。

- -

应该尽量避免这种书写方式，这将使HTML变大并减少可读性。考虑到内容/结构及行为不能很好的分开，这将造成bug很难被找到。

- -

DOM 元素属性

- -
// 假设 myButton 是一个按钮
-myButton.onclick = function(event){alert('Hello world');};
-
- -

带有event参数的函数可以这样被定义。其返回值以特殊的方式来处理，已经在HTML规范中被描述。

- -

这种方式的问题是每个事件及每个元素只能被设置一个回调。

- -

访问事件接口

- -

事件回调可以被绑定到包括DOM元素、文档、{{domxref("window")}} 等多种对象上。当一个事件被触发时，一个event对象将被创建并顺序的传递给事件监听者们。

- -

 {{domxref("Event")}} 接口可以在回调函数内被访问到，通过被传递进来做为第一个参数的事件对象。以下这个简单例子展示了如何将事件对象传递给事件回调函数，同时可以在这个函数中使用。

- -
function foo(evt) {
-  // evt参数自动分配事件对象
-  alert(evt);
-}
-table_el.onclick = foo;
-
- -

下级页面导航

- - -- cgit v1.2.3-54-g00ecf