使用 JavaScript 在 HTML 中使用按钮清除文本区域
本教程文章将讨论 JavaScript 中的事件监听器，如何在 JavaScript 中创建事件监听器，以及如何使用 JavaScript 在 HTML 中通过按钮清除文本区域。它还将回答以下问题。
- 什么是 JavaScript 中的事件监听器。
- 如何在 JavaScript 中添加事件监听器。
- 如何在 HTML 代码中添加
.js的外部文件。 - 如何使用 JavaScript 在 HTML 中通过按钮清除文本区域。
JavaScript 中的事件监听器
事件侦听器是一个等待某事发生的程序。例如，用户单击或移动鼠标、按下键盘上的键或磁盘 I/O 都是人类行为的示例。
同样，与网络相关的活动或内部定时器或中断都是事件的示例。侦听器设置为调用事件处理程序以响应输入或信号。
短语事件监听器在 Java 和 JavaScript 中经常使用。在其他语言中，事件处理程序是提供类似目的的过程。
在 JavaScript 中添加事件监听器
addEventListener() 是一个内置的 JavaScript 方法，它接受两个参数。第一个参数是要侦听的事件，一旦所述事件发生，第二个参数将被调用。
在不覆盖现有事件处理程序的情况下，单个元素可以拥有无限数量的事件处理程序。
代码：
<html>
<body>
<button id="test">Click here</button>
<h1 id="data"></h1>
<script>
document.getElementById("test").addEventListener("click", function(){
document.getElementById("data").innerText = "Hello There!!!";
});
</script>
</body>
</html>
下图向你展示了上面的代码是如何工作的。当你单击 click here 按钮时，它将为你提供 Hello there!!!的输出。
运行此代码。
在 HTML 中使用 JavaScript 使用按钮清除文本区域
有许多方法可以使用带有 JavaScript 的 HTML 中的按钮来清除文本区域。使用事件侦听器和事件处理程序。
代码：
<form name="form" method="post" target="_blank">
<textarea maxlength="150">
</textarea>
<input type="reset" value="Clear">
</form>
你将在文本框中键入一些文本以查看此代码的工作原理，如下面的屏幕截图所示。
然后单击 Clear 按钮。这将清除文本框中的所有文本，如下所示。
运行此代码。
你可以使用 HTML 标记来清除表单中的文本区域。
在 HTML 中添加 JavaScript 的外部文件
src 属性可以使用脚本标签来导入外部 JavaScript 文件。src 属性也用于在 HTML 或 JavaScript 中添加图像。
JavaScript 文件的位置应该是 src 属性的值。
<script type="application/javascript" src="location/path_to_our_JavaScript_file.js"></script>
此脚本标签必须放在 HTML 内容中的 <head> 元素之间。
使用 JavaScript 的外部文件通过按钮清除文本区域
你还可以使用 HTML 中的外部 .js 文件添加函数和事件侦听器以使用按钮清除文本区域。
<input type="button" value="Clear" id="clear">
<textarea id='data' ></textarea>
它的外部 .js 文件将使用 src 命令在 HTML 文件头中的脚本函数中调用。
var input = document.querySelector('#clear');
var textarea = document.querySelector('#output');
input.addEventListener('click', function() {
textarea.value = '';
}, false);
运行此代码。
使用 JavaScript 删除 HTML 中的文本区域的另一种方法是通过将函数附加到单击按钮来更改 HTML。可以使用以下代码完成。
<input type="button" value="Clear" onclick="javascript:eraseText();">
<textarea id='data'></textarea>
然后添加它的外部 .js 文件，该文件将提供函数 javascript:erasetext() 的详细信息。当用户选择一个元素并单击它时，会触发 onclick 事件。
function eraseText() {
document.getElementById('data').value = '';
}
运行此代码。
还有一种方法可以通过 onclick. 使用函数 clearContent()。
function clearContent() {
document.getElementById('data').value = '';
}
上面给出的是以下 html 代码的外部文件。
<input type="button" value="Clear" onclick="clearContent()">
<textarea id='data' ></textarea>
运行此代码。
本文讨论了事件侦听器是事件处理程序的另一个名称。出于我们的目的，它们几乎可以互换，尽管严格来说它们确实是一起运行的。
侦听器是事件发生时执行的程序。处理程序只是响应发生的事件以及如何在 HTML 代码中添加外部 JavaScript 文件而执行的程序。
此外，你还发现了许多函数和事件侦听器，可用于通过使用 JavaScript 的按钮清除文本区域。
相关文章
Do you understand JavaScript closures?
发布时间：2025/02/21 浏览次数：108 分类：JavaScript
-
The function of a closure can be inferred from its name, suggesting that it is related to the concept of scope. A closure itself is a core concept in JavaScript, and being a core concept, it is naturally also a difficult one.
Do you know about the hidden traps in variables in JavaScript?
发布时间：2025/02/21 浏览次数：178 分类：JavaScript
-
Whether you're just starting to learn JavaScript or have been using it for a long time, I believe you'll encounter some traps related to JavaScript variable scope. The goal is to identify these traps before you fall into them, in order to av
How much do you know about the Prototype Chain?
发布时间：2025/02/21 浏览次数：150 分类：JavaScript
-
The prototype chain can be considered one of the core features of JavaScript, and certainly one of its more challenging aspects. If you've learned other object-oriented programming languages, you may find it somewhat confusing when you start
用 jQuery 检查复选框是否被选中
发布时间：2024/03/24 浏览次数：102 分类：JavaScript
-
在本教程中学习 jQuery 检查复选框是否被选中的所有很酷的方法。我们展示了使用直接 DOM 操作、提取 JavaScript 属性的 jQuery 方法以及使用 jQuery 选择器的不同方法。你还将找到许多有用的
jQuery 中的 Window.onload 与 $(document).ready
发布时间：2024/03/24 浏览次数：180 分类：JavaScript
-
本教程演示了如何在 jQuery 中使用 Window.onload 和 $(document).ready 事件。
