JavaScript学习——事件处理程序
一,什么是事件?
事件就是用户或者浏览器自身执行的某种动作。如点击(click),加载,鼠标经过。
二,什么是事件处理程序?
响应某个事件的就是事件处理程序。
三,HTML事件处理程序?
一个元素支持的每一个事件都可以使用一个与相应事件处理程序同名的特性来指定,这个特性的值就是能够执行的Javascript代码。如下:
<!DOCTYPE html> <html> <head> <title> 测试 </title> <script> function showMessage() { alert("hello world"); } </script> </head> <body> <input type="button" value="CLick me" onclick="showMessage()" /> </body> </html>
这样创建事件处理程序会创建一个封装着元素属性的函数,这个函数中有一个局部变量event,也就是事件对象,把上述代码改为下:
<input type="button" value="CLick me" onclick="alert(event.type)" /> //会输出这个事件的类型click
通过这个event对象,可以直接访问事件对象,不用自己定义它。
在函数中,this是指承受事件的Dom元素,如下:
<input type="button" value="CLick me" onclick="alert(this.value)" /> //会输出Click me
在HTML中指定事件处理程序的缺点:
(1)时差问题:
用户可能在HTML元素一出现就触发了事件处理,但是当时的事件处理程序可能还没有具备执行的条件,例如上面的例子中,如果事件
处理程序是在input元素下方定义的,那么用户 在解析函数之前就点击了按钮,就会引发错误,
因此很多的Html处理程序都封装在一个try catch快里,如下:
<input type="button" value="CLick me" onclick="try{show();}carch(ex){};}" /> 这样,如果在函数解析前就触发了事件,用户也不会看到错误。