表单元素的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实现浏览器菜单命令
Sep 05 Javascript
JavaScript高级程序设计(第3版)学习笔记9 js函数(下)
Oct 11 Javascript
js自定义方法通过隐藏iframe实现文件下载
Feb 21 Javascript
JS实现点击按钮获取页面高度的方法
Nov 02 Javascript
jquery插件jquery.LightBox.js实现点击放大图片并左右点击切换效果(附demo源码下载)
Feb 25 Javascript
Node.js测试中的Mock文件系统详解
Nov 21 Javascript
微信小程序-小说阅读小程序实例(demo)
Jan 12 Javascript
浅谈React深度编程之受控组件与非受控组件
Dec 26 Javascript
babel之配置文件.babelrc入门详解
Feb 22 Javascript
详解几十行代码实现一个vue的状态管理
Jan 28 Javascript
vue 导航内容设置选中状态样式的例子
Nov 01 Javascript
TypeScript 使用 Tuple Union 声明函数重载
Apr 07 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
收音机怀古---春雷3P7图片欣赏
2021/03/02 无线电
php与Mysql的一些简单的操作
2015/02/26 PHP
CI(Codeigniter)的Setting增强配置类实例
2016/01/06 PHP
最新版本PHP 7 vs HHVM 多角度比较
2016/02/14 PHP
php封装单文件上传到数据库(路径)
2017/10/15 PHP
PHP判断一个变量是否为整数、正整数的方法示例
2019/09/11 PHP
如何用javascript控制上传文件的大小
2006/10/26 Javascript
JavaScript入门教程(2) JS基础知识
2009/01/31 Javascript
11个用于提高排版水平的基于jquery的文字效果插件
2012/09/14 Javascript
jquery remove方法应用详解
2012/11/22 Javascript
详解webpack进阶之loader篇
2017/08/23 Javascript
AngularJs用户登录问题处理(交互及验证、阻止FQ处理)
2017/10/26 Javascript
Vue-resource拦截器判断token失效跳转的实例
2017/10/27 Javascript
Vue利用canvas实现移动端手写板的方法
2018/05/03 Javascript
vue.draggable实现表格拖拽排序效果
2018/12/01 Javascript
Cocos2d实现刮刮卡效果
2018/12/20 Javascript
微信小程序点击view动态添加样式过程解析
2020/01/21 Javascript
angula中使用iframe点击后不执行变更检测的问题
2020/05/10 Javascript
Nuxt 嵌套路由nuxt-child组件用法(父子页面组件的传值)
2020/11/05 Javascript
python如何通过protobuf实现rpc
2016/03/06 Python
Python探索之实现一个简单的HTTP服务器
2017/10/28 Python
基于OpenCV python3实现证件照换背景的方法
2019/03/22 Python
python3 使用traceback定位异常实例
2020/03/09 Python
实列教程 一款基于jquery和css3的响应式二级导航菜单
2014/11/13 HTML / CSS
Html5移动端获奖无缝滚动动画实现示例
2018/06/25 HTML / CSS
英国最大的老式糖果店:A Quarter Of
2017/04/08 全球购物
加拿大休闲和工业服装和鞋类零售商:L’Équipeur
2018/01/12 全球购物
索引覆盖(Index Covering)查询含义
2012/02/18 面试题
电大自我鉴定范文
2013/10/01 职场文书
简单英文演讲稿
2014/01/01 职场文书
项目合作计划书
2014/01/09 职场文书
犯错检讨书
2014/02/21 职场文书
奶茶店创业计划书
2014/08/14 职场文书
中小学生安全教育观后感
2015/06/17 职场文书
毕业典礼主持词
2015/06/29 职场文书
MySQL中的全表扫描和索引树扫描
2022/05/15 MySQL