首页 > Web开发 > 详细

js中常用属性备忘

时间:2014-06-10 16:07:12      阅读:438      评论:0      收藏:0      [点我收藏+]

.

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中常用属性备忘,布布扣,bubuko.com

js中常用属性备忘

原文:http://www.cnblogs.com/hechunhua/p/3779404.html

踩
(0)
赞
(0)
   
举报
评论 一句话评论(0)
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!