Javascript事件机制

在基于Javascript的网页设计中,当页面中的某些元素发生了某些事情的时候,Web 浏览器就会产生一个事件(event)。如在页面里面的按钮,点击之后浏览器会产生一个事件。事件可以是用户在某些内容上的点击,如某个Web页面加载完成、用户滚动窗口或改变窗口大小。Javascript会为特定文档元素的特定类型的事件注册一个事件处理程序(event handler),也就是一个Javascript函数或者一段代码。浏览器会监听事件的发生,一旦发生特定事件,浏览器就会调用该函数或者该代码。简而言之,事件机制就是通过特定的注册机制,将函数绑定到特定元素的某个事件,在满足一定条件的时候该函数被触发,从而事件特定的功能。通过Javascript这种事件处理机制,可以方便地设计一些自定义的行为,从而增加网页的交互并丰富网页的内容。


常用的事件函数

用于响应某个事件而被调用的函数称为事件函数。每一个事件均对应一个事件函数,在程序执行时,将相应的函数或语句指定给事件函数,则在该事件发生时,浏览器便执行指定的函数或语句,从而实现网页内容与用户操作的交互。
常用的事件函数:鼠标 、键盘操作、页面加载、表单提交、获得或失去焦点等。


常用的鼠标事件:

onclick ——鼠标单击事件,多用在某个对象控制范围内的鼠标单击
onDblClick ——鼠标双击事件
onMouseDown ——鼠标上的按钮被按下了
onMouseUp ——鼠标按钮被按下后,松开时激发的事件
onMouseOver ——当鼠标指针移动到某对象范围的上方时触发的事件
onMouseMove ——鼠标移动时触发的事件
onMouseOut ——当鼠标指针离开某对象范围时触发的事件


常用的键盘操作事件:

onKeyPress ——当键盘上的某个按键被按下并且释放时出发的事件
onKeyDown ——当键盘上的某个按键被按下时触发的事件
onKeyUp ——当键盘上的某个按键被按下后再放开时触发的事件


其他事件:
页面加载、表单提交、焦点触发等事件。

onAbort ——图片在下载时被用户中断
onBeforeUnload ——当前页面的内容将要被改变时触发的事件
onError ——捕捉当前页面因为某种原因而出现的错误,如脚本错误与外部数据引用的错误
onLoad ——页面内容完成传送到浏览器时触发的事件,包括外部文件引入完成
onMove ——浏览器的窗口被移动时触发的事件
onResize ——当浏览器的窗口大小被改变时触发的事件
onScroll ——浏览器的滚动条位置发生变化时触发的事件
onStop ——浏览器的停止按钮被按下或者正在下载的文件被中断时触发的事件
onUnload ——当前页面将被改变时触发的事件
onBulr ——当前元素失去焦点时触发的 事件(鼠标与键盘的触发均可)
onChange ——当前元素失去焦点并且元素的内容发生改变时触发的事件(鼠标与键盘的触发均可)
onFoucus ——当某个元素获得焦点时触发的事件
onReset ——当表单中RESET的属性被激发时触发的事件
onSubmit ——一个表单被提交时触发的事件


技巧:
事件处理步骤:

(1)首先需要确定事件的源,要选择实现起来最方便的源。如点击按钮事件,可以通过鼠标点击事件来捕捉,但最方便的还是普通元素的onclick事件。
(2)了解事件提供的信息,并构思程序。
(3)熟悉事件,有助于设计出更炫的事件响应程序。

原文地址:https://www.cnblogs.com/aixing/p/13327799.html