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>
  • 相关阅读:
    win10使用WampServer部署magento
    JavaScript的this详解
    jQuery的css
    jQuery.cssHooks
    jQuery属性
    jQuery选择器
    ajax中的stasus错误详解
    ajax
    js数组中的注意
    js的严格模式
  • 原文地址:https://www.cnblogs.com/hsl541/p/13209772.html
Copyright © 2011-2022 走看看