JavaScript事件处理

发布时间：2024-04-12 09:30:01

!DOCT YPE html>

JS 事件（event）是当用户与网页进行交互时发生的事情，例如单机某个链接或按钮、在文本框中输入文本、按下键盘上的某个按键、移动鼠标等等。当事件发生时，您可以使用 JavaScript 中的事件处理程序（也可称为事件监听器）来检测并执行某些特定的程序。

一般情况下事件的名称都是以单词on开头的，例如点击事件 onclick、页面加载事件 onload 等。下表中列举了一些 JavaScript 中常用的事件：

事件		描述
鼠标、键盘事件	onclick	点击鼠标时触发此事件
	ondblclick	双击鼠标时触发此事件
	onmousedown	按下鼠标时触发此事件
	onmouseup	鼠标按下后又松开时触发此事件
	onmouseover	当鼠标移动到某个元素上方时触发此事件
	onmousemove	移动鼠标时触发此事件
	onmouseout	当鼠标离开某个元素范围时触发此事件
	onkeypress	当按下并松开键盘上的某个键时触发此事件
	onkeydown	当按下键盘上的某个按键时触发此事件
	onkeyup	当放开键盘上的某个按键时触发此事件
窗口事件	onabort	图片在下载过程中被用户中断时触发此事件
	onbeforeunload	当前页面的内容将要被改变时触发此事件
	onerror	出现错误时触发此事件
	onload	页面内容加载完成时触发此事件
	onmove	当移动浏览器的窗口时触发此事件
	onresize	当改变浏览器的窗口大小时触发此事件
	onscroll	当滚动浏览器的滚动条时触发此事件
	onstop	当按下浏览器的停止按钮或者正在下载的文件被中断时触发此事件
	oncontextmenu	当弹出右键上下文菜单时触发此事件
	onunload	改变当前页面时触发此事件
表单事件	onblur	当前元素失去焦点时触发此事件
	onchange	当前元素失去焦点并且元素的内容发生改变时触发此事件
	onfocus	当某个元素获得焦点时触发此事件
	onreset	当点击表单中的重置按钮时触发此事件
	onsubmit	当提交表单时触发此事件

事件绑定

事件只有与 HTML 元素绑定之后才能被触发，为 HTML 元素绑定事件处理程序的方法由很多，最简单的就是通过 HTML 事件属性来直接绑定事件处理程序，例如 onclick、onmouseover、onmouseout 等属性。

以 onclick 属性为例，通过该属性我们可以为指定的 HTML 元素定义鼠标点击事件（即在该元素上单击鼠标左键时触发的事件），示例代码如下：

    
    JavaScript

除了上述方法外，我们也可以直接使用 JavaScript 中提供的内置函数来为指定元素绑定事件处理程序，如下例所示：




    
    JavaScript

JS 事件示例

一般情况下，事件可以分为四大类——鼠标事件、键盘事件、表单事件和窗口事件，另外还有一些其它事件。下面通过几个示例来简单介绍一些比较常用的事件。

1) onmouseover 事件

onmouseover 事件就是指当用户鼠标指针移动到元素上时触发的事件，示例代码如下：




    
    JavaScript


    

    请将鼠标移动至此处

2) onmouseout 事件

onmouseout 事件与 onmouseover 事件正好相反，onmouseout 事件会在鼠标从元素上离开时触发，示例代码如下：




    
    JavaScript

3) onkeydown 事件

onkeydown 事件是指当用户按下键盘上的某个按键时触发的事件，示例代码如下：




    
    JavaScript

4) onkeyup 事件

onkeyup 事件是指当用户按下键盘上的某个按键并将其释放（即按下并松开某个按键）时触发的事件，示例代码如下：




    
    JavaScript