点击隐藏元素：JavaScript 事件处理实战（Hide on Click）-优快云博客

【免费下载链接】en.javascript.info

Modern JavaScript Tutorial

项目地址： https://gitcode.com/gh_mirrors/en/en.javascript.info

导读

在 JavaScript 教程的浏览器事件入门章节中，"Hide on click" 是一个经典的动手练习：为一个按钮绑定 click 事件，点击后让指定的 <div> 消失。它看似简单，却涵盖了事件处理程序（Event Handler）的三种绑定方式、this 的指向、hidden 属性与 style.display 的区别等核心知识点。读完本文，你将掌握如何在现代 JavaScript 教程项目中用 onclick / addEventListener 实现"点击即隐藏"的交互，并能举一反三到隐藏按钮自身、关闭消息面板等常见场景。

任务目标与初始代码

本任务位于 2-ui/2-events/01-introduction-browser-events/01-hide-other/task.md，要求如下：

给 button 添加 JavaScript，使点击它时 <div id="text"> 消失。

任务配套的初始 HTML 位于 source.view/index.html，完整内容如下：

<!DOCTYPE HTML>
<html>

<head>
  <meta charset="utf-8">
</head>

<body>

  <input type="button" id="hider" value="Click to hide the text" />

  <div id="text">Text</div>

  <script>
    /* your code */
  </script>

</body>
</html>

页面结构非常清晰：一个 id="hider" 的按钮（<input type="button">），一个 id="text" 的 <div>，以及一段等待填充的 <script>。任务的核心就是把 <script> 里的注释替换为真实的交互逻辑。

两点值得注意的细节：

按钮使用了 <input type="button"> 而非 <button> 标签，两者都能触发 click 事件，但 <input> 通过 value 属性设置显示文本。
目标元素通过 id="text" 定位，为 JavaScript 提供了稳定的选择器入口，这也是 DOM 事件编程中的常见做法——先用 id 锚定节点，再绑定行为。

标准解法：onclick + hidden 属性

官方参考答案位于 solution.view/index.html：

<input type="button" id="hider" value="Click to hide the text" />

<div id="text">Text</div>

<script>
  // Here it doesn't matter how we hide the text,
  // could also use style.display:
  document.getElementById('hider').onclick = function() {
    document.getElementById('text').hidden = true;
  }
</script>

这段代码演示了通过 DOM 属性（DOM property）绑定事件处理程序的方式，逻辑拆解如下：

document.getElementById('hider') 获取按钮节点；
onclick = function() { ... } 将处理函数赋值给按钮的 onclick 属性——当用户点击时，浏览器自动调用这个函数；
处理函数内部用 document.getElementById('text') 拿到目标 <div>，将其 hidden 属性设为 true，元素随即从视图中隐藏。

hidden 属性与 style.display 的取舍

注释中特意提到 "could also use style.display"，即等价写法：

document.getElementById('hider').onclick = function() {
  document.getElementById('text').style.display = 'none';
}

两种方式都能让元素不可见，但语义与效果不同：

方式	写法	特点
`hidden` 属性	`elem.hidden = true`	布尔型全局属性，相当于浏览器内置的 `display: none` 规则，语义直接、代码简洁；设为 `false` 即可恢复显示
`style.display`	`elem.style.display = 'none'`	显式操作内联样式，恢复时需要记得把 `display` 改回原值（如 `'block'`），否则元素不会回来

对于"点击隐藏"这种简单的切换场景，hidden 属性是首选：它不会覆盖元素原本的 display 值（例如 flex、inline-block），恢复时只需 elem.hidden = false，避免了 style.display 常见的"恢复后布局错乱"问题。

事件处理程序的三种绑定方式

理解了基础解法后，再回看本任务所在章节 article.md 中介绍的事件处理程序体系，有助于把单个练习串成完整的知识框架。浏览器事件（click、contextmenu、keydown、submit、DOMContentLoaded、transitionend 等）本质是 DOM 节点发出的信号，而"处理程序"（handler）就是响应这些信号的函数。

方式一：HTML 属性（on ）

在标签中直接写 onclick 属性：

<input value="Click me" onclick="alert('Click!')" type="button">

注意属性内部的引号问题：属性本身用双引号包裹，属性内的字符串应改用单引号，否则 onclick="alert("Click!")" 会因引号冲突而失效。属性名不区分大小写（ONCLICK、onClick 都合法），但惯例统一小写为 onclick。

方式二：DOM 属性（本文解法采用的方案）

elem.onclick = function() {
  alert('Thank you');
};

