光辉飞翔

导航

< 2025年3月 >
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5
统计
 

这两个方法都是form表单中点提交时触发的方法。onsubmit属性就是form标签中的一个方法,需要return的结果,可以是true(缺省值)、false或自定义函数。

在日常的开发中,往往在表单被提交之前需要加上验证(验证日期格式是否正确,验证某个input是否为空…),首先想到的就是 onsubmit事件,在一个submit类型按钮点击时,首先触发的就是form的onsubmit()事件。这时,我们就可以写上自己的验证。代码如下:

<form action="1.asp" method="post" name="form1"  onsubmit=“alert(‘执行了onsubmit事件’);return true;”>     <input type="submit" name="save" value="保存" />   </form>

但是如果我们直接调用form的submit()事件,却不会执行onsubmit(),代码如下:

<form action="1.asp" method="post" name="form1"  onsubmit=“alert(‘执行了onsubmit事件’);return true;”>   ”>     <input type="button" name="save" value="保存" onclick=”this.form.submit();” />  
</form>

我们如果想调用form的onsubmit事件只能通过调用,只有这样,才能执行这个事件:

<form action="1.asp" method="post" name="form1"  onsubmit=“alert(‘执行了onsubmit事件’);return true;”>   ”>     <input type="button" name="save" value="保存" onclick=”this.form.onsubmit();” />  
</form>

但是这样就失去了submit功效。也许我们可以用(attachEvent() / addEventListener() )模拟触发器的方式实现,语法如下(下面部分是转载内容……):

有时候当某一对象的某一事件被触发时,它所要执行的程序可能是一大串,有可能是要呼叫某一函数,也有可能同时又要呼叫另一函数。

document.getElementById("btn").onclick = method1;
document.getElementById("btn").onclick = method2;
document.getElementById("btn").onclick = method3;

如果这样写,那么将会只有medhot3被执行 在IE中使用addachEvent ,

var btn1Obj = document.getElementById("btn1");
//object.attachEvent(event,function);
btn1Obj.attachEvent("onclick",method1);
btn1Obj.attachEvent("onclick",method2);
btn1Obj.attachEvent("onclick",method3);

执行顺序为method3->method2->method1

Mozilla系列中需要使用 addEventListener

var btn1Obj = document.getElementById("btn1");
//element.addEventListener(type,listener,useCapture);
btn1Obj.addEventListener("click",method1,false);
btn1Obj.addEventListener("click",method2,false);
btn1Obj.addEventListener("click",method3,false);
 

执行顺序为method1->method2->method3

 

posted on   光辉飞翔  阅读(1653)  评论(0编辑  收藏  举报
编辑推荐:
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
阅读排行:
· 全网最简单!3分钟用满血DeepSeek R1开发一款AI智能客服,零代码轻松接入微信、公众号、小程
· .NET 10 首个预览版发布,跨平台开发与性能全面提升
· 《HelloGitHub》第 107 期
· 全程使用 AI 从 0 到 1 写了个小工具
· 从文本到图像:SSE 如何助力 AI 内容实时呈现?(Typescript篇)
 
点击右上角即可分享
微信分享提示