DOM中的事件是一个很中要的东西，它可以让用户和浏览器之间进行交互，以此来实现人机交互效果。
DOM事件分为DOM0级事件和DOM2级事件。DOM0级其实不存在，我们把DOM最初的版本叫0级。在DOM2级的时候更新了一种新的事件绑定的方式，所以才有了所谓DOM0级和DOM2级事件。
DOM事件在去使用的过程中，语法很简单。
DOM0级事件绑定：
DOM.on事件名 = function () {
}
// 该方法绑定时无法同时给同一个元素绑定多个相同的事件
DOM.onclick = function () {}
DOM.onclick = function () {} // 这个会覆盖上面的
DOM2级事件绑定:
DOM.addEventListener("事件名", 事件句柄, isCapture)
// 一般这么写
DOM.addEventListener("事件名", function () {}, false)
IE8及以下版本需要使用attachEvent()了解即可
DOM.attachEvent('on事件类型', function () {})
DOM0级事件移除
DOM.onclick = null
DOM2级事件移除
DOM.removeEventListener("事件名", 事件句柄, isCapture)
function handler () {}
DOM.addEventListener('事件名', handler, false)
DOM.removeEventListener('事件名', handler, false)
DOM.addEventListener('事件名', handler, true)
DOM.removeEventListener('事件名', handler, true)
最早的时候，浏览器市场被网景公司netscape占据，后来微软推出了IE抢占市场，后来网景就倒闭了。
两个浏览器有不同的思想。netScape浏览器，在事件执行操作上，推崇事件捕获。而IE浏览器推崇事件冒泡
事件流在最早有两种相对的事件流：冒泡事件流和捕获事件流。
当我们触发一个元素的事件时，会从这个这个元素沿着DOM树向上冒泡，有相同事件的元素会执行对应元素上的事件，没有则继续冒泡，直到到document结束。图中红色部分。
当我们触发一个元素的事件时，会从document沿着DOM树向下捕获， 直到找到这个元素位置，途径的元素有对应事件，则执行，和冒泡顺序相反
在标准的事件流中，先捕获，到达事件源元素，再冒泡。具体实在捕获阶段执行事件还是在冒泡阶段执行事件，需要看第三个参数是true还是false
DOM.addEventListener("事件", function () {}, false) // 在冒泡阶段执行事件
DOM.addEventListener("事件", function () {}, true) // 在捕获阶段执行事件
事件委托（事件代理）
使用js添加到页面上的内容，可以用事件委托。如果要给一大堆相同的元素添加相同的事件，也可以使用事件委托。
把本该自己执行的事件添加到自己的父元素或者祖先元素上，然后利用事件对象限制执行的条件。
e.target // 具体的事件作用的元素
祖先元素.on事件类型 = function (e) {
if (e.target.xxx === "xxx") {
// 执行对应的操作
}
}
// 当元素代理的事件过多时，可以使用switch
祖先元素.on事件类型 = function (e) {
switch(e.target.xxx) {
case 值1:
break
case 值2:
break
case 值3:
break
}
}
阻止冒泡
冒泡在有些时候需要被阻止，当元素本身和内部元素有相同类型的事件执行时，一般需要阻止冒泡
dom.onclick = function (e) {
e.stopPropagation()
}
阻止冒泡在IE低版本浏览器中，可以使用
e.cancelBubble = true
现在无所谓了，记住第一种方式即可。
事件对象是在所有的事件中都会自动生成的一个对象。这个对象叫事件对象Event
直接在事件函数中，填入形参e即可在函数中把e当成事件对象使用。
DOM.on事件名 = function (e) {
// 给事件函数写一个形参一般用 e evt event 都可以
// 在函数内部就可以使用这个参数了
console.log(e) // 千万不要考虑，这个e哪来的。
}
DOM.addEventListener("事件名", function (e) {}, false)
IE8的时候，是不能用这个e的
DOM.on事件名 = function (e) {
// 直接获取window.event
e = e || window.event // 现在无所谓了
}
事件对象中，包含了很多我们有用的属性，后续我们慢慢讲解。
诸如a标签跳转，表单提交，鼠标右键打开菜单，这些操作都是浏览器的默认行为。
a标签跳转，在网页中，有很多时候，我们需要借助a标签的特性，但是又不想发生任何跳转，我们就需要取消浏览器默认行为
dom.on事件 = function (e) {
e.preventDefault()
}
还可以直接返回false
dom.on事件 = function () {
// 其他代码
return false
}
还可以
dom.on事件 = function (e) {
e.returnValue = false
}
一般a标签不会用这个方式，我们会使用
<a href="javascript:;"></a> <a href="javascript:void(0);"></a>
e.screenX / e.screenY
鼠标点击的位置距离屏幕左侧/顶部的距离
e.clientX / e.clientY
鼠标点击的位置，距离浏览器窗口左侧/顶部的距离
e.layerX / e.layerY
默认情况下，和clientX一样，如果元素中有定位属性，则基于该元素offsetParent的距离，如果元素自身有定位属性，则距离自身左侧/顶部的距离。
e.offsetX / e.offsetY
距离border内侧的距离