10.第13章：事件

1.事件流：描述从页面接收事件的顺序。IE提出冒泡流，Netscape提出捕获流。

1.1 事件冒泡

事件开始时由最具体的元素（嵌套最深）接收，然后逐级向上传播到最外层节点（文档）。

1.2 事件捕获

从最外层不太具体的节点收到事件，传递给最内层的具体的节点。

1.3.DOM事件流

事件捕获阶段、目标阶段、事件冒泡阶段

捕获阶段：事件从ducument->html->body
目标阶段：事件在div上发生。在事件处理中被看成冒泡阶段的一部分。
冒泡阶段：事件传回document

2.事件处理

2.1.HTML事件处理

指定onclick属性：

缺点：时差问题、扩展事件处理程序的作用域链在不同浏览器有不同结果、HTML和JavaScript代码耦合。
摒弃此种方法，使用JavaScript指定时间处理程序。

2.2.DOM0级事件处理

使用DOM0级方法指定的事件处理程序被认为是元素的方法，这时候事件处理程序时在元素作用域中运行，程序中this引用当前元素。

2.3.DOM2级事件处理

定义了两个方法：添加事件addEventListener（） 删除事件 removeEventListener（）
接收三个参数：要处理的事件名、作为事件处理的函数、布尔值。
布尔值为true，表示在捕获阶段调用事件处理
布尔值为false，表示在冒泡阶段调用时间处理

使用addEventListener()添加的事件处理程序，只能用removeEventListener()移除，移除的参数与添加参数相同，通过addEventListener()添加的匿名函数将无法移除。

重写之后可以移除

可用的浏览器：

2.4.IE9之前版本事件处理

IE实现和DOM2事件处理类似的两个方法
attachEvent()和detachEvent()。
接收两个参数：事件名称，事件处理函数。IE8及之前版本只支持事件冒泡，所以不需要第三个参数。
注意：在IE中使用attachEvent()的作用域是全局作用域，this等于window。

使用attachEvent()添加的事件，只能使用detachEvent()来移除，同样参数必须相同。

图片.png

2.5.跨浏览器的事件处理

定义了两个方法addHandler和removeHandler()
接收三个参数，元素，事件类型，事件处理方法。
首先判断有没有DOM2的方法
没有再判断有没有IE的方法
没有就使用DOM1,这里直接给元素添加了属性。

3.事件对象

3.1 DOM中的事件对象

兼容DOM的浏览器都会将event对象传入到事件处理程序中。

在需要一个函数处理多个事件时，可以使用type属性。

• 阻止特定事件的默认行为

  
  
  

• 停止事件在DOM层次的传播，只会弹出一次警告框，body上的被禁止传播。

  
  
  

• 事件对象的eventPhase属性：确定当前事件位于事件流的那个阶段。捕获1，目标处理2，冒泡3。

  
  
  

3.2 IE中的事件对象

访问IE中的event对象有几种不同的方式，取决于指定事件处理程序的方法。
i)DOM0级方法添加事件处理程序
event对象作为window属性存在

ii)DOM2,使用attachEvent(),就会有一个event对象作为参数被传入事件处理函数。

• 取消给定事件的默认行为，与DOM中preventDefault()方法作用相同。

  
  
  

• 停止事件冒泡,与DOM中stopPropagation()方法作用相同。

  
  
  

3.3 跨浏览器事件对象

4 事件类型

4.1 UI事件

• load事件
  当页面完全加载后在window上出发，当体香加载完在img元素上触发。
  i)window上的事件有如下两种方式：

  
  
  
  
  
  
  
  

  ii)img的load事件

  
  
  
  
  
  

• unload事件
  文档完全被卸载时触发。用户从一个页面切换到另一个页面会触发。

  
  
  
  
  
  

• resize事件
  当浏览器窗口被调整到一个新的高度或宽度时，会触发resize事件。

  
  
  

• scroll事件

  
  
  
  
  

  以上代码输出页面垂直滚动位置

4.2 焦点事件

会在页面获得或失去焦点时触发。

4.3 鼠标与滚轮事件

• 客户区坐标位置
  相对于浏览器窗口的位置：clientX，clientY

  
  
  

• 页面坐标位置
  判断在页面中的位置，从页面本身而非视口的左边和顶边计算的。pageX，pageY。没有滚动时与clientX，clientY相等。

  
  
  

• 屏幕坐标位置
  相对于整个电脑屏幕的位置：screenX，screenY

  
  
  

• 四个修改键

  
  
  

4.4 键盘与文本事件

三个键盘事件

1）键码
发生keydown和keyup事件时，event对象的keyCode属性会包含一个代码，与键盘上一个特定的键对应。

2）字符编码
如果按下的是字符，使用charCode属性获取值。

3)textInput事件
用户在可编辑区输入字符时，触发该事件。

用户按上档键和s，data值为S
没有按上档键，data值为s

5.内存和性能

5.1事件委托

对于事件处理程序过多的问题解决方案就是事件委托，利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。

要给所有的li添加事件，只需要为ul添加一个事件。

2.移除事件处理