DOM_Event Flow

Event事件对象,DOM2级方法

例子：
<div> <button id="btn">Click Me!</button> </div>

对于上面例子，若是想知道点击后例子的运行顺序，此时就与Event flow(事件流动)相关了。

事件流动

DOM事件不仅仅只会在一个Element上触发，它还会流向其余Element。事件的流动一般会经历这么三个阶段：

捕获阶段 -> 目标阶段 -> 冒泡阶段

捕获阶段（capture phase）

定义：事件对象在事件目标的祖先中上到下顺向传播，从最顶层的defaultView到事件目标的（直系）父元素。

 

捕获阶段发生在整个事件流动的开始。在这阶段里事件会从父（主干）到子（分支）由上往下传播，被元素一层层地捕获。
文章开头的例子里面，捕获阶段的click事件会依次在document、body、div上触发：

 

目标阶段（target phase）

定义：事件对象到达事件目标。

 

就如例子中，事件在button上触发。

若是事件是不可冒泡的，那整个事件流动会到此为止，不会发生下面的冒泡阶段。

 

冒泡阶段（bubble phase）

定义：事件对象会在事件目标的祖先元素里反向传播，由开始的父元素到最后的defaultView（document）。

 

冒泡阶段发生在最后，这也是咱们最为熟悉的一个阶段。在这阶段里事件会从子（分支）到父（主干）逆向传播，看起来像是一个水里的泡泡往上冒。
例子里面，冒泡阶段的click事件会依次在div、body、document上触发：

一.event事件对象

• 每一个浏览器中的event 
  鼠标坐标获取
• event.pageX / event.pageY相对于文档顶部,不兼容低版本IE
• event.clientX / event.clientY相对于但是区域

二.事件监听

• attachEvent()IE8极其一下添加监听事件
• addEventListener()大众浏览器添加监听事件

• 事件绑定 
  1) 在DOM元素中直接绑定

  <input onclick =  "alert('谢谢支持')" type="button" value="弹出警告"/>
  <input onclick = "fun()" type="button" value="警告">
  function fun(){
  alert("警告");
  }

  2)在javascript代码中绑定 
  就是一个对象的事件函数 
  3)绑定事件监听函数 
  就是上面两个方法来绑定事件监听函数

• 事件解绑
• 事件捕获 
  当鼠标点击或者触发dom事件时,浏览器会从根节点开始有外到内进行事件传播,即点击子元素,若是父元素经过事件捕获方式注册了对应的事件的话,会触发父元素绑定事件
• 事件冒泡 
  与事件捕获相反,事件冒泡顺序是由内到外进行事件传播,直到根节点.

三.滚轮事件

• wheelDelta正常记录滚动方向
• detail火狐浏览器记录滚动条方向
• onmousewheel滚轮滚动

四.事件冒泡

• onmouseover / onmouseout
• onmouseenter / onmouseleave不支持冒泡
• 表格操做点击
• cancelBubble从自身开始阻止冒泡
• stopPropagation()阻止冒泡

五.键盘事件

• keyCode
• onkeydown
• onkeypress
• onkeyup
• altKey
• ctrlKey
• shiftKey
• which等

六.阻止浏览器默认事件

• preventDefault
• returnValue = false
• 屏蔽浏览的右键菜单
• 进制选中复制