DOM事件

事件就是用户或者浏览器执行的某个动作，例如click，load，mouseover都是事件的名字。而相应某个事件的函数叫做事件处理程序。事件处理程序的名字以on开头，例如onclick,onload。

每个元素支持的每种事件，都可以使用一个与响应事件处理程序同名的HTML特性来制定，这个特性的值应该是能够执行的HTML代码。

通过JavaScript指定事件处理程序的传统方式，就是将一个函数赋值给一个事件处理程序属性。

var btn = document.getElementById("btn")
btn.onclick = function() {
    alert("clicked")
}

使用Dom0级事件处理程序被认为是元素的方法，此时程序中的this会引用当前元素。同时以这种方式添加的事件处理程序会在冒泡阶段被处理。

Dom2级事件定义了两个方法，addEventListener()和removeEventListener(),所有的Dom节点中都包含着两个方法，它们都是接受三个参数，要处理的事件名，事件处理函数，和一个布尔值（为true的时候表示在捕获阶段调用事件处理程序，false表示在冒泡阶段调用事件处理程序）

var btn = document.getElementById("btn")
btn.addEventListener("click", function(){
    alert(this.value)    
}, false)

IE中实现了与DOM中类似的两个方法，attachEvent()和detachEvent()。这两个方法接受相同的参数，事件处理程序名称，事件处理程序函数，由于在IE8以前不支持事件冒泡，所以事件处理程序函数会在冒泡阶段执行。

var btn = document.getElementById("btn")
btn.attachEvent("ocClick", function() {
    alert("clicked")
})

此时在事件处理程序函数会在全局作用域中执行，也就是说此事的this是window。
同时如果为同一个元素同时添加了两个不同的事件处理程序，这些事件处理程序并不是顺序执行的而是以相反的顺序被触发。

在触发Dom上的某个事件的时候，会产生一个事件对象event，这个对象包含着与事件有关的信息。

兼容Dom的浏览器会将一个event对象传到事件处理程序中。

var btn = document.getElementById("btn")
btn.onclick = function(event) {
    alert(event.type)
}

当我们想要阻止某个事件的特定行为时可以使用event对象的preventDefault()方法，而stopPropagation()方法则用于立即停止事件在DOM中的传播，即取消进一步的事件冒泡或者捕获。

要访问IE中的event对象有几种不同的方式，在使用DOM0级方法添加事件处理程序时，event对象作为window对像的一个属性存在。

var btn = document.getElementById("btn")
btn.onclick = function() {
    var event = window.event
    alert(event.type)
}

但是当我们用attachEvent的方式添加的，此时的event对象会被当作一个参数传入事件处理程序中。当时此时也可以通过window对象来访问event对象。
在event对象中有一个srcElement属性，指向事件的目标对象，因为事件的处理程序的作用域是根据指定它的方式来确定的，所以this并不总是等于目标对象。此时为了保险起见，建议使用srcElement

btn.onclick = function() {
    alert(window.event.srcElement) === this; //ture
}
btn.attachEvent("onclick", function(event) {
    alert(event.srcElement === this); //false
})

Web浏览器中可能发生的事件类型有很多，不同的事件类型可能具有不同的信息。而DOM3级事件规定了一下几类事件。

UI事件
UI事件指的是那些不一定与用户操作有关的事件。比如load事件，当页面完全加载后在window上面触发，当图片加载完毕在元素上触发。以及脚本加载完毕在