使用 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 的按鈕清除文字區域。