事件

1. 事件

IE的事件流是事件冒泡流
Netscape是的事件流是事件捕获流

DOM事件流 ：规定事件包括三个阶段：

1. 事件捕获阶段
2. 处于目标阶段
3. 事件冒泡阶段

事件流程.jpg

document > html > body > div (点击div元素事件)
在DOM事件流中，实际的目标元素(

元素)在捕获阶段不会接收到事件。这就意味着在捕获阶段，事件从document到到后就停止了。下一个阶段是“处于目标”阶段，于是事件在

元素上发生，并在事件处理中被看成是冒泡阶段的一部分。然后，冒泡阶段发生，事件又传播回文档。

2. 事件处理程序：响应事件的程序。

2.1 HTML事件处理程序：会创建一个封装着元素属性值的函数。

• 函数中有一个局部变量event，也就是事件对象。
• 在函数内部，this值等于事件的目标元素。
  

2.2 DOM0级事件处理程序：通过Javascript指定事件处理程序的传统方式，就是将一个函数赋值给事件处理程序。

• 每个元素(包括window和document)都有自己的事件处理程序，如 onclick、onready，属性的值设置为一个函数，就可以指定事件处理程序。

• 使用DOM0级方法指定的事件处理程序被认为是元素的方法，因此事件处理程序是在元素的作用中运行，所以 this引用当前元素。
• 事件对象： event
• 删除事件处理程序：null

var btn = document.getElementById('myBtn');
btn.onclick = function(){
  alert();
}

btn.onclick = null;//删除事件处理程序

2.3 DOM2级事件处理程序：指定和删除事件处理程序

• 接首3个参数：处理的事件名、处理函数、是否冒泡
node.addEventListener(eventName, fn, boolean);
node.removeEventListener(eventName, fn, boolean);
  boolean:
• true 捕获阶段调用事件处理程序
• false 冒泡阶段调用事件处理程序

• 通过addEventListener()添加的事件处理程序只能用removeEventListener()移除，移除时传入的参数使用相同。意味着通过addEventListener()添加的匿名函数将无法移除。
• 可以添加多个事件处理程序，按照添加的顺序触发，同一个事件名也可以添加多次，按照添加的顺序执行。
• 一般情况下都是将事件事件处理程序添加到冒泡阶段false，可以最大限度的兼容各种浏览器。

    Click Me
    

2.4 IE事件处理程序

• 接受两个相同的参数： 事件名、处理函数
attachEvent(eventName, fn);
detachEvent(eventName, fn);

• IE8及更早版本只支持事件冒泡，所以事件处理程序都会被添加到冒泡阶段。
• 事件名是以on开头（与DOM级事件处理程序事件名一样，如onclick）。
• IE事件处理程序会在全局作用域中执行，this指向window。
• 添加多个事件处理程序，以相反的顺序触发。

Click Me


view
2.window对象
1.window对象

2.5 跨浏览器事件处理程序

3. 事件对象

所有浏览器都支持event对象。

** 3.1 DOM级事件对象**

• currentTarget: this始终等于currentTarget，正在处理事件的元素。
• preventDefault(): event.preventDefault()阻止特定事件的默认行为.
• cancelabel: 设置为true，才可以使用preventDefault()来取消默认行为。
• stopPropagation(): 立即停止事件在DOM层次中的传播，即取消进一步的事件捕获或冒泡。
• eventPhase: 事件处理处于哪个阶段（1:捕获阶段， 2:目标阶段，3:冒泡阶段）