历史上的每一个年代，都会给”异端邪说“贴一些标签，目的是在人们开始思考它们是否为真之前就把它们封杀。 --- 引自《黑客与画家》章节：不能说的话

DOM事件

HTML DOM 允许 JavaScript 对 HTML 事件作出反应：
HTML 事件的例子：
- 当用户点击鼠标时
- 当网页加载后
- 当图像加载后
- 当鼠标移至元素上时
- 当输入字段被改变时
- 当 HTML 表单被提交时
- 当用户敲击按键时

Event 对象

Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。
事件通常与函数结合使用，函数不会在事件发生前被执行！

基本概念：DOM事件的级别

| 等级 | 事件级别 | |------|------------|------------| | DOM0 | element.onclick = function(){} | | DOM2 | element.addEvenListener('click', function(){},false) | | DOM3 | element.addEvenListener('keyup', function(){},false) |

DOM事件流模型

描述DOM事件捕获的具体流程

window ---> document --->html --->body --->………(按照DOM 结构一层层传递) ---> 目标元素

Event 对象的常见应用

enent.perventDefault() // 阻止默认行为
event.stopPropagation() // 阻止冒泡
- 方法作用在后续节点上，目的在执行完绑定到当前元素上的所有事件处理程序之后，停止执行所有后续节点的事件处理程序
event.stopImmediatePropagation()
- 方法作用在后续节点上，目的在执行完绑定到当前元素上的所有事件处理程序之后，停止执行所有后续节点的事件处理程序
event.currentTarget()
- 常用于事件委托，表示当前被点击的元素
event.target
- 当前绑定的事件

自定义事件

var touchEvent = new Event('custome');
dom.addEventListener('custome',function(){
  console.log("custome")
});
dom.dispatchEvent(touchEvent);

CustomEvent是另一个自定义事件方法

总结：自定义事件(不想用回调得时候)
- customEvent 指定事件名+参数
- Event不能加参数，用法一样

捕获流程代码演示

捕获顺序和代码书写先后顺序无关

<div id="ev">
    <style media="screen">
        #ev {
            width: 300px;
            height: 100px;
            background: red;
            color: #fff;
            text-align: center;
            line-height: 100px;
        }
    </style>
    目标元素
</div>
<script type="text/javascript">
    var ev = document.getElementById('ev');

    ev.addEventListener('click', function (e) {
        console.log('ev captrue');
    }, true);

    window.addEventListener('click', function (e) {
        console.log('window captrue');
    }, true);

    document.addEventListener('click', function (e) {
        console.log('document captrue');
    }, true);

    document.documentElement.addEventListener('click', function (e) {
        console.log('html captrue');
    }, true);

    document.body.addEventListener('click', function (e) {
        console.log('body captrue');
    }, true);
  
  // 点击打印顺序
  /*
  	window capture
  	document capture
  	html capture
  	body capture
  	ev capture
  */
</script>

自定义事件代码演示

  	// 自定义事件
    var eve = new Event('test');
    ev.addEventListener('test', function () {
        console.log('test dispatch');
    });
    setTimeout(function () {
        ev.dispatchEvent(eve);
    }, 1000);

常用到的事件

onload 和 onunload 事件

当用户进入后及离开页面时，会触发 onload 和 onunload 事件。
onload 事件可用于检测访问者的浏览器类型和浏览器版本，然后基于该信息加载网页的恰当版本。
onload 和 onunload 事件可用于处理 cookie。

<body onload="checkCookies()">

onchange 事件

onchange 事件经常与输入字段验证结合使用。
下面是一个如何使用 onchange 的例子。当用户改变输入字段内容时，会调用 upperCase() 函数。

<input type="text" id="fname" onchange="upperCase()">

onmouseover 和 onmouseout 事件

onmouseover 和 onmouseout 事件可用于当用户将鼠标移至 HTML 元素上或移出时触发某个函数：

onmousedown, onmouseup 以及 onclick 事件

onmousedown, onmouseup 以及 onclick 事件构成了完整的鼠标点击事件。
首先当鼠标按钮被点击时，onmousedown 事件被触发；然后当鼠标按钮被释放时，onmouseup 事件被触发；最后，当鼠标点击完成后，onclick 事件被触发。

DOM 事件全解析,看这一篇文章就够了