change事件主要用於監聽表單元素的值變更，尤其是像 <input>, <select>, 和 <textarea> 這類元素。
以下範例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>
<body>
<label for="subscribeCheckbox">訂閱電子報：</label>
<input type="checkbox" id="subscribeCheckbox">
<p id="checkboxOutput"></p>
<script>
const checkbox = document.getElementById('subscribeCheckbox');
const checkboxOutput = document.getElementById('checkboxOutput');
checkbox.addEventListener('change', function() {
if (checkbox.checked) {
checkboxOutput.textContent = '你已訂閱電子報';
} else {
checkboxOutput.textContent = '你取消了訂閱電子報';
}
});
</script>
</body>
</html>
change就是觸發某件事，就會出現以下想呈現的內容，就像以上的程式碼，<input id="subscribeCheckbox">為觸發事件，checked就是偵測input是否被勾選，如果被勾選的話，輸出的內容就是'你已訂閱電子報'，否則輸出'你取消了訂閱電子報'。
以下為顯示結果:
今天就先介紹到這啦~
iThome鐵人賽
看影片追技術