使用 JavaScript 在 HTML 中使用按钮清除文本区域
- JavaScript 中的事件监听器
- 在 JavaScript 中添加事件监听器
- 在 HTML 中使用 JavaScript 使用按钮清除文本区域
- 在 HTML 中添加 JavaScript 的外部文件
- 使用 JavaScript 的外部文件通过按钮清除文本区域
本教程文章将讨论 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 的按钮清除文本区域。