表单元素的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两种function的定义介绍及区别说明
May 02 Javascript
jQuery切换网页皮肤并保存到Cookie示例代码
Jun 16 Javascript
js动态切换图片的方法
Jan 20 Javascript
基于JavaScript实现Json数据根据某个字段进行排序
Nov 24 Javascript
基于Bootstrap仿淘宝分页控件实现代码
Nov 07 Javascript
详解JavaScript的内置对象
Dec 07 Javascript
JS实现的五级联动菜单效果完整实例
Feb 23 Javascript
利用JS判断客户端类型你应该知道的四种方法
Dec 22 Javascript
vue中promise的使用及异步请求数据的方法
Nov 08 Javascript
详解微信小程序胶囊按钮返回|首页自定义导航栏功能
Jun 14 Javascript
ant-design-vue按需加载的坑的解决
May 14 Javascript
vue+echarts实现动态折线图的方法与注意
Sep 01 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中的超全局变量
2006/10/09 PHP
使用WAMP搭建PHP本地开发环境
2017/05/10 PHP
[Web]防止用户复制页面内容和另存页面的方法
2009/02/06 Javascript
理解JavaScript变量作用域更轻松
2009/10/25 Javascript
javascript eval和JSON之间的联系
2009/12/31 Javascript
Javascript异步表单提交,图片上传,兼容异步模拟ajax技术
2010/05/10 Javascript
JavaScript中清空数组的三种方法分享
2011/04/07 Javascript
js Array操作的最简短最容易理解方法
2013/12/09 Javascript
js控制容器隐藏出现防止样式变化的两种方法
2014/04/25 Javascript
JavaScript将数组转换成CSV格式的方法
2015/03/19 Javascript
详解JavaScript中getFullYear()方法的使用
2015/06/10 Javascript
BootStrap 智能表单实战系列(十)自动完成组件的支持
2016/06/13 Javascript
jQuery模拟窗口抖动效果
2017/03/15 Javascript
Vue2 使用 Echarts 创建图表实例代码
2017/05/18 Javascript
vue树形结构获取键值的方法示例
2018/06/21 Javascript
Angular刷新当前页面的实现方法
2018/11/21 Javascript
推荐一个基于Node.js的表单验证库
2019/02/15 Javascript
微信小程序如何使用云开发
2019/05/17 Javascript
详解如何在Javascript中使用Object.freeze()
2020/10/18 Javascript
[01:11:27]2018DOTA2亚洲邀请赛小组赛 A组加赛 Newbee vs Optic
2018/04/03 DOTA
python 参数列表中的self 显式不等于冗余
2008/12/01 Python
Python实现破解12306图片验证码的方法分析
2017/12/29 Python
基于Django用户认证系统详解
2018/02/21 Python
python elasticsearch从创建索引到写入数据的全过程
2019/08/04 Python
python爬虫 urllib模块反爬虫机制UA详解
2019/08/20 Python
tensorflow 固定部分参数训练,只训练部分参数的实例
2020/01/20 Python
Python利用FFT进行简单滤波的实现
2020/02/26 Python
python opencv把一张图片嵌入(叠加)到另一张图片上的实现代码
2020/06/11 Python
scrapy-redis分布式爬虫的搭建过程(理论篇)
2020/09/29 Python
三星新西兰官网:Samsung新西兰
2019/03/05 全球购物
婚礼证婚人证婚词
2014/01/08 职场文书
党员教师一句话承诺
2014/05/30 职场文书
就业协议书
2014/09/12 职场文书
管理人员岗位职责
2015/02/14 职场文书
小学班级标语口号大全
2015/12/26 职场文书
idea下配置tomcat避坑详解
2022/04/12 Servers