JavaScript中的change事件是一個非常有用的事件，它可以在用戶對表單或者input元素進行操作時觸發。當用戶修改輸入框中的值時，change事件會自動觸發，這為開發人員提供了一個機會來實現一些有趣的交互效果。下面，我們通過一些例子來演示change事件的使用方法。

首先，我們來看一個簡單的例子。假設我們有一個文本框，它的值是一個數字，并且我們想實時的將用戶輸入的數字進行運算，然后將結果顯示出來。

<input type="number" id="inputNum">
<p><span id="result"></span></p>
<script>
let inputNum = document.getElementById('inputNum');
let result = document.getElementById('result');
// 添加change事件監聽
inputNum.addEventListener('change', () =>{
let num = parseInt(inputNum.value);
result.innerText = num * num;
});
</script>

在這個例子中，我們給文本框添加了一個change事件監聽器，當用戶輸入新的值時，會調用回調函數。回調函數的作用是獲取輸入框中的數字進行運算，然后將結果更新到頁面中。這個例子非常簡單，但是它展示了change事件的基本用法。

接下來，讓我們看一個稍微復雜一些的例子。假設我們有一個多選框，當用戶勾選選項時，我們想動態的改變網頁的主題顏色。

<input type="checkbox" onchange="changeTheme()">
<script>
function changeTheme() {
let checkbox = document.querySelector('input[type="checkbox"]');
document.body.style.backgroundColor = checkbox.checked ? "black" : "white";
}
</script>

在這個例子中，我們直接在多選框元素上添加了一個change事件的回調函數。當用戶勾選選項時，change事件會自動觸發，然后調用我們的回調函數。回調函數的作用是根據多選框的勾選狀態來動態的改變網頁的背景色。這是一個非常簡單但是有趣的例子，它展示了change事件的強大功能。

最后，讓我們來看一個復雜一些的例子。假設我們有一個下拉框，它的選項是一個數組，我們想根據用戶的選擇，動態的顯示一張圖片。

<select onchange="selectImage()">
<option value="1">選項1</option>
<option value="2">選項2</option>
<option value="3">選項3</option>
</select>
<img id="image">
<script>
let image = document.getElementById('image');
function selectImage() {
let select = document.querySelector('select');
let value = select.value;
if (value === "1") {
image.src = "image1.png";
} else if (value === "2") {
image.src = "image2.png";
} else if (value === "3") {
image.src = "image3.png";
}
}
</script>

在這個例子中，我們給下拉框元素添加了一個change事件監聽器，當用戶選擇不同的選項時，會觸發回調函數。回調函數的作用是根據用戶的選擇，動態的顯示不同的圖片。這是一個比較復雜的例子，但是它展示了change事件的靈活性。

總之，JavaScript中的change事件是一個非常有用的事件，它可以在用戶對表單或者input元素進行操作時觸發。通過change事件，我們可以實現許多有趣的交互效果。以上是我們通過一些例子演示了change事件的用法，希望能對你有所幫助。