表单元素的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 相关文章推荐
js写一个弹出层并锁屏效果实现代码
Dec 07 Javascript
如何创建一个JavaScript弹出DIV窗口层的效果
Sep 25 Javascript
利用js动态添加删除table行的示例代码
Dec 16 Javascript
c#程序员对TypeScript的认识过程
Jun 19 Javascript
Jquery插件之Fancybox丰富的弹出层效果附源码下载
Dec 02 Javascript
阿里巴巴技术文章分享 Javascript继承机制的实现
Jan 14 Javascript
node.js路径处理方法以及绝对路径详解
Mar 04 Javascript
AngularJS解决ng界面长表达式(ui-set)的方法分析
Nov 07 Javascript
javascript中json基础知识详解
Jan 19 Javascript
bootstrap jquery dataTable 异步ajax刷新表格数据的实现方法
Feb 10 Javascript
微信小程序scroll-view仿拼多多横向滑动滚动条
Apr 21 Javascript
微信小程序如何使用canvas二维码保存至手机相册
Jul 15 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
获取php页面执行时间,数据库读写次数,函数调用次数等(THINKphp)
2013/06/03 PHP
PHP5.3安装Zend Guard Loader图文教程
2014/09/29 PHP
学习php设计模式 php实现观察者模式(Observer)
2015/12/09 PHP
js输出列表实现代码
2010/09/12 Javascript
JavaScript调用后台的三种方法实例
2013/10/17 Javascript
jQuery获得内容和属性方法及示例
2013/12/02 Javascript
JQuery对ASP.NET MVC数据进行更新删除
2016/07/13 Javascript
AngularJS 应用身份认证的技巧总结
2016/11/07 Javascript
jQuery实现淡入淡出的模态框
2017/02/09 Javascript
微信小程序实现滑动删除效果
2017/05/19 Javascript
input 标签实现输入框带提示文字效果(两种方法)
2017/10/09 Javascript
JavaScript引用类型Date常见用法实例分析
2018/08/08 Javascript
vue 监听屏幕高度的实例
2018/09/05 Javascript
vue-cli项目代理proxyTable配置exclude的方法
2018/09/20 Javascript
vue实现鼠标移过出现下拉二级菜单功能
2019/12/12 Javascript
webpack打包优化的几个方法总结
2020/02/10 Javascript
npm ci命令的基本使用方法
2020/09/20 Javascript
[04:03]2014DOTA2西雅图国际邀请赛 LGD战队巡礼
2014/07/07 DOTA
python脚本生成caffe train_list.txt的方法
2018/04/27 Python
python-web根据元素属性进行定位的方法
2019/12/13 Python
Python填充任意颜色,不同算法时间差异分析说明
2020/05/16 Python
HTML5+CSS3模仿优酷视频截图功能示例
2017/01/05 HTML / CSS
阿玛尼化妆品美国官网:Giorgio Armani Beauty
2017/02/02 全球购物
澳大利亚最大的百货公司:Myer
2018/12/21 全球购物
三陽商会官方网站:Sanyo iStore
2019/05/15 全球购物
枚举和一组预处理的#define有什么不同
2016/09/21 面试题
介绍一下Linux中的链接
2016/05/28 面试题
在职人员函授期间自我评价分享
2013/11/08 职场文书
计算机网络专业推荐信
2013/11/24 职场文书
关于保护环境的建议书
2014/05/13 职场文书
2014年党员整改措施
2014/10/24 职场文书
学术会议通知范文
2015/04/15 职场文书
大学生求职意向书
2015/05/11 职场文书
水知道答案观后感
2015/06/08 职场文书
一百条裙子读书笔记
2015/07/01 职场文书
MySQL中varchar和char类型的区别
2021/11/17 MySQL