表单元素的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 相关文章推荐
javaScript checkbox 全选/反选及批量删除
Apr 28 Javascript
js数组循环遍历数组内所有元素的方法
Jan 18 Javascript
jquery select 设置默认选中的示例代码
Feb 07 Javascript
javascript常用函数归纳整理
Oct 31 Javascript
pace.js页面加载进度条插件
Sep 29 Javascript
详解开发react应用最好用的脚手架 create-react-app
Apr 24 Javascript
Node.js+Express+Mysql 实现增删改查
Apr 03 Javascript
使用 vue 实现灭霸打响指英雄消失的效果附demo
May 06 Javascript
JavaScript使用面向对象实现的拖拽功能详解
Jun 12 Javascript
JS实现滑动导航效果
Jan 14 Javascript
微信小程序动态评分展示/五角星展示/半颗星展示/自定义长度展示功能的实现
Jul 22 Javascript
vue使用vue-quill-editor富文本编辑器且将图片上传到服务器的功能
Jan 13 Vue.js
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获取当前完整URL地址的函数
2014/12/21 PHP
php列出mysql表所有行和列的方法
2015/03/13 PHP
PHP自动生成表单代码分享
2015/06/19 PHP
php简单创建zip压缩文件的方法
2016/04/30 PHP
PHP递归删除多维数组中的某个值
2017/04/17 PHP
解决php用mysql方式连接数据库出现Deprecated报错问题
2019/12/25 PHP
CL vs ForZe BO5 第四场 2.13
2021/03/10 DOTA
javascript 关闭IE6、IE7
2009/06/01 Javascript
jquery pagination插件实现无刷新分页代码
2009/10/13 Javascript
JS 加入收藏夹的代码(主流浏览器通用)
2013/05/13 Javascript
javascript实现阻止iOS APP中的链接打开Safari浏览器
2014/06/12 Javascript
jquery获得同源iframe内body下标签的值的方法
2014/09/25 Javascript
javascript设计模式--策略模式之输入验证
2015/11/27 Javascript
基于jQuery实现仿QQ空间送礼物功能代码
2016/05/24 Javascript
JavaScript链式调用实例浅析
2018/12/19 Javascript
js设置默认时间跨度过程详解
2019/07/17 Javascript
Python中用Ctrl+C终止多线程程序的问题解决
2013/03/30 Python
python 获取指定文件夹下所有文件名称并写入列表的实例
2018/04/23 Python
python中多层嵌套列表的拆分方法
2018/07/02 Python
Python实现的ftp服务器功能详解【附源码下载】
2019/06/26 Python
python开启debug模式的方法
2019/06/27 Python
python time.sleep()是睡眠线程还是进程
2019/07/09 Python
解决Django中修改js css文件但浏览器无法及时与之改变的问题
2019/08/31 Python
Python中list循环遍历删除数据的正确方法
2019/09/02 Python
django中的图片验证码功能
2019/09/18 Python
中国高端鲜花第一品牌:roseonly(一生只送一人)
2017/02/12 全球购物
奥地利领先的在线药房:SHOP APOTHEKE
2019/10/07 全球购物
delegate与普通函数的区别
2014/01/22 面试题
外贸会计专业自荐信
2014/06/22 职场文书
县政府领导班子“四风”方面突出问题整改措施
2014/09/23 职场文书
2015年八一建军节演讲稿
2015/03/19 职场文书
学雷锋团日活动总结
2015/05/06 职场文书
围城读书笔记
2015/06/26 职场文书
物业公司管理制度
2015/08/05 职场文书
初中政教处工作总结
2015/08/12 职场文书
MongoDB数据库部署环境准备及使用介绍
2022/03/21 MongoDB