表单元素的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 相关文章推荐
jQuery 连续列表实现代码
Dec 21 Javascript
比较搞笑的js陷阱题
Feb 07 Javascript
Jquery Select操作方法集合脚本之家特别版
May 17 Javascript
js中匿名函数的N种写法
Sep 08 Javascript
javascript中用星号表示预录入内容的实现代码
Jan 08 Javascript
jqueryMobile使用示例分享
Jan 12 Javascript
浅析在javascript中创建对象的各种模式
May 06 Javascript
JSON与js对象序列化实例详解
Mar 16 Javascript
websocket+node.js实现实时聊天系统问题咨询
May 17 Javascript
vue2.0 与 bootstrap datetimepicker的结合使用实例
May 22 Javascript
原生js获取left值和top值的三种方法
Aug 02 Javascript
JavaScript编程设计模式之构造器模式实例分析
Oct 25 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单件模式结合命令链模式使用说明
2008/09/07 PHP
php使用crypt()函数进行加密
2017/06/08 PHP
建立良好体验度的Web注册系统ajax
2007/07/09 Javascript
javascript 图片上传预览-兼容标准
2009/06/01 Javascript
解决火狐浏览器下JS setTimeout函数不兼容失效不执行的方法
2012/11/14 Javascript
打开新窗口关闭当前页面不弹出关闭提示js代码
2013/03/18 Javascript
通过JQuery将DIV的滚动条滚动到指定的位置方便自动定位
2014/05/05 Javascript
Jquery解析Json格式数据过程代码
2014/10/17 Javascript
JS交换变量的方法
2015/01/21 Javascript
JQuery显示隐藏页面元素的方法总结
2015/04/16 Javascript
javascript中类的定义方式详解(四种方式)
2015/12/22 Javascript
jQuery实现div随意拖动的实例代码(通用代码)
2016/01/28 Javascript
JavaScript中点击事件的写法
2016/06/28 Javascript
jQuery生成假加载动画效果
2016/12/01 Javascript
概述BootStrap中role=&quot;form&quot;及role作用角色
2016/12/08 Javascript
node.js+captchapng+jsonwebtoken实现登录验证示例
2017/08/17 Javascript
vue-cli配置文件——config篇
2018/01/04 Javascript
vue实现条件叠加搜索的解决方法
2019/05/28 Javascript
[01:09:50]VP vs Pain 2018国际邀请赛小组赛BO2 第二场
2018/08/20 DOTA
[02:03]风行者至宝清风环佩外观展示
2020/09/05 DOTA
pip 安装库比较慢的解决方法(国内镜像)
2019/10/06 Python
tensorflow 只恢复部分模型参数的实例
2020/01/06 Python
Python同时迭代多个序列的方法
2020/07/28 Python
CSS3支持IE6, 7, and 8的边框border属性
2012/12/28 HTML / CSS
使用canvas压缩图片大小的方法示例
2019/08/02 HTML / CSS
Tripadvisor新西兰:阅读评论,比较价格和酒店预订
2018/02/10 全球购物
微软中国官方商城:Microsoft Store中国
2018/10/12 全球购物
Richards网上商店:当代时尚,遍布巴西
2019/11/03 全球购物
Prototype如何实现页面局部定时刷新
2013/08/06 面试题
生物专业个人自荐信范文
2013/11/29 职场文书
酒店办公室文员岗位职责
2013/12/18 职场文书
消防志愿者活动方案
2014/08/23 职场文书
社保转移委托书范本
2014/10/08 职场文书
党员学习群众路线心得体会
2014/11/04 职场文书
带你彻底理解JavaScript中的原型对象
2021/04/14 Javascript
pytorch 带batch的tensor类型图像显示操作
2021/05/20 Python