DOM事件这段代码大家肯定都见过，不需要操作DOM元素，事件处理函数直接写在html属性中。当然实际开发中应该没有人这样

DOM事件级别：有 DOM0级，DOM2级和DOM3级三种；

首先来看不需要操控DOM的事件

<button type="button" onclick="logFn()"></button>
<script>
    function logFn() {
        console.log('Hello World');
    }
</script>

这段代码大家肯定都见过，不需要操作DOM元素，事件处理函数直接写在html属性中。当然实际开发中应该没有人这样写了，理由也很简单，html和js强耦合，无论是编写还是维护都没有任何好处，于是就有了DOM事件处理。

DOM0级事件

<button id="btn" type="button"></button>
<script>
    var btn = document.getElementById('btn');
    btn.onclick = function() {
        console.log('Hello World');
    }
</script>

DOM0事件定义需要两步，先找到DOM节点，然后把处理函数赋值给该节点对象的事件属性。如果想解除事件，那么只要把null赋值给事件属性即可。DOM0级事件无法给一个事件添加多个处理函数。

DOM2级事件

<button id="btn" type="button"></button>
<script>
    var btn = document.getElementById('btn');
    function logFn() {
        console.log('Hello World');
    }
    btn.addEventListener('click', logFn, false);
</script>

DOM2级事件使用addEventListener，里面有三个参数，第一个参数是事件名，就是事件属性去掉on，第二个参数是事件处理函数，第三个参数是一个布尔值（true表示在捕获阶段触发、false表示在冒泡阶段触发）。使用DOM2事件可以随意添加多个处理函数，移除DOM2事件要用removeEventListener，传入的三个参数与添加事件完全相同。特别的旧版本IE浏览器（IE8及一下），需要使用attachEvent和detachEvent来添加和移除事件。

DOM3级事件

DOM3级事件就是在DOM2基础上增加了更多的事件类型，我们可以从（鼠标事件、键盘事件，HTML事件，表单事件）

事件模型：事件捕获，事件冒泡

有以下HTML结构

<html>
	<body>
		<div>
			<span>
				我是目标区域
			</span>
		</div>
	</body>
</html>

给span标签绑定事件，就会有一个从事件源和目标之间的事件流，此例中，事件流的方向为window -> document -> html -> body -> div -> span -> 目标 -> span -> div -> body -> html -> document -> window ,整个事件流分为两个部分，以事件目标为界限，从window到span标签这个过程为事件捕获，从span标签回到window的过程叫事件冒泡。如图所示事件触发流程：

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>事件捕获和事件冒泡</title>
  </head>
  <body>
        <div>
		span>
		    我是目标区域
		</span>
	</div>
    <script type="text/javascript">
      window.addEventListener('click',function(){
        console.log('window被点击');
      },true);
      document.documentElement.addEventListener('click',function(){
        console.log('document被点击');
      },true);
      document.querySelector('html').addEventListener('click',function(){
        console.log('html被点击');
      },true);
      document.querySelector('body').addEventListener('click',function(){
        console.log('body被点击');
      },true);
      document.querySelector('div').addEventListener('click',function(){
        console.log('document被点击');
      },true);
      document.querySelector('span').addEventListener('click',function(){
        console.log('span被点击');
      },true);
    </script>
  </body>
</html>

上面的触发span点击事件后，打印结果如下：

上面的代码是捕获阶段触发，顺序可以打乱，打印结果是一致的。

自定义事件

除了系统内置的事件外，我们还可以自定义事件

var ev = new Event('defineEvent');
document.addEventListener('defineEvent',function(){
	//添加自己想要的逻辑
	console.log('打印XXX')
},false);
document.dispatchEvent(ev)

通过创建Event对象来创建事件，通过dispatchEvent函数派发事件。自定义事件可以绑定到任意DOM元素上，此处选择document只是为了演示方便。