JavaScript学习笔记（事件一览）

Javascript学习笔记#6（事件-----上）

---

一、JavaScript 中的事件介绍

1. 事件类型

   1. 事件的定义:
      指的是文档或者浏览器窗口中发生的一些特定交互瞬间。我们可 以通过侦听器（或者处理程序）来预定事件，以便事件发生的时候执 行相应的代码。
      

   2. 事件类型：事件类型是一个用来说明发生什么类型事件的字符串。像鼠标悬浮， 按下键盘等。我们也可以把事件类型叫做事件名字，用特定的名字来标识所谈论 的特定类型的事件。
      

   3. 事件目标：事件目标是发生的事件或与之相关的对象。当讲事件时，我们必须 同时指定类型和目标。像 window 上的 load 事件或者链接的 click 事件。在客户 端 js 的应用程序中，Window、Document、和 Element 对象是最常见的事件目标， 但是某些事件也是由其它类型的对象触发的。

   4. 事件处理程序或事件监听程序：我们用户在页面中进行的点击这个动作， 鼠标移动的动作，网页页面加载完成的动作等，都可以称之为事件名称，即： click、mousemove、load 等都是事件的名称。响应某个事件的函数则称为事件 处理程序，或者叫做事件侦听器。
      

   5. 事件对象：事件对象是与特定事件相关且包含有关该事件详细信息的对象。事 件对象作为参数传递给事件处理程序函数。所有的事件对象都有用来指定事件类 型的 type 属性和指定事件目标的 target 属性。每个事件类型都为其相关的事件
      对象定义一组属性。

   6. 事件传播：事件传播是浏览器决定那个对象触发其事件处理程序的过程。

2. 事件模型
   1. 内联模型
      这种模型是最传统接单的一种处理事件的方法。在内联模型中，事件处 理函数是 HTML 标签的一个属性，用于处理指定事件。虽然内联在早期使用 较多，但它是和 HTML 混写的，并没有与 HTML 分离。
      
   2. 脚本模型
      由于内联模型违反了 HTML 与 JavaScript 代码层次分离的原则。为了解 决这个问题，我们可以在 JavaScript 中处理事件。这种处理方式就是脚本 模型。
      
   3. DOM2 模型
      “DOM2 级事件”定义了两个方法，用于添加事件和删除事件处理程序的 操作：
      removeEventListener()，addEventListener()。所有 DOM 节点中都包 含这两个方法，并且它们都接受 3 个参数；事件名、函数、冒泡或捕获的布 尔值(true 表示捕获，false 表示冒泡)。
      IE 事件处理程序，IE 中实现了 DOM 中类似的两个方法：attachEvent() 和 detachEvent().这两个方法接受相关的两个参数：事件处理程序名称和事 件处理程序函数。在 IE8 及 IE8 之间版本中只支持事件冒泡，所以通过 attachEvent()添加的事件处理都会被添加到冒泡阶段。

二、基础事件一览

鼠标事件

属性	描述	DOM
onclick	当用户点击某个对象时调用的事件	2
oncontextmenu	在当用户点击鼠标右键打开上下文菜单时触发	/
ondblclick	当用户双击某个对象时调用的事件	2
onmousedown	鼠标按钮被按下调用的事件	2
onmouseenter	当鼠标指针移动到元素上触发	2
onmouseleave	当鼠标移出元素时触发	2
onmousemove	鼠标移动	2
onmouseover	鼠标移到某元素上	2
onmouseout	鼠标从某元素移开	2
onmouseup	鼠标按键被松开	2

键盘事件

属性	描述	DOM
onkeydown	某个键盘按键被按下	2
onkeypress	某个键盘按键被按下并松开	2
onkeyup	某个键盘按键被松开	2

---

以上