摘要：在我们开始学习键盘的相关内容之前，请注意，在现代设备上，还有其他“输入内容”的方法。例如，人们使用语音识别（尤其是在移动端设备上）或用鼠标复制/粘贴。 因此，如果我们想要跟踪 <input> 字段中的所有输入，那么键盘事件是不够的。无论如何，还需要一个名为 input 的事件来跟踪 <input>
阅读全文
摘要：指针事件（Pointer Events）是一种用于处理来自各种输入设备（例如鼠标、触控笔和触摸屏等）的输入信息的现代化解决方案。 一段简史 让我们先做一个简短的概览，以便你对指针事件及其在其它事件类型中所处位置有个粗略认识。 很早以前，只存在鼠标事件。 后来，触屏设备开始普及，尤其是手机和平板电脑。
阅读全文
摘要：拖放（Drag’n’Drop）是一个很赞的界面解决方案。取某件东西并将其拖放是执行许多东西的一种简单明了的方式，从复制和移动文档（如在文件管理器中）到订购（将物品放入购物车）。 在现代 HTML 标准中有一个 关于拖放的部分，其中包含了例如 dragstart 和 dragend 等特殊事件。 这些
阅读全文
摘要：我们将深入研究鼠标在元素之间移动时发生的事件。 事件 mouseover/mouseout，relatedTarget 当鼠标指针移到某个元素上时，mouseover 事件就会发生，而当鼠标离开该元素时，mouseout 事件就会发生。 这些事件很特别，因为它们具有 relatedTarget 属性
阅读全文
摘要：在本章中，我们将详细介绍鼠标事件及其属性。 请注意：此类事件不仅可能来自于“鼠标设备”，还可能来自于对此类操作进行了模拟以实现兼容性的其他设备，例如手机和平板电脑。 鼠标事件类型 我们已经见过了其中一些事件： mousedown/mouseup 在元素上点击/释放鼠标按钮。 mouseover/mo
阅读全文
摘要：我们不仅可以分配事件处理程序，还可以从 JavaScript 生成事件。 自定义事件可用于创建“图形组件”。例如，我们自己的基于 JavaScript 的菜单的根元素可能会触发 open（打开菜单），select（有一项被选中）等事件来告诉菜单发生了什么。另一个代码可能会监听事件，并观察菜单发生了什
阅读全文
摘要：许多事件会自动触发浏览器执行某些行为。 例如： 点击一个链接 —— 触发导航（navigation）到该 URL。 点击表单的提交按钮 —— 触发提交到服务器的行为。 在文本上按下鼠标按钮并移动 —— 选中文本。 如果我们使用 JavaScript 处理一个事件，那么我们通常不希望发生相应的浏览器行
阅读全文
摘要：捕获和冒泡允许我们实现最强大的事件处理模式之一，即 事件委托 模式。 这个想法是，如果我们有许多以类似方式处理的元素，那么就不必为每个元素分配一个处理程序 —— 而是将单个处理程序放在它们的共同祖先上。 在处理程序中，我们获取 event.target 以查看事件实际发生的位置并进行处理。 让我们看
阅读全文
摘要：让我们从一个示例开始。 处理程序（handler）被分配给了 <div>，但是如果你点击任何嵌套的标签（例如 <em> 或 <code>），该处理程序也会运行： <div onclick="alert('The handler!')"> <em>If you click on <code>EM</c
阅读全文
摘要：事件 是某事发生的信号。所有的 DOM 节点都生成这样的信号（但事件不仅限于 DOM）。 这是最有用的 DOM 事件的列表，你可以浏览一下： 鼠标事件： click —— 当鼠标点击一个元素时（触摸屏设备会在点击时生成）。 contextmenu —— 当鼠标右键点击一个元素时。 mouseover
阅读全文
摘要：要移动页面的元素，我们应该先熟悉坐标。 大多数 JavaScript 方法处理的是以下两种坐标系中的一个： 相对于窗口 —— 类似于 position:fixed，从窗口的顶部/左侧边缘计算得出。 我们将这些坐标表示为 clientX/clientY，当我们研究事件属性时，就会明白为什么使用这种名称
阅读全文
摘要：我们如何找到浏览器窗口（window）的宽度和高度呢？我们如何获得文档（document）的包括滚动部分在内的完整宽度和高度呢？我们如何使用 JavaScript 滚动页面？ 对于此类信息，我们可以使用与 <html> 标签相对应的根文档元素 document.documentElement。但是还
阅读全文
摘要：JavaScript 中有许多属性可让我们读取有关元素宽度、高度和其他几何特征的信息。 我们在 JavaScript 中移动或定位元素时，我们会经常需要它们。 示例元素 作为演示属性的示例元素，我们将使用下面给出的元素： <div id="example"> ...Text... </div> <s
阅读全文
摘要：在我们讨论 JavaScript 处理样式和类的方法之前 —— 有一个重要的规则。希望它足够明显，但是我们仍然必须提到它。 通常有两种设置元素样式的方式： 在 CSS 中创建一个类，并添加它：<div class="..."> 将属性直接写入 style：<div style="...">。 Jav
阅读全文
摘要：DOM 修改是创建“实时”页面的关键。 在这里，我们将会看到如何“即时”创建新元素并修改现有页面内容。 例子：展示一条消息 让我们使用一个示例进行演示。我们将在页面上添加一条比 alert 更好看的消息。 它的外观如下： <style> .alert { padding: 15px; border:
阅读全文
摘要：当浏览器加载页面时，它会“读取”（或者称之为：“解析”）HTML 并从中生成 DOM 对象。对于元素节点，大多数标准的 HTML 特性（attributes）会自动变成 DOM 对象的属性（properties）。（译注：attribute 和 property 两词意思相近，为作区分，全文将 at
阅读全文
摘要：让我们更深入地了解一下 DOM 节点。 在本章中，我们将更深入地了解它们是什么，并学习它们最常用的属性。 DOM 节点类 不同的 DOM 节点可能有不同的属性。例如，标签 <a> 相对应的元素节点具有链接相关的（link-related）属性，标签 <input> 相对应的元素节点具有与输入相关的属
阅读全文
摘要：当元素彼此靠得近时，DOM 导航属性（navigation property）非常有用。如果不是，那该怎么办？如何去获取页面上的任意元素？ 还有其他搜索方法。 document.getElementById 或者只使用 id 如果一个元素有 id 特性（attribute），那我们就可以使用 doc
阅读全文
摘要：DOM 让我们可以对元素和它们中的内容做任何事，但是首先我们需要获取到对应的 DOM 对象。 对 DOM 的所有操作都是以 document 对象开始。它是 DOM 的主“入口点”。从它我们可以访问任何节点。 这里是一张描述对象间链接的图片，通过这些链接我们可以在 DOM 节点之间移动。 让我们更详
阅读全文
摘要：HTML 文档的主干是标签（tag）。 根据文档对象模型（DOM），每个 HTML 标签都是一个对象。嵌套的标签是闭合标签的“子标签（children）”。标签内的文本也是一个对象。 所有这些对象都可以通过 JavaScript 来访问，我们可以使用它们来修改页面。 例如，document.body
阅读全文
浙公网安备 33010602011771号