js blur和change

基础概念：

blur事件：当元素失去焦点时触发，例如用户点击输入框后，再点击输入框外部，此时输入框就会失去焦点，并触发blur事件。
change事件：当表单元素的值发生变化，并且失去焦点时触发。对于<input>元素，通常是在用户完成输入并离开输入框时触发。

优势：

blur事件：适用于需要在元素失去焦点时立即进行验证或处理的场景。
change事件：适用于需要在用户完成输入并进行下一步操作前进行验证的场景。

类型及应用场景：

文本输入框（<input type="text">）：
- 使用blur事件可以在用户离开输入框时立即验证输入内容。
- 使用change事件可以在用户完成输入并离开输入框时验证输入内容。

下拉选择框（<select>）：
- blur事件适用于用户选择后需要立即响应的场景。
- change事件适用于用户选择后需要确认选择的场景。
复选框（<input type="checkbox">）和单选按钮（<input type="radio">）：
- blur事件适用于用户选择后需要立即响应的场景。
- change事件适用于用户选择后需要确认选择的场景。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Event Demo</title>
</head>
<body>
    <input type="text" id="textInput" placeholder="Enter text">
    <select id="selectInput">
        <option value="option1">Option 1</option>
        <option value="option2">Option 2</option>
    </select>
    <input type="checkbox" id="checkboxInput">
    <input type="radio" name="radioGroup" value="option1" id="radioInput1">
    <input type="radio" name="radioGroup" value="option2" id="radioInput2">

    <script>
        const textInput = document.getElementById('textInput');
        const selectInput = document.getElementById('selectInput');
        const checkboxInput = document.getElementById('checkboxInput');
        const radioInput1 = document.getElementById('radioInput1');
        const radioInput2 = document.getElementById('radioInput2');

        textInput.addEventListener('blur', () => {
            console.log('Text input lost focus:', textInput.value);
        });

        textInput.addEventListener('change', () => {
            console.log('Text input value changed:', textInput.value);
        });

        selectInput.addEventListener('blur', () => {
            console.log('Select input lost focus:', selectInput.value);
        });

        selectInput.addEventListener('change', () => {
            console.log('Select input value changed:', selectInput.value);
        });

        checkboxInput.addEventListener('blur', () => {
            console.log('Checkbox input lost focus:', checkboxInput.checked);
        });

        checkboxInput.addEventListener('change', () => {
            console.log('Checkbox input value changed:', checkboxInput.checked);
        });

        radioInput1.addEventListener('blur', () => {
            console.log('Radio input 1 lost focus:', radioInput1.checked);
        });

        radioInput1.addEventListener('change', () => {
            console.log('Radio input 1 value changed:', radioInput1.checked);
        });

        radioInput2.addEventListener('blur', () => {
            console.log('Radio input 2 lost focus:', radioInput2.checked);
        });

        radioInput2.addEventListener('change', () => {
            console.log('Radio input 2 value changed:', radioInput2.checked);
        });
    </script>
</body>
</html>

常见问题及解决方法：