事件和事件句柄的理解

事件和事件句柄的理解

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>