如何通过 JavaScript 观察检测输入值变化

在前端开发中，我们经常需要检测输入框的值是否被修改过。本文将介绍如何通过 JavaScript 检测输入框的值变化，并且在值变化时触发相应的事件。

使用 onchange 事件

onchange 事件是在输入框失去焦点后触发，但是它不会实时监测输入框的值变化。因此，如果你要检测输入框的值是否实时变化，此方法并不适用。

<input type="text" onchange="changeHandler()" />

使用 oninput 事件

oninput 事件是在输入框的值变化时实时触发，适合进行实时监测。

<input type="text" oninput="inputHandler()" />

使用 MutationObserver

MutationObserver 是一个可以观察 DOM 变化的对象，可以用来观察输入框的值变化。它可以更加细粒度地检测输入框的值变化，这个方法适用于使用框架的应用。

<div id="input-box"><input type="text"></div>

const targetNode = document.querySelector('#input-box');

const observer = new MutationObserver((mutationsList) => {
    for (let mutation of mutationsList) {
        if (mutation.type === 'childList' && mutation.target.nodeName === 'INPUT') {
            console.log('Input value changed:', mutation.target.value);
        }
    }
});

const config = { childList: true };

observer.observe(targetNode, config);

总结

以上三种方法，onchange 适用于非实时监测的情况；oninput 适用于需要实时监测的情况；MutationObserver 适用于更加细粒度的监测，具备更强的灵活性。在开发过程中，需要根据实际情况选择合适的方法。