js中常用属性备忘
.
onsubmit一般用来做验证的,用来控制表单提交的。
之前使用数据提交基本上使用ajax做数据提交,在数据验证的时候,只有通过数据验证之后,才会post/get数据到对应api文件,但是这次涉及图片上传,只能使用form表单提交,但是这前台js判断的时候出现问题。就是在js验证之后,form表单自动提交。
如何防止表单自动提交?
<form name="form1" onsubmit="return check()" method="post" action="search_result.php">
我先说下onsubmit="return check()"这个是干什么用的,首先是在form标签中有一个onsubmit的属性,他有两个值分别是true和false,如果true,这个网页就跳转到action属性的search_result.php页面,否则不跳转。所以用 return 返回一个true或false的值。
也就是 onsubmit的值可以决定action属性是否触发。
form表单另外一个事件—onclick
<form name="form1" onclick="return check();" method="post" action="search_result.php">
js方法:
function check(){
//判断。。
return false:
}
onclick 和 onsubmit 的区别:
onSubmit 是表单上(也只能是表单)用的,提交表单前会触发。
onClick 是按钮等控件上用的,用来触发点击事件。
用作数据验证的时候,可以选择在 submit 按钮上的 onclick 中验证,可以在 onsubmit 中验证。但是从事件触发顺序上来说,onclick更早。顺序是:
用户点击按钮 -> onclick -> 如果onclick返回有效或未处理 onclick 则提交表单 -> onsubmit -> 如果 onsubmit 未处理或返回true,则提交,否则取消提交。
onsubmit 中返回 false 会引起取消表单提交,onclick 中返回 false 则会引起此次点击操作被判断为无效,则也就不会引起表单提交。
为什么要使用return函数?
表单1:<form name="form1" onsubmit="return check();" method="post" action="search_result.php">
表单2:<form name="form2" onsubmit="check()" method="post" action="search_result.php">
js方法:
function check(){
//判断。。
return false:
}
———————————————————————-
上面两个表单的check方法返回的是false,那么那个表单可以阻止form表单action的自动提交呢?
事实上:只有表单1可以在Ie和火狐下,做到form表单自身的提交
表单2可以在IE下阻止form表单自动提交,但是在火狐下不能阻止from表单的自动提交。
原因:请看ECMAScript Language Binding,其中明确地写着,event listener没有返回值。其实一切的根本都因为IE不支持DOM Level 2,也就是IE和火狐的不兼容,导致的check不能阻止表单提交。
我们可以这样理解:check的返回值是false,那么return check()==return false就是阻止默认事件(也就是onsubmit事件)。而如果只是check()=false也就是 ,而这个false只是在check里面中断对下面的js执行,而不是对这个表单的默认事件进行阻止。
return的作用
在大多数情况下,为事件处理函数返回false,可以防止默认的事件行为
Return True 就相当于执行符
--------------------------------------------------其他事件------------------------------------------------
窗口事件 (Window Events)
仅在 body 和 frameset 元素中有效。
| 属性 | 值 | 描述 |
|---|---|---|
| onload | 脚本 | 当文档被载入时执行脚本 |
| onunload | 脚本 | 当文档被卸下时执行脚本 |
表单元素事件 (Form Element Events)
仅在表单元素中有效。
| 属性 | 值 | 描述 |
|---|---|---|
| onchange | 脚本 | 当元素改变时执行脚本 |
| onsubmit | 脚本 | 当表单被提交时执行脚本 |
| onreset | 脚本 | 当表单被重置时执行脚本 |
| onselect | 脚本 | 当元素被选取时执行脚本 |
| onblur | 脚本 | 当元素失去焦点时执行脚本 |
| onfocus | 脚本 | 当元素获得焦点时执行脚本 |
图像事件 (Image Events)
该属性可用于 img 元素:
| 属性 | 值 | 描述 |
|---|---|---|
| onabort | 脚本 | 当图像加载中断时执行脚本 |
键盘事件 (Keyboard Events)
在下列元素中无效:base、bdo、br、frame、frameset、head、html、iframe、meta、param、script、style 以及 title 元素。
| 属性 | 值 | 描述 |
|---|---|---|
| onkeydown | 脚本 | 当键盘被按下时执行脚本 |
| onkeypress | 脚本 | 当键盘被按下后又松开时执行脚本 |
| onkeyup | 脚本 | 当键盘被松开时执行脚本 |
鼠标事件 (Mouse Events)
在下列元素中无效:base、bdo、br、frame、frameset、head、html、iframe、meta、param、script、style 以及 title 元素。
| 属性 | 值 | 描述 |
|---|---|---|
| onclick | 脚本 | 当鼠标被单击时执行脚本 |
| ondblclick | 脚本 | 当鼠标被双击时执行脚本 |
| onmousedown | 脚本 | 当鼠标按钮被按下时执行脚本 |
| onmousemove | 脚本 | 当鼠标指针移动时执行脚本 |
| onmouseout | 脚本 | 当鼠标指针移出某元素时执行脚本 |
| onmouseover | 脚本 | 当鼠标指针悬停于某元素之上时执行脚本 |
| onmouseup | 脚本 | 当鼠标按钮被松开时执行脚本 |
js中常用属性备忘的更多相关文章
- js中常用的对象—String的属性和方法
今天说一下,js中常用的内置对象——String对象它有以下几个常用的属性:lengthprototype 有以下几个常用的方法:parseInt()转换为数字parseFloat()转换为数字,支持 ...
- js中常用的对象—Array的属性和方法
今天说一下,js中常用的内置对象——Array对象 Array常用属性: length prototype :给系统对象添加属性和方法 Array常用方法: Array.prototype.sum = ...
- 基础篇:1.JavaScript运行在html中,引用有几种方式?—— 6.js中常用的输出方式?
书接上文,上文提到若干条JavaScript的基础性知识,大部分都是一些概念性的东西,本着认真严谨的态度,我们要认真对待,有些条目的问题是某个知识点的周边延伸,为节约篇幅,就一起整理了,如有描述不对的 ...
- Js中常用的字符串,数组,函数扩展
由于最近辞职在家,自己的时间相对多一点.所以就根据prototytpeJS的API,结合自己正在看的司徒大神的<javascript框架设计>,整理了下Js中常用一些字符串,数组,函数扩展 ...
- 零基础学习java------36---------xml,MyBatis,入门程序,CURD练习(#{}和${}区别,模糊查询,添加本地约束文件) 全局配置文件中常用属性 动态Sql(掌握)
一. xml 1. 文档的声明 2. 文档的约束,规定了当前文件中有的标签(属性),并且规定了标签层级关系 其叫html文档而言,语法要求更严格,标签成对出现(不是的话会报错) 3. 作用:数据格式 ...
- js中常用的操作
1.js中常用的数组操作 2.js中常用的字符串操作 3.js中常用的时间日期操作 4.定时器
- C# devExpress BandedGridView属性 备忘
BandedGridView属性备忘 StringBuilder sb = new StringBuilder(); DevExpress.XtraGrid.Views.BandedGrid.Band ...
- metasploit 常用命令备忘
metasploit 常用命令备忘 MSFconsole Commands-------------------------------------24show exploits 查看所有exp ...
- Linux基础之常用基本命令备忘
Linux基础之常用基本命令备忘 PWD 查询当前所在Linux上的位置 / 根目录 CD(change directory)切换目录 语法 CD /(注意添加空格) LS ...
随机推荐
- 使用 gradle 编译多版本 android 应用
最近要做一个 android 产品的变种版本,需要编出不同版本,每个版本有不同的包名.图标等等,和一些特有的逻辑. 很久之前做过类似的工作,当时没有 gradle, 用的方法是把公共代码抽成一个 li ...
- C#插入排序详解
这几天一直在研究算法,也算有点心得,现在跟大家分享一下,我是用C#做的 排序算法是想要成为大虾程序员必须要掌握的技术,它其实也是一种思想,你对算法熟悉,对以后编程有很大帮助 算法思路 ⒈ 从第一个元素 ...
- Designing Evolvable Web API with ASP.NET 随便读,随便记 “The Internet,the World Wide Web,and HTTP”——HTTP
HTTP 我们将只聚焦在于与创建 Web APIs有关的部分. HTTP 是信息系统中的一个应用层协议,是Web的支柱. 其原先由 Berners-Lee, Roy Fielding 和 Henrik ...
- 《Genesis-3D开源游戏引擎完整实例教程-2D射击游戏篇07:全屏炸弹》
7.全屏炸弹 全屏炸弹概述: 为了增设游戏的趣味性,我们制作一个游戏的基本框架以外.还会增设一些其他的额外的功能.比如5秒无敌状态.冰冻效果等.下面咱们以消灭屏幕中所有炸弹为例,看除了碰撞可以触发事件 ...
- [COCOS2D-X]AssetsManager
转自:http://blog.csdn.net/xpwang168/article/details/8900764 资源更新方式分析 I zip整包更新 优点:省流量,速度快 缺点:有重复资源,需要打 ...
- CodeForces 455C Civilization (并查集+树的直径)
Civilization 题目链接: http://acm.hust.edu.cn/vjudge/contest/121334#problem/B Description Andrew plays a ...
- CodeForces 489C Given Length and Sum of Digits... (贪心)
Given Length and Sum of Digits... 题目链接: http://acm.hust.edu.cn/vjudge/contest/121332#problem/F Descr ...
- Jvm基础(2)-Java内存模型
Jvm基础(2)-Java内存模型 主内存和工作内存 Java内存模型包括主内存和工作内存两个部分:主内存用来存储线程之间的共享变量:而工作内存中存储每个线程的相关变量. 如下图所示: 需要注意的是: ...
- JS escape、encodeURI 、encodeURIComponent 编码与解码[转]
转至:http://jc-dreaming.iteye.com/blog/1702407 本文讨论如何对传递参数用JS编码与解码 1:编码与解码方法的对应关系 escape ------------- ...
- .net版本之间的关系
net framework 2.0,3.0与3.5三个版本之间关系如下: .net framework 2.0 = CLR 2.0 + FCL(framework class library) .ne ...