表单元素的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,超强推荐base.js
Dec 23 Javascript
JS创建优美的页面滑动块效果 - Glider.js
Sep 27 Javascript
Javascript 中文字符串处理额外注意事项
Nov 15 Javascript
JavaScript学习笔记之获取当前目录的实现代码
Dec 14 Javascript
jQuery源码分析-05异步队列 Deferred 使用介绍
Nov 14 Javascript
jQuery实现图片放大预览实现原理及代码
Sep 12 Javascript
网页广告中JS代码的信息监听示例
Apr 02 Javascript
微信小程序wx.request实现后台数据交互功能分析
Nov 25 Javascript
微信小程序实现导航栏选项卡效果
Jun 19 Javascript
微信小程序实现自上而下字幕滚动
Jul 14 Javascript
微信小程序自定义导航栏
Dec 31 Javascript
vue cli 3.0通用打包配置代码,不分一二级目录
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
thinkphp实现数组分页示例
2014/04/13 PHP
php 利用socket发送HTTP请求(GET,POST)
2015/08/24 PHP
PHP实现QQ登录实例代码
2016/01/14 PHP
jquery 双色表格实现代码
2009/12/08 Javascript
JavaScript实现按Ctrl键打开新页面
2014/09/04 Javascript
深入理解javascript变量声明
2014/11/20 Javascript
JavaScript把数组作为堆栈使用的方法
2015/03/20 Javascript
JQuery跳出each循环的方法
2015/04/16 Javascript
JS将滑动门改为选项卡(需鼠标点击)的实现方法
2015/09/27 Javascript
JavaScipt中栈的实现方法
2016/02/17 Javascript
浅谈时钟的生成(js手写简洁代码)
2016/08/20 Javascript
jQuery子元素过滤选择器用法示例
2016/09/09 Javascript
Angular.js中用ng-repeat-start实现自定义显示
2016/10/18 Javascript
Canvas实现放射线动画效果
2017/02/15 Javascript
angularJS深拷贝详解
2017/03/23 Javascript
JavaScript之Date_动力节点Java学院整理
2017/06/28 Javascript
bootstrap table插件的分页与checkbox使用详解
2017/07/23 Javascript
基于node.js express mvc轻量级框架实践
2017/09/14 Javascript
vue实现滑动到底部加载更多效果
2020/10/27 Javascript
JavaScript使用百度ECharts插件绘制饼图操作示例
2019/11/26 Javascript
Vue scoped及deep使用方法解析
2020/08/01 Javascript
详解vue-router的导航钩子(导航守卫)
2020/11/02 Javascript
Python实现批量转换文件编码的方法
2015/07/28 Python
Python实现的桶排序算法示例
2017/11/29 Python
python禁用键鼠与提权代码实例
2019/08/16 Python
python中几种自动微分库解析
2019/08/29 Python
Python 取numpy数组的某几行某几列方法
2019/10/24 Python
用Python去除图像的黑色或白色背景实例
2019/12/12 Python
Python中logger日志模块详解
2020/08/04 Python
HTML5+CSS3 诱人的实例:3D立方体旋转动画实例
2016/12/30 HTML / CSS
canvas烟花特效锦集
2018/01/17 HTML / CSS
美国最大的存储市场:SpareFoot
2018/07/23 全球购物
财务专业大学生职业生涯规划范文
2013/12/30 职场文书
护理目标管理责任书
2014/07/25 职场文书
质量主管工作职责
2014/09/26 职场文书
小学教师学习党的群众路线教育实践活动心得体会
2014/10/31 职场文书