文章目录

• • 事件与事件流
  • 事件监听（绑定事件方法）
  • JavaScript事件
  • • 鼠标事件
    • 表单事件
    • 键盘事件
    • UI事件
  • 快速投票

  事件可以说是JavaScript最引人注目的特性，因为它提供了一个平台，让用户不仅能浏览页面中的内容，而且能跟页面进行交互。

  本文将围绕JavaScript事件进行讲解，通过重案例代码和轻知识理论结合的方式带您简单的学会JavaScript事件的编写。

事件与事件流

1、事件

  事件是文档或者浏览器窗口发生的，特定的交互瞬间。事件是发生在HTML元素上的某些特定的事情，它的作用是使用页面具有某些行为，并执行某些动作。
  类比生活中的例子，学生听到上课铃响，就会走进教室。这里上课铃响相当于事件，走进教室相当于响应事件的动作。在一个网页中，已经预先定义好了很多事案件，开发人员可以编写相应的事件处理程序来响应相应的时间。
事件可以是浏览器行为，也可以是用户行为。例如下面3个行为都是事件。

• 一个页面完成加载。
• 某个按钮被单击。
• 鼠标指针移动到某个元素上面。

2、事件流

  了解了事件的概念之后，还需要了解事件流的概念。由于DOM是树状结构，因此当某个子元素被单击时，它的父元素实际上也被单击了，它的的父元素的父元素也被单击了，一直到根元素。因此鼠标单击产生的并不是一个事件，而是一系列事件，这一系列事件就组成了事件流。
  一般情况下，当某个事件发生的时候，实际上都会产生一个事件流。而我们并不需要对事件流中的所有事件都编写处理程序，而只需要对我们关心的那一个事件编写程序进行处理就可以了。

  既然事件发生时总是以流的形式一次发生，那么就要分个先后循序。如上图所示，产生事件流的过程可以分为3个阶段：从最外层的根元素HTML开始依次向下，称为捕获阶段；到达目标元素p时，称为到达阶段；最后依次向上回到根元素，称为冒泡阶段。
  DOM轨发中规定，捕获阶段不会命中事件，如果需要的话，每个对象在捕获阶段和冒泡阶段都可以获得一次处理事件的机会。

事件监听（绑定事件方法）

  页面中的事件都需要一个函数来响应，这类函数通常被称为事件处理函数。从另外一个角度来说，这类函数时时都在监听是否有事件发生，因此它们又被称为事件监听函数。下面将介绍三种绑定事件方法。

1、简单的行内写法

  通常对于简单的事件，没必要编写大量复杂的代码，在HTML的标签中就可以直接定义事件处理函数，而且通常它们的兼容性很好。

案例代码：

btn

这种写法虽然方便，但是有两个缺点：

• 如果有多个元素需要有相同的事件处理方式，则需要为每个元素单独写事件监听函数，这样很不方便；
• 这种方式不符合结构与行为分离的指导思想。

2、使用 HTML DOM 来分配事件

  HTML DOM 允许您使用 JavaScript 来向 HTML 元素分配事件。

案例代码：

btn

3、设置事件监听函数

  标准DOM定义了两个方法用于添加和删除事件监听函数，即addEventListener()和removeEventListener()。

案例代码：

btn

  在通常情况下，我们都使用默认事件冒泡机制。因此，如果一个容器元素里面 有多个同类子元素，而且要给这些子元素绑定同一个事件监听函数，则通常有两种方法：

• 选出所有的子元素，然后分别给他们绑定事件监听函数；
• 把事件监听函数绑定到容器元素上，然后在函数内部过滤出需要的子元素，最后进行处理。

总结一下，事件监听函数的格式是：
  [object].addEventListener(“event_name”,fnHandler,bCapture);

相应地，removeEventListener()方法用于移除某个事件监听函数。

案例代码：

 div 元素添加了 onmousemove 事件句柄，鼠标在桔红色的框内移动时会显示随机数。
点击按钮移除 DIV 的事件句柄。
点我

运行效果：

JavaScript事件

常见的JavaScript事件有四种：

• 鼠标事件： 使用鼠标指针在页面上执行某些操作时所触发的事件。
• 表单事件： 由HTML表单内的动作触发的事件。
• 键盘事件： 使用键盘在页面上执行某些操作时所触发的事件。
• UI事件： UI（User Interface，用户界面）事件，指的是那些不一定与用户操作有关的事件。

鼠标事件

一个案例带您掌握鼠标事件的应用：

鼠标单击我看效果
![请添加图片描述](https://img-blog.csdnimg.cn/0e0d4e66943948498b4592ebc424c542.gif)
鼠标双击我看效果
鼠标移入我看效果
鼠标移出我看效果
鼠标在我这不停移动看效果

运行效果：

表单事件

注意：表单重置事件不支持input标签，支持form标签。

一个案例带您掌握表单事件的应用：

姓名:

效果展示：

键盘事件

提示：
键盘事件的事件次序：onkeydown onkeypress onkeyup

案例一：带您掌握键盘事件的应用：

姓名：

通过console控制台去观察键盘按下和松开时的输出信息。

案例二：松开键盘键s,自动获取焦点。

姓名：
自我介绍：

效果展示：松开键盘s键后，自动获取焦点

UI事件

提示：
如果重载页面，也会出发unload事件（以及onload事件）

案例代码：

快速投票