事件和事件句柄的理解

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>

posted @ 2020-06-29 19:08 正好00 阅读(1376) 评论(0) 编辑收藏举报

刷新页面返回顶部

正好00

事件和事件句柄的理解

公告