表单元素的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 相关文章推荐
使用SyntaxHighlighter实现HTML高亮显示代码的方法
Feb 04 Javascript
jquery.validate分组验证代码
Mar 17 Javascript
onkeydown事件解决按回车键直接提交数据的需求
Apr 11 Javascript
下拉框select的绑定示例
Sep 04 Javascript
JS检测移动端横竖屏的代码
May 30 Javascript
微信小程序 详解下拉加载与上拉刷新实现方法
Jan 13 Javascript
JavaScript DOM节点操作实例小结(新建,删除HTML元素)
Jan 19 Javascript
AngularJS 仿微信图片手势缩放的实例
Sep 28 Javascript
详解cordova打包成webapp的方法
Oct 18 Javascript
基于React Native 0.52实现轮播图效果
Aug 25 Javascript
JS判断数组四种实现方法详解
Jun 29 Javascript
JavaScript交换变量常用4种方法解析
Sep 02 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+dbfile开发小型留言本
2006/10/09 PHP
php.ini中文版
2006/10/09 PHP
浅析php与数据库代码开发规范
2013/08/08 PHP
php+js实现图片的上传、裁剪、预览、提交示例
2013/08/27 PHP
PHP实现的MongoDB数据库操作类分享
2014/05/12 PHP
js控制input输入字符解析
2013/12/27 Javascript
理解AngularJs指令
2015/12/10 Javascript
javascript中利用柯里化函数实现bind方法【推荐】
2016/04/29 Javascript
Angular的模块化(代码分享)
2016/12/26 Javascript
利用nvm管理多个版本的node.js与npm详解
2017/11/02 Javascript
微信小程序picker组件简单用法示例【附demo源码下载】
2017/12/05 Javascript
动态Axios的配置步骤详解
2018/01/12 Javascript
Vuex 进阶之模块化组织详解
2018/01/12 Javascript
浅谈vue方法内的方法使用this的问题
2018/09/15 Javascript
vue在路由中验证token是否存在的简单实现
2019/11/11 Javascript
JavaScript数组去重实现方法小结
2020/01/17 Javascript
[02:31]2018年度DOTA2最具人气选手-完美盛典
2018/12/16 DOTA
Python continue语句用法实例
2014/03/11 Python
利用python爬取散文网的文章实例教程
2017/06/18 Python
Python实现将HTML转成PDF的方法分析
2019/05/04 Python
Python如何使用内置库matplotlib绘制折线图
2020/02/24 Python
Tensorflow卷积实现原理+手写python代码实现卷积教程
2020/05/22 Python
html5-websocket基于远程方法调用的数据交互实现
2012/12/04 HTML / CSS
香港士多网上超级市场:Ztore
2021/01/09 全球购物
医院后勤自我鉴定
2013/10/13 职场文书
服务中心夜班服务员岗位职责
2013/11/27 职场文书
查环查孕证明
2014/01/10 职场文书
我的中国梦演讲稿高中篇
2014/08/19 职场文书
离婚协议书的书写要求
2014/09/17 职场文书
个人剖析材料及整改措施
2014/10/07 职场文书
公司开除员工通知
2015/04/22 职场文书
会议主持词开场白
2015/05/28 职场文书
运动会3000米加油稿
2015/07/21 职场文书
学生会2016感恩节活动小结
2016/04/01 职场文书
JavaScript事件的委托(代理)的用法示例详解
2022/02/18 Javascript
Lakehouse数据湖并发控制陷阱分析
2022/03/31 Oracle