事件和事件句柄的理解
- 2020 年 6 月 29 日
- 筆記
- javascript基礎
事件和事件句柄的理解
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>