事件和事件句柄的理解
- 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>
