1.事件处理程序

·DOM0

function example() {
var DIV = document.getElementById("example");
DIV.onclick = function(){
alert("1");
}
DIV.onclick = function(){
alert("2");
}
}
window.onload = example;

点击后，只弹框2

var DIV = document.getElementById("example");
DIV.onclick = function () {
alert("1");
alert("2");
}

点击后弹框1和2

function example() {
var DIV = document.getElementById("example");
DIV.onclick = (function(){
alert("1");
})()
DIV.onclick = function(){
alert("2");
}
}
window.onload = example

刷新后直接弹框1（第一个alert是自动执行的），点击弹框2

*如果没有加window.onload = example或者example()，则无论点击还是刷新都没反应只有这个函数被加载（执行），才会执行内部的自动执行函数，当然如果没有外面那层function example()，则点击和刷新不需 window.onload = example也有反映。

·DOM2级事件处理程序（IE9，Firefox,Safari,Chrome和Opera支持）

addEventListener(),removeEventListener()用于处理指定和删除时间处理程序的操作, 接受三个参数。

要处理的事件名、作为事件处理程序的函数和一个布尔值

布尔值参数如果是true，表示在捕获阶段调用时间处理程序；如果是false，表示在冒泡阶段调用事件处理程序。

removeEventListener()移除时传入的参数与添加处理程序时使用的参数相同 **意味着通过addEventListener()添加的匿名函数将无法移除

点击一次可以弹出这两个弹框

**不建议在事件捕获截断注册事件处理程序，兼容性不好。

·IE事件处理程序（IE和Opera）

attachEvent()和detachEvent()，这两个方法接受相同的两个参数：

事件处理程序名称和事件处理程序函数

由于IE8及更早版本只支持事件冒泡，所以通过attachEvent()添加的事件处理程序都会被添加到冒泡阶段.

Chrome点击出现example1.js:31 Uncaught TypeError: DIV.attachEvent is not a function

这个是IE和Opera才可以用(亲测ie9可以用)

var DIV = document.getElementById("example");
DIV.attachEvent("onclick",function () {
alert("clicked1");
})
DIV.attachEvent("onclick",function () {
alert("clicked2");
})

先弹出clicked2再弹出clicked1，this指向window，也不能移除添加的匿名函数

2.event对象的属性和方法

currentTarget:其事件处理程序当前正在处理事件的那个元素

target:事件的目标

在事件处理程序内部，对象this始终等于currentTarget的值，而target则只包含事件的实际目标。如果直接将事件处理程序指定给了目标元素，则this、currentTarget和target包含相同的值。

document.body.onclick = function (event) {
alert(event.currentTarget); //[object HTMLBodyElement]
alert(this) ; //[object HTMLBodyElement]
alert(event.target); //[object HTMLDivElement]
}

如果事件处理程序存在于按钮的父节点中（例如document.body）,那么单击这个例子中的按钮时， this和currentTarget都等于document.body,因为事件处理程序是注册到这个元素上的。然而，target元素却等于按钮元素，因为它是click事件真正的目标。在那里事件才得到了处理。

preventDefault()方法可以阻止特定事件的默认行为（如点击链接会导航到href特性指定的URL）, 但是需要cancelable(表明是否可以取消事件的默认行为)属性设置为true的事件，才可以使用这个方法。

stopPropagation()方法用于立即停止事件在DOM层次中的传播，即取消进一步的事件捕获或冒泡。

例如，直接添加到一个按钮的事件处理程序可以调用stopPropagation()，从而避免触发注册在document.body 上面的事件处理程序。

eventPhase属性可以用来确定事件当前正处于事件流的哪个阶段。捕获阶段调用的事件处理程序，eventPhase等于1; 处于目标对象上，返回2; 在冒泡阶段调用，返回3.

*当eventPhase等于2时，this\target\currentTarget始终相等。

但是这些在IE中会报错（alert(this)获得object）SCRIPT5007: 无法获取属性“currentTarget”的值: 对象为 null 或未定义

IE中的事件对象

因为事件处理程序的作用域是根据指定它的方式来确定的。前文中，我说过attachEvent指向window, 所以不能认为this会始终等于时间目标，最好还是使用event.srcElement

srcElement对应target属性.

而且，在使用DOM0级方法添加事件处理函数时，event对象作为window对象的一个属性存在，所以必须写window.event,否则会报错.

在DOM2中可以直接使用event

document.body.onclick = function (event) {
alert(this) //[object]
alert(window.event.type) ; //[object]
alert(window.event.srcElement); //[object]
}

returnValue属性相当于DOM中的preventDefault()方法，但是它没有办法确定事件是否能被取消（没有cancelable）