JS change事件：检测表单元素的值是否发生变化

在 JavaScript 中，change 事件类型时在表单元素的值发生变化时触发，它主要用于 input、select 和 textarea 元素。对于 input 和 textarea 元素来说，当它们失去焦点且 value 值改变时触发；对于 select 元素，在其选项改变时触发，也就是不是去焦点，也会触发 change 事件。

示例1

在下面示例中，当在第 1 个文本框中输入或修改值时，则第 2 个文本框内会立即显示第 1 个文本框中的当前值。

<input type="text" id="a" />
<input type="text" id="b" />
<script>
    var a = document.getElementsByTagName("input")[0];
    var b = document.getElementsByTagName("input")[1];
    a.onchange = function(){  // 为第一个文本框绑定change事件处理函数
        b.value = this.value;   // 把第一个文本框中的值传递给第二个文本框
    }
</script>

示例2

下面示例演示了当在下拉列表框中选择不同的网站时，会自动打开该网站的首页。

<select>
    <option value="http://www.baidu.com/">百度</option>
    <option value="http://www.google.cn/">Google</option>
</select>
<script>
    var a = document.getElementsByTagName("select")[0];
    a.onchange = function(){
       window.open(this.value,"");   // 根据下拉列表框的当前值打开指定的网址
    }
</script>

示例3

在其他表单元素中也可以应用 change 事件类型。下面示例演示了如何在单选按钮选项组中动态显示变化的值。

<input type="radio" name="r" value="1"  checked="checked" /> 1
<input type="radio" name="r" value="2" /> 2
<input type="radio" name="r" value="3" /> 3
<script>
    var r = document.getElementsByTagName("input");
    for(var i = 0; i < r.length; i ++ ){
        r[i].onchange = function(){
            alert(this.value);
        }
    }
</script>

对于 input 元素来说，由于 change 事件类型仅在用户已经离开了元素且失去焦点时触发，所以当执行上面 3 个示例时会明显感觉延迟响应现象。为了更好地提升用户体验，很多时候会根据需要定义在按键松开或鼠标单击时执行响应，这样速度会快很多。

focus、blur 和 change 事件经常配合使用。一般可以使用 focus 和 blur 事件来以某种方式改变用户界面，要么是向用户给出视觉提示，要么是向界面中添加额外的功能。例如，为文本框显示一个下拉选项菜单。而 change 事件则经常用于验证用户在字段中输入的数据。

示例4

下面示例设计一个文本框，只允许用户输入数值。此时，可以利用 focus 事件修改文本框的背景颜色，以便更清楚的表明这个字段获得了焦点。可以利用 blur 事件恢复文本框的背景颜色，利用 change 事件在用户输入了非数字字符时再次修改背景颜色。

<form id="myform"  method="post" action="javascript:alert('表单提交啦!')">
    <p>
        <label for="comments">请输入数字:</label>
        <br />
        <input type="text" id="txtNumbers" name="numbers" />
    </p>
    <p>
        <input type="submit" value="提交表单" id="submit-btn" />
    </p>
</form>
<script>
    var form = document.getElementById("myform");
    var numbers = form.elements["numbers"];
    numbers.onfocus = function(event){
    event = event || window.event;
    var target = event.target || event.srcElement;
    target.style.backgroundColor = "yellow";
    }
    numbers.onblur = function(event){  
        event = event || window.event;
        var target = event.target || event.srcElement;
        if (/[^\d]/.test(target.value)){
            target.style.backgroundColor = "red";
        } else {
            target.style.backgroundColor = "";
        }
    }
    numbers.onchange = function(event){  
        event = event || window.event;
        var target = event.target || event.srcElement;
        if (/[^\d]/.test(target.value)){
            target.style.backgroundColor = "red";
        } else {
            target.style.backgroundColor = "";
        }
    }
    numbers.focus();
</script>

在上面代码中，onfocus 事件处理程序将文本框的背景颜色修改为黄色，以清楚地表示当前字段已经激活。onblur 和 onchange 事件处理程序则会在发现非数值字符时，将文本框背景色修改为红色。为了测试用户输入的是不是非数值，这里针对文本框的 value 属性使用了简单的正则表达式。而且，为确保无论文本框的值如何变化，验证规则始终如一，onblur 和 onchange 事件处理程序中使用了相同的正则表达式。

关于 blur 和 change 事件发生顺序并没有严格的规定，不同的浏览器没有统一规定。因此，不能假定这两个事件总会以某种顺序一次触发。