(转)表单的onsubmit,onclick事件和javascript的return

标签: onsubmit onclick 事件 | 发表时间:2013-12-13 16:27 | 作者:sangei
出处:http://www.iteye.com

今天做一个表单提交验证的工作,做到其中一段时,我想提交表单时,先验证是否填写了姓名,如果没填写,右侧显示出提示信息,并取消提交,如果已填写,则正常提交。

初步想法,想自己写个 js 函数,在提交按钮处用 onclick 事件,判断填写了则用js提交表单,没填写则蹦出提示信息,但基本上实现了半天,达不到我想要的结果,最后才发现原来有 onsubmit 这个属性,它写在 form 标签里。

onclick 和 onsubmit 的区别:

  • onSubmit 是表单上(也只能是表单)用的,提交表单前会触发。
  • onClick 是按钮等控件上用的,用来触发点击事件。

用作数据验证的时候,可以选择在 submit 按钮上的 onclick 中验证,可以在 onsubmit 中验证。但是从事件触发顺序上来说,onclick更早。顺序是:

用户点击按钮 -> onclick -> 如果onclick返回有效或未处理 onclick 则提交表单 -> onsubmit -> 如果 onsubmit 未处理或返回true,则提交,否则取消提交。

onsubmit 中返回 false 会引起取消表单提交,onclick 中返回 false 则会引起此次点击操作被判断为无效,则也就不会引起表单提交。

1 < a href = "somewhere.html" onClick = "doSomething()" >

在上面的例子中,doSomething()会首先执行,然后浏览器会打开链接(默认动作)。

事件处理程序可以返回一个布尔值(ture或者false),false的含义就是“不要进行默认动作”。

1 < a href = "somewhere.html" onClick = "doSomething(); return false" >

这个链接就不会跟着执行了。这个函数执行之后程序返回false,告诉浏览器不要执行默认动作。

有时候有必要让函数决定什么时候该执行什么时候不该执行默认动作。所以我们可以把例子改成:

1 <a href= "somewhere.html" onClick= "return doSomething()" >
2 function doSomething()
3 {
4      return confirm( 'Do you really want to follow this link?' )
5 }

这就是(非常简单的)用户交互。用户会被问一个问题,如果回答是肯定的那么函数返回 true,如果取消了那么久返回一个 false。这个返回值会被事件处理程序捕获,然后转给事件本身。如果是 flase 那么默认动作就不会被执行——链接不会进入。

然而,不是所有的默认动作都能被阻止。比如 unload 事件就不行。假设用户关闭浏览器窗口——触发了 unload 事件。如果你能阻止关闭窗口,那么窗口会违背用户的意愿而一直打开着么? 用微软的 beforeunload 属性来阻止 unload。

返回 false 来阻止默认动作是所有浏览器都支持的这是事件处理程序的基本组成。如今的事件处理程序模型还添加了一些新的方法来阻止默认动作:

  • W3C 给事件添加了 preventDefalut() 方法。如果你引用了这个方法那么默认动作就会被阻止。
  • 微软给事件添加了 returnValue 属性。如果你设置他的值为 false 那么默认动作也会被阻止。

但是用不着这些个,简单的返回 false 就够了。



已有 0 人发表留言,猛击->> 这里<<-参与讨论


ITeye推荐



相关 [onsubmit onclick 事件] 推荐:

(转)表单的onsubmit,onclick事件和javascript的return

- - JavaScript - Web前端 - ITeye博客
今天做一个表单提交验证的工作,做到其中一段时,我想提交表单时,先验证是否填写了姓名,如果没填写,右侧显示出提示信息,并取消提交,如果已填写,则正常提交. 初步想法,想自己写个 js 函数,在提交按钮处用 onclick 事件,判断填写了则用js提交表单,没填写则蹦出提示信息,但基本上实现了半天,达不到我想要的结果,最后才发现原来有 onsubmit 这个属性,它写在 form 标签里.

超链<a>标签响应onclick事件时,防止页面跳动方法

- - BlogJava-首页技术区

Android 中 onTouch 和OnClick 冲突的处理

- - CSDN博客推荐文章
在Android中,对一个View同时调用OnTouch事件和OnClick事件时,导致事件冲突,比如onClick事件打算执行A动作,OnTouch事件. 打算执行B动作,但是在实际使用时会发现,当调用OnTouch时,有可能会同时执行A,B两个动作,这是因为OnClick事件本身就是在. OnTouch事件中发生的;.

backbone 之事件(events)

- - 博客园_首页
  最近用 backbone 做了一个项目,加深了对前端mvc理解. 一定要应用的熟练后,了解其思想后,再去阅读源码. 想写写自己对backbone的感悟. 接下来第一步就是backbone的event.   backbone的event 是其核心.  当我们user调用create 就会触发change事件.

测试touch事件

- - Kejun's Blog
进入触屏时代意味一切要对触屏友好. 今天仅仅测试了ios6,其它版本包括android还不清楚差别有多大. 看了PPK的touch兼容表(http://www.quirksmode.org/mobile/tableTouch.html),深感刚准备告别ie6,又迎来了一个新的混乱时代,苦逼的前端工程师们永远摆脱不了兼容的魔咒.

Jquery手动触发事件

- - 博客园_首页
    废话不多说,直接贴代码:.     如果想触发一个id为input的文本框的blur事件,则可以这样写:.     相类似,如果想调用input的click事件,则可以这样写:.

js中的事件委托

- - JavaScript - Web前端 - ITeye博客
1,什么是事件委托:通俗的讲,事件就是onclick,onmouseover,onmouseout,等就是事件,委托呢,就是让别人来做,这个事件本来是加在某些元素上的,然而你却加到别人身上来做,完成这个事件. 也就是:利用冒泡的原理,把事件加到父级上,触发执行效果. 我们可以看一个例子:需要触发每个li来改变他们的背景颜色.

JavaScript与HTML交互——事件

- - 博客园_首页
JavaScript和HTML的交互是通过事件实现的. JavaScript采用异步事件驱动编程模型,当文档、浏览器、元素或与之相关对象发生特定事情时,浏览器会产生事件. 如果JavaScript关注特定类型事件,那么它可以注册当这类事件发生时要调用的句柄. 事件流描述的是从页面中接收事件的顺序,比如有两个嵌套的div,点击了内层的div,这时候是内层的div先出发click事件还是外层先触发.

jQuery事件编写进阶

- - 阿里巴巴(中国站)用户体验设计部博客
jQuery 事件编程进阶. 事件委托,是一种优化DOM元素事件绑定的技巧,利用事件冒泡的原理,通过绑定事件到父元素,检查event触发元素的target,最终执行相应的事件函数处理,它的几个好处一般前端开发程序员都知道. 在jQuery中,一般是delegate()方法和.live()方法,但是,如何选择事件委托的方法,或者在什么情况下用.live(),什么情况下用.delegate(),这个值得讲一讲:.

JS动态添加事件

- - CSDN博客推荐文章
方法一、setAttribute. obj.setAttribute("onclick", "javascript:alert('测试');");. 但是IE不支持用 setAttribute 设置某些属性,包括对象属性、集合属性、 事件属性,也就是说用 setAttribute 设置 style、onclick、onmouseover 这些属性在 IE 中是行不通的.