摘要：浏览器允许我们跟踪外部资源的加载 —— 脚本，iframe，图片等。 这里有两个事件： onload —— 成功加载， onerror —— 出现 error。 加载脚本 假设我们需要加载第三方脚本，并调用其中的函数。 我们可以像这样动态加载它： let script = document.crea
阅读全文
摘要：现代的网站中，脚本往往比 HTML 更“重”：它们的大小通常更大，处理时间也更长。 当浏览器加载 HTML 时遇到 <script>...</script> 标签，浏览器就不能继续构建 DOM。它必须立刻执行此脚本。对于外部脚本 <script src="..."></script> 也是一样的：浏
阅读全文
摘要：HTML 页面的生命周期包含三个重要事件： DOMContentLoaded —— 浏览器已完全加载 HTML，并构建了 DOM 树，但像 <img> 和样式表之类的外部资源可能尚未加载完成。 load —— 浏览器不仅加载完成了 HTML，还加载完成了所有外部资源：图片，样式等。 beforeun
阅读全文
摘要：提交表单时，会触发 submit 事件，它通常用于在将表单发送到服务器之前对表单进行校验，或者中止提交，并使用 JavaScript 来处理表单。 form.submit() 方法允许从 JavaScript 启动表单发送。我们可以使用此方法动态地创建表单，并将其发送到服务器。 让我们看看它们的更多
阅读全文
摘要：事件：change 当元素更改完成时，将触发 change 事件。 对于文本输入框，当其失去焦点时，就会触发 change 事件。 例如，当我们在下面的文本字段中键入内容时 —— 不会触发 change 事件。但是，当我们将焦点移到其他位置时，例如，点击按钮 —— 就会触发 change 事件： <
阅读全文
摘要：当用户点击某个元素或使用键盘上的 Tab 键选中时，该元素将会获得聚焦（focus）。还有一个 HTML 特性（attribute）autofocus 可以让焦点在网页加载时默认落在一个元素上，此外还有其它途径可以获得焦点。 聚焦到一个元素通常意味着：“准备在此处接受数据”，所以，这正是我们可以运行
阅读全文
摘要：表单（form）以及例如 <input> 的控件（control）元素有许多特殊的属性和事件。 当我们学习了这些相关内容后，处理表单会变得更加方便。 导航：表单和元素 文档中的表单是特殊集合 document.forms 的成员。 这就是所谓的“命名的集合”：既是被命名了的，也是有序的。我们既可以使
阅读全文
摘要：scroll 事件允许对页面或元素滚动作出反应。我们可以在这里做一些有用的事情。 例如： 根据用户在文档中的位置显示/隐藏其他控件或信息。 当用户向下滚动到页面末端时加载更多数据。 这是一个显示当前滚动的小函数： window.addEventListener('scroll', function(
阅读全文
摘要：在我们开始学习键盘的相关内容之前，请注意，在现代设备上，还有其他“输入内容”的方法。例如，人们使用语音识别（尤其是在移动端设备上）或用鼠标复制/粘贴。 因此，如果我们想要跟踪 <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。但是还
阅读全文
浙公网安备 33010602011771号