当浏览器解析到 HTML 属性形式的 onclick="..." 时，会从属性内容构造一个函数并写入对应的 DOM 属性——所以两种方式本质等价。但 DOM 属性有一个重要限制：每个事件只能绑定一个处理程序，再次赋值会覆盖前一个：

elem.onclick = function() { alert('Before'); };
elem.onclick = function() { alert('After'); }; // 覆盖前者

删除处理程序则赋 elem.onclick = null。

方式三：addEventListener / removeEventListener

为突破"单处理程序"的限制，标准提供了更通用的 API：

element.addEventListener(event, handler, [options]);
element.removeEventListener(event, handler, [options]);

event：事件名，如 "click"；
handler：处理函数；
options：可选对象，支持 once（触发后自动移除）、capture（捕获阶段处理）、passive（声明不调用 preventDefault()）等配置。

同一事件可以挂多个处理程序，且能同时与 DOM 属性方式共存。不过移除处理程序时必须传入同一个函数对象，匿名箭头函数无法被 removeEventListener 匹配移除——所以需要移除的处理程序应先用具名函数保存。此外，少数事件（如 DOMContentLoaded）只支持 addEventListener 方式。

本任务选择 DOM 属性方式（方式二）是最贴合"只隐藏一个元素"需求的简洁答案；若未来要在同一按钮上叠加"隐藏文本 + 统计点击次数"等多个逻辑，则应改用 addEventListener。

进阶技巧：用 this 引用元素自身

本章的另一道练习 02-hide-self-onclick/task.md 提出了姊妹需求——按钮点击后隐藏自身：

<input type="button" onclick="this.hidden=true" value="Click to hide">

其妙处在于 this：在事件处理程序中，this 指向绑定该处理程序的元素本身。上述代码用 this.hidden = true 直接隐藏自己，无需任何 getElementById 查找。若使用 DOM 属性方式，同样成立：

button.onclick = function() {
  this.hidden = true; // this === button
};

这也是 article.md 中"Accessing the element: this"一节的核心结论。结合本任务，可以总结出定位元素的两种思路：

目标元素与触发元素不同（本任务）：用 document.getElementById('text') 显式查找；
目标元素就是触发元素：直接用 this，代码更短更健壮（即使元素被移动或重命名 id 也不受影响）。

事件对象：拿到点击的更多细节

隐藏逻辑常常不只是"消失"这么简单——你可能需要知道点击的位置、目标节点，或阻止默认行为。此时要用到事件对象。当事件发生时，浏览器会创建包含细节的事件对象并作为第一个参数传给处理程序：

elem.onclick = function(event) {
  alert(event.type + " at " + event.currentTarget);
  alert("Coordinates: " + event.clientX + ":" + event.clientY);
};

常用属性包括：

event.type：事件类型，如 "click"；
event.currentTarget：当前处理该事件的元素，等价于 this（除非处理程序是箭头函数或 this 被绑定到别处）；
event.clientX / event.clientY：指针事件的窗口相对坐标。

在 HTML 属性方式中事件对象同样可用，因为浏览器构造的处理函数形如 function(event) { ... }，属性内容作为函数体——这恰好也解释了为什么 HTML 属性中调用函数要带括号 onclick="sayThanks()"，而 DOM 属性赋值不能带括号 button.onclick = sayThanks（带括号会把函数的返回值 undefined 赋给属性）。

验证与运行

任务的交互演示通过 solution.view 提供，你可以在浏览器中直接打开该文件验证效果：点击 "Click to hide the text" 按钮，下方 "Text" 文本应立即消失。

动手改写的练习路径如下：

打开 source.view/index.html（未完成版）；
在 <script> 中补全 onclick 处理程序；
保存后刷新浏览器，验证点击隐藏是否生效；
尝试变体：把 hidden = true 换成 style.display = 'none'，或用 addEventListener('click', ...) 重写一遍，对比三者行为差异。

小结

"Hide on click" 虽然只有几行代码，却完整覆盖了浏览器事件编程的起点：

触发者与目标分离时用 id 查找目标节点；
绑定方式上，DOM 属性（elem.onclick）足够应对单处理程序场景，addEventListener 则用于多处理程序与更复杂的需求；
隐藏手段上，hidden 属性比 style.display 更简洁、可逆性更好；
this 指向绑定元素本身，让"隐藏自己"类需求可以一行完成；
事件对象为处理程序提供 type、currentTarget、坐标等上下文信息。

掌握这一模式后，诸如"关闭消息面板""折叠菜单"等交互都可以用同样的思路实现——相关内容可继续阅读本章的 06-hide-message 练习（用 insertAdjacentHTML 插入关闭按钮并结合 remove() 移除面板），以及 article.md 中的 handleEvent 对象处理程序与 addEventListener 高级用法。