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 脚本 当鼠标按钮被松开时执行脚本

时间: 2025-01-13 19:12:36

js中常用属性备忘的相关文章

项目中oracle存储过程记录——常用语法备忘

项目中oracle存储过程记录--常用语法备忘 项目中需要写一个oracle存储过程,需求是收集一个复杂查询的内容(涉及到多张表),然后把符合条件的记录插入到目标表中.其中原表之一的日期字段是timestamp类型,目标表的字段是varchar2类型: 其中一些内容很常用,所以做下记录,供查找. 1.存储过程的格式 oracle存储过程和函数都可以实现,一般没有返回值,则采用存储过程,函数比sqlserver的功能强大.oracle变量定义最好加上前缀如V_,查询条件中变量名称和字段名称不能重复

linux下常用命令备忘

转自:Linux 命令集锦 linux下查看监听端口对应的进程 # lsof -i:9000 # lsof -Pnl +M -i4 如果退格键变成了:"^h". 终端连接unix删除退格键,按住CTL键同时按delete Linux搜索 # find / -name "xxx.conf" 查看linux是32位还是64位的命令 #file /sbin/init #getconf LONG_BIT #getconf -a 在Linux和Windows下都可以用nslo

Notepad++ 常用快捷键 (备忘)

最近在学习Lua,用Notepad++ 作为编译器. 今早无意间按下 Ctrl+D ,结果就神奇般的复制并粘贴当行了,突然觉得Notepad++ 这东西很神奇. 网上查找了Notepad++的快捷键,尝试 Ctrl+Q 的时候,小有感慨,这丫太神奇了. 现将Notepad++快捷键做简单记录,备忘用. Ctrl+D    复制并粘贴当行 Ctrl+L     删除当前行 Ctrl+T    上下行交换 Ctrl+W   关闭当前文档 Ctrl+Q    注释/取消注释 Ctrl+Tab    

Js中常用的字符串,数组,函数扩展

由于最近辞职在家,自己的时间相对多一点.所以就根据prototytpeJS的API,结合自己正在看的司徒大神的<javascript框架设计>,整理了下Js中常用一些字符串,数组,函数扩展,一来可以练练手,二来也锻炼下自己的代码能力.由于代码里面的注释自认为已经非常详细,所以就直接贴代码了. 1. 字符串扩展: ;(function() { var method, stringExtends = { /** * 删除字符串开始和结尾的空白 * @returns {string} */ stri

图解js中常用的判断浏览器窗体、用户屏幕可视区域大小位置的方法

有时我们需要获得浏览器窗口或屏幕的大小.窗口下拉框下拉的距离等数据,对应这些需求,js中提供了不少解决方法,只是数量稍多容易混淆它们各自的意义,下面咱们用图例来解释下12个常见对象属性的作用. 其中有6个常用的浏览器窗体属性(由于offsetWidth/Height在不同浏览器下表现有出入,故不在本章讨论): document.documentElement.clientWidth document.documentElement.clientHeight document.documentEl

Postgresql,常用sql备忘

1.查看所有表的名称 Postgresql,greeplum,如果数据库在几千里以外,数据量巨大,网速不好,使用pgadmin客户端,那么你大部分时间都要浪费在等在中... 使用pgadmin的query是个不错的选择,但是,怎么才能知道表名呢,这丫真没mysql好用—— SELECT tablename FROM pg_tables where tablename not like 'gp%' and tablename not like 'gp%' and tablename not lik

js字符串常用属性和方法

字符串声明: var str1 = new String(“abcdefgabc”);      //这是一个“字符串对象” var str2 = “abcdefgabc”;                            //这个字符串跟前面str1几乎没有区别 str.length——获得一个字符串的长度(也就是字符个数) 字符串对象的方法: str1.charAt( n );       ——获得字符串str1中位置为n的那个字符(字符的位置也是从0开始算起)var s1 = str

基础篇:1.JavaScript运行在html中,引用有几种方式?—— 6.js中常用的输出方式?

书接上文,上文提到若干条JavaScript的基础性知识,大部分都是一些概念性的东西,本着认真严谨的态度,我们要认真对待,有些条目的问题是某个知识点的周边延伸,为节约篇幅,就一起整理了,如有描述不对的地方或者是描述不足的地方,望大家批评指正,下面是我给我”参考答案“,也只是仅供参考: 1.JavaScript运行在html中,引用有几种方式? 我知道的方法有3种: 第一种:外部引用远程JavaScript文件,如<script type="text/javascript" src

linux学习与实践(4)--常用命令备忘

1.查看程序对应进程号: ps –ef|grep 进程名 2.Linux下查看端口号所使用的进程号: 使用lsof命令: lsof –i:端口号 linux学习与实践(4)--常用命令备忘,布布扣,bubuko.com