Jquery中文网 www.jquerycn.cn
Jquery中文网 >  脚本编程  >  javascript  >  正文 解析JavaScript共有的表单事件

解析JavaScript共有的表单事件

发布时间:2015-02-02   编辑:www.jquerycn.cn
本文介绍下,javascript中共有的三个表单事件,学习下它们的具体用法,有需要的朋友参考下。

在javascript中,除了支持鼠标、键盘、更改和HTML事件之外,所有表单字段都支持下列3个事件。
 

blur:当前字段失去焦点时触发。
change:对于<input>和<textarea>元素,在它们失去焦点且value值改变时触发;对于<select>元素在其选项发生改变时触发。
focus:当前字段获得焦点时触发

当用于改变了当前字段的焦点,或调用了blur()或focus()方法时,都可以触发blur和focus事件。这两个事件在所有表单字段中都是相同的。但是,change事件在不同表单控件中触发的次数
会有所不同。对于<input>和<textarea>元素,当它们从获得焦点到失去焦点且value值改变时,才会触发change事件。对于<select>元素,只要用户选择了不同的选项,就会触发change事件
;换句话说,不失去焦点也会触发change事件。

通常,可以使用focus和blur事件来以某种方式改变用户界面,那么向用于该处视觉提示,要么是向界面中添加额外功能(例如,为文本框显示一个下拉选项菜单)。而change事件则经常用
与验证用户在字段中输入的数据。例如,假设有一个文本框,只允许用户输入数值。此时,可以利用focus事件来修改文本框的背景颜色,以便更清楚地表明这个字段获得了焦点。可以利用
blur事件恢复文本框的背景颜色,利用change事件在用户输入了非数值字符时再次修改背景颜色。

例子:
 

复制代码 代码示例:

var EventUtil = {
    addHandler: function (element, type, handler) {
        if (element.addEventListener) {
            element.addEventListener(type, handler, false);
        } else if (element.attachEvent) {
            element.attachEvent("on" + type, handler);
        } else {
            element["on" + type] = handler;
        }
    },
    getEvent: function (event) {
        return event ? event : window.event;
    },
    getTarget: function (event) {
        return event.target || event.srcElement;
    }   
};
var textbox = document.forms[0].elements[0];
EventUtil.addHandler(textbox, "focus", function (event) {
    event = EventUtil.getEvent(event);
    var target = EventUtil.getTarget(event);

    if (target.style.background != "red") {
        target.style.background = "yellow";
    }
});
EventUtil.addHandler(textbox, "blur", function (event) {
    event = EventUtil.getEvent(event);
    var target = EventUtil.getTarget(event);

    if (/[^\d]/.test(target.value)) {
        target.style.backgroundColor = "red";
    } else {
        target.style.backgroundColor = "";
    }
});
EventUtil.addHandler(textbox, "change", function (event) {
    event = EventUtil.getEvent(event);
    var target = EventUtil.getTarget(event);

    if (/[^\d]/.test(target.value)) {
        target.style.backgroundColor = "red";
    } else {
        target.style.backgroundColor = "";
    }
});

onfocus事件处理程序将文本框的背景色修改为黄色,以清楚地表现当前字段已经激活。
随后,onblur和onchange事件处理程序则会爱发现非数值字符时,将文本框背景修改为红色。
为了测试用户输入的是不是非数值,这里针对文本狂的value属性使用了简单的正则表达式。
而且,为了确保无论文本框的值如何变化,验证规则始终如意,onblur和onchange事件处理程序中使用了相同的正则表达式。
关于blur和change事件的关系,并没有严格的规定。

猜你喜欢:JavaScript基础之共有的表单字段属性

注意:
在某些浏览器中,blur事件会先于change事件发生;而在其它浏览器中,则恰好相反。
为此,不能假定这两个事件总会以某种数序一次触发。

您可能感兴趣的文章:
解析jQuery的三种bind/One/Live事件绑定使用方法
解析JavaScript共有的表单事件
JavaScript基础之共有的表单字段属性
JavaScript键盘事件深入解析
理解邮件正向解析和反向解析
jQuery javaScript捕获回车事件(示例代码)
jquery submit ie6下失效的原因分析及解决方法
Jquery中"$(document).ready(function(){ })"函数的使用详解
JavaScript 实例
jquery绑定事件不生效的解决方法

[关闭]