JavaScript change 事件 - JavaScript 教程

摘要：在本教程中，您将了解 JavaScript change 事件，它适用于输入文本、单选按钮、复选框和选择元素。

当元素完成更改时，会发生 change 事件。

要将事件处理程序附加到元素的 change 事件，您可以调用 addEventListener() 方法

element.addEventListener('change', function(){
    // handle change
});Code language: JavaScript (javascript)

或使用元素的 onchange 属性。例如

<input type="text" onchange="changeHandler()">Code language: HTML, XML (xml)

但是，建议使用 addEventListener() 方法。

对输入元素使用 JavaScript change 事件

<input> 元素的 change 事件在 <input> 元素失去焦点时触发。当您正在键入时，change 事件不会触发。

以下示例显示了输入文本失去焦点时的值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript change Event for Input Element</title>
</head>
<body>
    <label for="message">Message:</label>
    <input type="text" class="input" id="message" name="message">
    <button>Submit</button>
    <p id="result"></p>
    <script>
        let input = document.querySelector('.input');
        let result = document.querySelector('#result');
        input.addEventListener('change', function () {
            result.textContent = this.value;
        });
    </script>
</body>
</html>Code language: HTML, XML (xml)

在本示例中，如果您在 <input> 元素上输入一些文本并将其焦点移动到按钮上，则会触发 change 事件以显示输入的文本。

请注意，如果您想处理值的每次更改，请使用 input 事件。

对单选按钮使用 JavaScript change 事件

单选按钮在您选择它之后会触发 change 事件。

以下示例演示了如何处理单选按钮的 change 事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript change Event for Radio Buttons</title>
</head>
<body>
    <span>Status:</span>
    <input type="radio" id="pending" name="status"> 
    <label for="pending">Pending</label>
    <input type="radio" id="resolved" name="status"> 
    <label for="resolved">Resolved</label>
    <input type="radio" id="rejected" name="status">
    <label for="rejected">Rejected</label> 
    <p id="result"></p>

    <script>
        let result = document.querySelector('#result');
        document.body.addEventListener('change', function (e) {
            let target = e.target;
            let message;
            switch (target.id) {
                case 'pending':
                    message = 'The Pending radio button changed';
                    break;
                case 'resolved':
                    message = 'The Resolved radio button changed';
                    break;
                case 'rejected':
                    message = 'The Rejected radio button changed';
                    break;
            }
            result.textContent = message;
        });
    </script>
</body>
</html>Code language: HTML, XML (xml)

工作原理

首先，将事件处理程序注册到 body 的 change 事件。单击单选按钮时，其 change 事件会冒泡到 body。这种技术称为事件委托。
然后，根据选择哪个单选按钮显示相应的消息。

对复选框使用 JavaScript change 事件

与单选按钮类似，复选框在选中后会触发 change 事件，无论选中还是未选中。例如

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript change Event for Checkboxes</title>
</head>
<body>
    <label for="status">Web Technology:</label>
    <input type="checkbox" id="html"> HTML
    <input type="checkbox" id="css"> CSS
    <input type="checkbox" id="js"> JavaScript
    <p id="result"></p>

    <script>
        let result = document.querySelector('#result');
        
        document.body.addEventListener('change', function (e) {
            let target = e.target;
            let message;

            switch (target.id) {
                case 'html':
                    message = 'The HTML checkbox changed';
                    break;
                case 'css':
                    message = 'The CSS checkbox changed';
                    break;
                case 'js':
                    message = 'The JavaScript checkbox changed';
                    break;
            }
            result.textContent = message;
        });
    </script>
</body>
</html>Code language: HTML, XML (xml)

对选择元素使用 JavaScript change 事件

<select> 元素在选择完成后会触发 change 事件。

以下示例演示了如何处理 <select> 元素的 change 事件。具有 id result 的 <p> 元素将显示所选项目

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript change Event for Select element</title>
</head>
<body>
    <select id="lang">
        <option value="">Select a language</option>
        <option value="JavaScript">JavaScript</option>
        <option value="TypeScript">TypeScript</option>
        <option value="PHP">PHP</option>
        <option value="Python">Python</option>
        <option value="Java">Java</option>
    </select>
    <p id="result"></p>
    <script>
        let select = document.querySelector('#lang');
        let result = document.querySelector('#result');
        select.addEventListener('change', function () {
            result.textContent = this.value;
        });
    </script>
</body>
</html>Code language: HTML, XML (xml)

工作原理

首先，通过其 id（lang）选择 <select> 元素；
然后，在 <p> 元素中显示所选值。

总结

<input> 元素在其失去焦点后会触发 change 事件。
单选按钮、复选框和选择元素在被选中后会触发 change 事件。

本教程对您有帮助吗？