表单元素的submit()方法和onsubmit事件应用概述


Posted in Javascript onFebruary 01, 2013

表单元素拥有submit方法,同时也具有onsubmit事件句柄,用于监听表单提交。可以使用elemForm.submit();方法触发表单提交。
1、表单元素中出现了name="submit"的元素
这种情况下elemForm.submit();将不会触发表单提交,因为表单原始的submit方法将会被覆盖(formElem.submit就是对该元素的引用)。
2、elemForm.submit();不会触发表单的onsubmit事件
没有为什么,标准中就是这么规定的。
与此有些类似的是onfocus、onblur和focus()、blur()之间的关系却不同,调用elem.blur()或elem.focus()却会触发onblur和onfocus事件。
这些为我们提供了一个思路,在设计一些UI组件时,需要考虑一些事件在内部调用时是否要触发相关事件。例如Dialog组件,它具有onopen事件,同时返回的对象也会有open()方法,我们这时就必须考虑下open()方法是否需要触发onopen()事件。
3、动态创建表单时遇到的问题
经常使用的一种方法如下,他会在表单submit前调用,根据validate()函数的返回值决定是否需要提交表单。

<form onsubmit="return validate();"></form> 

然而,如果要动态地为一个表单添加验证,即HTML代码中没有写onsubmit,而在页面加载后用javascript给这个form加一个handler,问题就 来了。假设我们已经得到了表单的DOM节点,保存在变量elemForm中,一般这样来给它加上handler:
var check = function() {   
    if ('OK') {   
        return true;   
    } else {   
        return false;   
    }   
};   
if (elemForm.addEventListener) {   
    elemForm.addEventListener("submit", check, false);   
} else if (elemForm.attachEvent) {   
    elemForm.attachEvent("onsubmit", check);   
} 

问题就出现了:在Firefox和Chrome中"return false;"是不能阻止表单的提交的(在IE中可以),这就是为什么大家在onsubmit属性中要写"return check()",而不仅仅是"check()"。

原因是什么呢?请看ECMAScript Language Binding,其中明确地写着,"Object EventListener: This is an ECMAScript function reference. This method has no return value. The parameter is a Event object",意思就是event listener没有返回值。换一种理解,addEventListener可以为元素绑定多个监听函数,某一个事件监听函数的返回值,不可以作为整个事件的返回值。可以使用下面的方法解决

function check(ev) {   
    ev = ev || window.event; // Event对象   
    if (ev.preventDefault) { // 标准浏览器   
        e.preventDefault();   
    } else { // IE浏览器   
        window.event.returnValue = false;   
    }   
} 

其实一切的根本都因为IE不支持DOM Level 2。
Javascript 相关文章推荐
jQueryUI如何自定义组件实现代码
Nov 14 Javascript
nullJavascript中创建对象的五种方法实例
May 07 Javascript
js判断游览器类型及版本号的代码
May 11 Javascript
JQuery实现样式设置、追加、移除与切换的方法
Jun 11 Javascript
使用AngularJS实现表单向导的方法
Jun 19 Javascript
Vue.js中数组变动的检测详解
Oct 12 Javascript
javascript实现复选框全选或反选
Feb 04 Javascript
jQuery实现web页面樱花坠落的特效
Jun 01 jQuery
Bootstrap Table快速完美搭建后台管理系统
Sep 20 Javascript
详解从Vue.js源码看异步更新DOM策略及nextTick
Oct 11 Javascript
详解webpack4多入口、多页面项目构建案例
May 25 Javascript
详解一些适用于Node.js的命名约定
Dec 08 Javascript
js用Date对象处理时间实现思路及代码
Jan 31 #Javascript
document.all的一个比较完整的总结及案例
Jan 31 #Javascript
javascript对select标签的控制(option选项/select)
Jan 31 #Javascript
S2SH整合JQuery+Ajax实现登录验证功能实现代码
Jan 30 #Javascript
js+html+css实现鼠标移动div实例
Jan 30 #Javascript
DWR实现模拟Google搜索效果实现原理及代码
Jan 30 #Javascript
E3 tree 1.6在Firefox下显示问题的修复方法
Jan 30 #Javascript
You might like
UCenter Home二次开发指南
2009/05/28 PHP
php常用文件操作函数汇总
2014/11/22 PHP
CI框架源码解读之URI.php中_fetch_uri_string()函数用法分析
2016/05/18 PHP
浅谈PHP的$_SERVER[SERVER_NAME]
2017/02/04 PHP
php模仿qq空间或朋友圈发布动态、评论动态、回复评论、删除动态或评论的功能(中)
2017/06/11 PHP
asp.net HttpHandler实现图片防盗链
2009/11/09 Javascript
在jQuery1.5中使用deferred对象 着放大镜看Promise
2011/03/12 Javascript
JavaScript下通过的XMLHttpRequest发送请求的代码
2011/06/28 Javascript
使用js正则控制input标签只允许输入的值
2013/07/29 Javascript
jquery绑定事件不生效的解决方法
2014/02/11 Javascript
Egret引擎开发指南之发布项目
2014/09/03 Javascript
JavaScript插件化开发教程(六)
2015/02/01 Javascript
javascript实现C语言经典程序题
2015/11/29 Javascript
使用vue实现点击按钮滑出面板的实现代码
2017/01/10 Javascript
JavaScript和JQuery获取DIV值的方法示例
2017/03/07 Javascript
vue.js国际化 vue-i18n插件的使用详解
2017/07/07 Javascript
利用ES6实现单例模式及其应用详解
2017/12/09 Javascript
Vue二次封装axios为插件使用详解
2018/05/21 Javascript
vue中使用element-ui进行表单验证的实例代码
2018/06/22 Javascript
详解vue添加删除元素的方法
2018/06/30 Javascript
Vue Autocomplete 自动完成功能简单示例
2019/05/25 Javascript
JS实现多功能计算器
2020/10/28 Javascript
ubuntu环境下python虚拟环境的安装过程
2018/01/07 Python
Pandas GroupBy对象 索引与迭代方法
2018/11/16 Python
python print 格式化输出,动态指定长度的实现
2020/04/12 Python
vscode+PyQt5安装详解步骤
2020/08/12 Python
如何在Python3中使用telnetlib模块连接网络设备
2020/09/21 Python
英国旅游额外服务市场领导者:Holiday Extras(机场停车场、酒店、接送等)
2017/10/07 全球购物
商场消防演习方案
2014/02/12 职场文书
小学安全工作汇报材料
2014/08/19 职场文书
2014流动人口计划生育工作总结
2014/12/20 职场文书
毕业纪念册寄语大全
2015/02/26 职场文书
2015年专项整治工作总结
2015/04/03 职场文书
高三化学教学反思
2016/02/22 职场文书
调解协议书范本
2016/03/21 职场文书
PostgreSQL怎么创建分区表详解
2022/06/25 PostgreSQL