• submit() 和 onsubmit()


    在日常的开发中,往往在表单被提交之前需要加上验证(验证日期格式是否正确,验证某个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
    看看gmail的代码
    var Ka=navigator.userAgent.toLowerCase();
    var rt=Ka.indexOf("opera")!=-1;
    var r=Ka.indexOf("msie")!=-1&&(document.all&&!rt);
    function Zl(a,b,c){if(r){a.attachEvent("on"+b,c)}else{a.addEventListener(b,c,false)}}

  • 相关阅读:
    Vue-router路由传参三种方法及区别
    Vue.mixins混入方法的使用
    移动端自适应方案—rem布局
    JS获取页面宽度高度及Vue页面自适应方案
    Vue实现文件的上传与下载
    Prometheus第六篇:prometheus高可用架构
    Prometheus第五篇:prometheus告警规则配置和通过alertmanager精准发送告警
    Prometheus第四篇:prometheus服务发现方式解析
    Prometheus第三篇:prometheus.yml配置解析
    Prometheus第二篇:Prometheus部署
  • 原文地址:https://www.cnblogs.com/shelley/p/1499904.html
Copyright © 2020-2023  润新知