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