javascript事件驱动及事件处理

时间:2022-08-26 16:59:35

1. 常用事件

  常用的javascript事件可以分为鼠标事件、键盘事件、页面相关事件、表单相关事件等事件。

javascript常用事件
事件 事件关联的对象 描述

鼠标键盘事件  

onclick link及所有表单(form)子组件 用户单击鼠标时触发的对象事件
ondbclick link及所有表单子组件 用户双击鼠标时触发的对象事件
onmousedown     document,link及所有表单子组件 用户按下鼠标时触发的对象事件
onmouseup document,link及所有表单子组件 用户鼠标按下后松开鼠标时触发的对象事件
onmouseover document,link及所有表单子组件 当用户鼠标移动到某个对象范围的上方时触发该对象时间
onmousemove document,link及所有表单子组件 用户鼠标移动时触发的对象事件
onmouseout document,link及所有表单子组件 当用户鼠标离开某对象范围时触发的对象事件
onkeypress image,link及所有表单子组件 当用户键盘上某个按键按下并且释放时触发的对象事件
onkeydown image,link及所有表单子组件 当用户键盘上某个按键按下时触发的对象事件
onkeyup image,link及所有表单子组件 当用户键盘上某个按键按下后松开时触发的对象事件
页面相关事件 onabort image 当图形尚未完全加载前,用户就单击了一个超链接,或单击停止按钮时触发的事件
onerror image,window 加载文件或图像发生错误时触发此事件
onload document 页面内容加载完成时触发此事件
onresize window 当浏览器的窗口大小被改变时触发此事件
onunload document 当页面关闭或退出时触发此事件
表单相关事件 onblur window及所有表单子组件 当前对象元素失去焦点时触发此事件
onchange window及所有表单子组件 当前对象元素失去焦点并且元素的内容发送改变时触发此事件
onfocus window及所有表单子组件 当某个对象元素获得焦点时触发此事件
onreset form表单 当表单中Reset的属性被激活时触发此事件
onsubmit form表单 一个表单被提交时触发此事件

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

<html>

<head>
<meta http-equiv="Content-Type" content="text/html"; charset="UTF-8">
<title>事件处理综合示例</title>
</head>
<body>
  <font style="cursor: hand;"
    onclick="location='http://www.baidu.com'"
    onmouseover="status='hello';this.color='red'"
    onmouseout="status='';this.color='blue'">hello</font>
</body>
</html>

2. 事件处理程序

  事件处理程序就是当某个事件发生后,处理事件的程序或函数。

  事件处理过程定义方式:在每一种事件名称前面加上on即可,如:onLoad,onClick。

  调用事件处理程序常见方式有以下两种。

   (1)将事件处理程序视为标记的事件属性的属性值,直接嵌入到html的标记内,例如:

<body onLoad="alert('hello')">

  (2)将事件处理程序视为对象属性的属性值,例如:

<script>

  document.onLoad=alert("hello");

</script>