zoukankan      html  css  js  c++  java
  • 事件和事件句柄的理解

    事件和事件句柄的理解

    1.事件就是事件方法,就是能够起到相应的效果,事件方法让事件句柄去调用才会起到效果,把事件方法当做函数给事件句柄是会被当成一个普通的函数,这样就失去了事件方法本身存在的意义

    举例:

    1.我想要单击提交表单按钮的时候完成对表单的提交,用onclick="submit()",这样写submit为一个普通的函数,不是事件方法,

    用onclick="Submit1()"然后 在 function  Submt1(){this.submit();}在单击提交的时候进行表单提交。

    2.其实事件句柄是在用户对页面做某个行为的时候才会被触发,比如鼠标移动,单击等都是会触发相应的事件句柄,而事件句柄的值是js代码或者是函数,在函数里面放的是执行的代码,这里强调一下,函数名不要和事件,事件句柄名相同,事件方法不要当成事件句柄的值。事件方法是需要通过事件句柄来调用的,比如上面提到的submit()事件方法。

    3.有的事件方法是作为元素类型存在,在使用的时候就会直接出发事件方法,不需要事件句柄来调用。

    比如:<input type="submit"  value="提交表单"/> //是提交的时候会执行事件方法submit

               <input type="button" onclick="Submit1()" />//通过单击事件句柄onclick来调用函数,在函数里面使用事件方法

                function   Submit1(){this.submit();}

    this指的是这个函数被调用的事件句柄所对应的元素,this是元素

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title></title>
        </head>
        <body>
            
            <p>直接使用事件方法来提交表单,用事件句柄调用函数,在函数里面写事件方法</p>
            <form action="adress" target="_blank" id="id1" name="name1">
                账号<input type="text" /><br />
                密码<input type="text" /><br />
                
                <input type="button"  value="提交表单" onclick="submit1()"/>
                <input type="button"  value="重置表单" onclick="reset1()" />
            </form>
            <script type="text/javascript">
                function submit()
                {document.forms[0].elements[0].submit();//这样写也是元素,相当于this
                
                }
                function reset()
                {
                    this.reset();
                    
                }
                
                
                
                
                
                
            </script>
        </body>
    </html>

    上面代码是通过事件句柄来调用事件方法的,单击提交按钮和重置按钮来完成对表单的提交和重置

    下面是直接用事件当做类型完成表单的提交的

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
        </head>
        <body>
            <form action="adress" >
                账号<input type="text" /><br />
                密码<input type="text" /><br />
                <input type="submit" />
                <input type="reset" />
                
                
            </form>
        </body>
    </html>
  • 相关阅读:
    redis发布订阅
    redis学习笔记(面试题)
    redis安全 (error) NOAUTH Authentication required
    HDU3001 Travelling —— 状压DP(三进制)
    POJ3616 Milking Time —— DP
    POJ3186 Treats for the Cows —— DP
    HDU1074 Doing Homework —— 状压DP
    POJ1661 Help Jimmy —— DP
    HDU1260 Tickets —— DP
    HDU1176 免费馅饼 —— DP
  • 原文地址:https://www.cnblogs.com/hsl541/p/13209772.html
Copyright © 2011-2022 走看看