JavaScript是一種前端編程語言，它可以使網頁的功能更加豐富。事件是JavaScript中一個非常重要的概念，因為它使得JavaScript可以在特定的動作發生時執行一些代碼。其中之一的事件監聽器是onchange，它監聽了一個元素的值(通常是用戶輸入)的改變。

讓我們看看onchange事件在實際應用中的例子。假設我們有一個文本輸入框和一個下拉菜單，它們控制圖像的顏色。當文本輸入框中的值改變或下拉菜單中的值改變時，圖像的顏色會相應地改變。

<input id="textInput" type="text" value="red">
<select id="colorPicker">
<option value="red">紅色</option>
<option value="blue">藍色</option>
<option value="green">綠色</option>
</select>
<img id="image" src="redImage.jpg">
<script>
let textInput = document.getElementById('textInput');
let colorPicker = document.getElementById('colorPicker');
let image = document.getElementById('image');
textInput.onchange = function() {
image.src = textInput.value + 'Image.jpg';
}
colorPicker.onchange = function() {
image.src = colorPicker.value + 'Image.jpg';
}
</script>

在上面的例子中，我們有一個id為"textInput"的文本輸入框和一個id為"colorPicker"的下拉菜單。當文本輸入框的值改變時，我們將圖像的src屬性設置為textInput的值。同樣的，當下拉菜單的值改變時，我們將圖像的src屬性設置為colorPicker所選項的值。

在實際應用中，onchange事件常常用于表單輸入驗證。例如，當用戶輸入一個無效的電子郵件地址時，我們可以使用onchange事件觸發一個警告消息。

<form>
<label for="email">輸入您的電子郵件地址:</label>
<input type="email" id="email">
<p id="emailError" style="color:red; display:none;">請輸入有效的電子郵件地址</p>
</form>
<script>
let emailInput = document.getElementById('email');
let emailError = document.getElementById('emailError');
emailInput.onchange = function() {
if (!emailInput.checkValidity()) {
emailError.style.display = 'block';
} else {
emailError.style.display = 'none';
}
}
</script>

在上面的例子中，我們有一個id為"email"的電子郵件輸入框以及一個id為"emailError"的段落元素。我們使用了HTML5的內置電子郵件輸入驗證功能，當用戶輸入無效的電子郵件地址時，該輸入框會變紅色并提示用戶輸入有效的電子郵件地址。在onchange事件處理函數中，如果輸入框中的值無效，我們將顯示一個紅色的錯誤消息。

onchange事件在JavaScript中是一個非常常用的事件監聽器，它監聽了元素的值的改變。我們可以使用onchange事件來做許多實際應用的事情，例如表單驗證和圖像顏色控制等。