使用 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 的按钮清除文本区域。
相关文章
在 JavaScript 中 use strict
发布时间：2024/03/20 浏览次数：56 分类：JavaScript
-
在本文中，学习 JavaScript 中的 use strict 特性。我们将通过不同的示例了解如何在 JavaScript 代码语句中创建和执行 use strict 关键字。
在 JavaScript 中更改输入值
发布时间：2024/03/20 浏览次数：69 分类：JavaScript
-
我们可以使用 JavaScript 中的 value 属性或 setAttribute() 函数更改输入值。
JavaScript 清除输入
发布时间：2024/03/20 浏览次数：125 分类：JavaScript
-
输入字段可以重置或与空值相关联。onfocus 属性可以触发一个函数，起到清除输入的作用。此外，使用 value 属性获取输入条目和清除输入的 reset 方法非常容易掌握。
在 JavaScript 中验证表单输入中的数字
发布时间：2024/03/20 浏览次数：147 分类：JavaScript
-
本文将教你如何在 JavaScript 中验证数字。我们将使用正则表达式和 JavaScript 函数，包括 isNaN、parseFloat 和 isFinite。
