表单元素的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 hashtable实现代码
Oct 13 Javascript
jsPDF生成pdf后在网页展示实例
Jan 16 Javascript
JavaScript实现16进制颜色值转RGB的方法
Feb 09 Javascript
基于Marquee.js插件实现的跑马灯效果示例
Jan 25 Javascript
jQuery使用JSONP实现跨域获取数据的三种方法详解
May 04 jQuery
Vue.js中组件中的slot实例详解
Jul 17 Javascript
Vue的Flux框架之Vuex状态管理器
Jul 30 Javascript
angular中不同的组件间传值与通信的方法
Nov 04 Javascript
JS实现点击复选框变更DIV显示状态的示例代码
Dec 18 Javascript
JavaScript执行环境及作用域链实例分析
Aug 01 Javascript
vue 父组件通过v-model接收子组件的值的代码
Oct 27 Javascript
使用JavaScript实现贪吃蛇游戏
Sep 29 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
杏林同学录(一)
2006/10/09 PHP
PHP获取网站域名和地址的代码
2008/08/17 PHP
php截取字符串并保留完整xml标签的函数代码
2013/02/06 PHP
php图像处理类实例
2015/07/28 PHP
Thinkphp单字母函数使用指南
2016/05/08 PHP
php回调函数处理数组操作示例
2020/04/13 PHP
js String对象中常用方法小结(字符串操作)
2012/01/27 Javascript
JavaScript中全选、全不选、反选、无刷新删除、批量删除、即点即改入库(在yii框架中操作)的代码分享
2016/11/01 Javascript
从零开始学习搭建React脚手架项目
2018/08/23 Javascript
从零开始在NPM上发布一个Vue组件的方法步骤
2018/12/20 Javascript
JavaScript类型相关的常用操作总结
2019/02/14 Javascript
简单了解vue中父子组件如何相互传递值(基础向)
2019/07/12 Javascript
js 实现watch监听数据变化的代码
2019/10/13 Javascript
Vue单页面应用中实现Markdown渲染
2021/02/14 Vue.js
python插入数据到列表的方法
2015/04/30 Python
python pandas修改列属性的方法详解
2018/06/09 Python
Python通过调用有道翻译api实现翻译功能示例
2018/07/19 Python
Pytorch的mean和std调查实例
2020/01/02 Python
浅谈ROC曲线的最佳阈值如何选取
2020/02/28 Python
基于Python编写一个计算器程序,实现简单的加减乘除和取余二元运算
2020/08/05 Python
Python实现迪杰斯特拉算法过程解析
2020/09/18 Python
详解Python中@staticmethod和@classmethod区别及使用示例代码
2020/12/14 Python
HTML5在微信内置浏览器下右上角菜单的调整字体导致页面显示错乱的问题
2021/01/19 HTML / CSS
世界上最大的二手相机店:KEN
2017/05/17 全球购物
印尼在线购买隐形眼镜网站:Lensza.co.id
2019/04/27 全球购物
Pretty You London官网:英国拖鞋和睡衣品牌
2019/05/08 全球购物
荷兰美妆护肤品海淘网站:Beautinow(中文)
2020/11/22 全球购物
学习党的群众路线教育实践活动剖析材料
2014/10/13 职场文书
小学音乐教师个人工作总结
2015/02/05 职场文书
酒店客房服务员岗位职责
2015/04/09 职场文书
倡议书范文大全
2015/04/28 职场文书
结婚当天新郎保证书
2015/05/08 职场文书
社区安全温馨提示语
2015/07/14 职场文书
观看《信仰》心得体会
2016/01/15 职场文书
Sleuth+logback 设置traceid 及自定义信息方式
2021/07/26 Java/Android
MySQL连接控制插件介绍
2021/09/25 MySQL