JavaScript是基于事件驱动的编程模型，当网页页面发生某种形式的交互操作或者变化时就会产生事件。举个简单的例子：用户在网页页面点击鼠标按键就会产生一个点击事件。鼠标移动则会产生鼠标移动的事件。因此事件对于JavaScript客户端脚本语言至关重要，在JavaScript编程模型中事件是实现一切前端交互操作的基础与依据。事件的学习、理解与使用成为JavaScript编程学习的重点与难点。本文主要介绍部分常用事件及事件处理。

event事件

1、事件的类型与事件处理

在面向对象程序设计语言中，事件是依附于对象的。不同的对象具有不同类型的事件类型及事件处理的方法。JavaScript中一个事件主要由事件对象、事件类型与事件处理三部分所组成。JavaScript常用事件类型主要包括键盘事件、鼠标与滚轮事件、页面事件、表单事件、设备事件等。在页面运行过程中，JavaScript通过事件类型，检测发生的事件，并对事件进行处理。事件处理程序响应事件、处理时间需要按照一定的顺序执行，事件顺序主要包括事件捕获与时间冒泡两种类型。其中事件捕获从HTML最外层开始处理事件，直到底层元素事件的处理完成。事件冒泡则与事件捕获相反，从子元素开始响应事件。在默认情况下消息响应都是从子元素开始的。

冒泡处理实例

冒泡处理实例如上图，div元素嵌套，将两个div分为父元素与子元素，同样定义onclick单击事件，首先响应的是内层子元素。

2、事件的绑定

除直接在对HTML元素直接定义事件属性之外，还可以通过事件绑定形式实现事件的注册、绑定与监听。通过调用DOM文档对象模型提供的addEventListener()方法实现为网页页面元素添加事件，该函数的原型描述如下：

addEventListenser(type,listener [，options ])type:事件类型listener:事件处理函数名称options: bool类型，事件处理方式，捕获、冒泡

通过对DOM对象进行事件绑定就可以响应制定的消息，但需注意，页面元素能够响应的事件类型。事件绑定实例描述如下：

事件监听与处理

事件绑定实例如上图所示，我们给id为test的div元素绑定了click事件，并用myfun函数对事件进行处理。其中事件类型是需要编写者注意的问题，这些事件类型是定义好的，我们只需要选择即可，例如鼠标事件的定义如下表所示：

鼠标事件类型

除以上事件绑定之外，还可以通过以下简单形式绑定事件，如上例题事件可通过一下语句定义：

事件绑定的简单形式

3、事件的解除

通常情况下事件的绑定执行之后是不会移除事件的，但如果需要解除事件的绑定，则可以通过removeEventListener()方法或者对绑定事件的DOM对象对应时间名赋值为null实现事件的解除。实际案例如下所示：

事件移除操作

4、event对象

event对象是JavaScript语言中重要的对象之一，用于存储记录交互响应实现相关基本信息，event对象主要存储信息包括事件类型、事件对应的按键信息及事件发生相关坐标信息等。event对象是其他各类事件的父类，其他事件对象均为该类的子类。event对象会在事件调用过程中以隐藏的形式进行参数的传递。event事件使用描述如下图：

event事件使用实例

以上给出了JavaScript中的事件基本概念及案例分析，如有问题可在评论区讨论。本头条号长期关注编程资讯分享；编程课程、素材、代码分享及编程培训。如果您对以上方面有兴趣或代码错误、建议与意见，可以联系作者，共同探讨。期待大家关注！相关文章链接如下：

前端开发-JavaScript初学者练习题及参考答案

前端开发-CSS3动画实现焦点(图文轮播)图效果

前端开发-JavaScript DOM动态生成文本框

前端设计-教你如何快速绘制HTML5动画

前端设计-响应式页面开发基础

前端设计-Ajax技术及实例展示