DOM事件类什么是DOM事件类？下面来梳理一下。浏览器在这个当前的页面做交互的过程中，例如我点击了鼠标的左键，这个左键

什么是DOM事件类？下面来梳理一下。

DOM事件的级别
DOM事件模型
DOM事件流
描述DOM事件捕获的具体流程
Event对象的场景应用
自定义事件

（一）DOM事件的级别

DOM0 element.onclick = function(){}
DOM2 element.addEventListener('click',function(){},false)
DOM3 element.addEventListener('keyup')

（二）DOM事件模型

捕获 (捕获自上而下)
冒泡 (冒泡自下而上)

（三）DOM事件流

事件流描述的是从页面中接受事件的顺序 - 摘自《JavaScript 高级程序设计第三版》

浏览器在这个当前的页面做交互的过程中，例如我点击了鼠标的左键，这个左键是怎样传到这个页面上的，这就是事件流，它是怎样进行响应的，一个完整的事件流分三个阶段。

第一阶段是捕获
第二阶段是目标阶段
第三阶段是冒泡

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

事件捕获的思想是不太具体的节点更早接收到事件，而最具体的节点应该最后接收到事件。事件捕获的用意在于在事件达到预定目标之前捕获它。

以下面的HTML页面为例：

<!DOCTYPE html>
<html>
    <head>
        <title>事件捕获</title>
    </head>
    <body>
        <div id="myDIV">Click Me</div>
    </body>
</html>
</html>

如果你点击了页面中

元素，那么这个click事件会按照如下顺序传播：

document
<html>
<body>
<div>

在事件捕获过程中，document对象首先接收到click事件，然后DOM树依次向下，一直传播到事件的实际目标，即<div>元素，图13-2展示了事件捕获的过程(这图是我从《JavaScript 高级程序设计第三版》)拍下来的，将就看一下吧。

最后还是想补充一下，整个捕获事件的代码的流程是怎样实现的

<!---->这里是HTML的代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Event</title>
        <style>
            #ev {
                width: 300px;
                height: 100px;
                background: red;
                color： #fff;
                text-align: center;
                line-height: 100px;
            }
        </style>
    </head>
    <body>
        <div id="ev">
            目标元素
        </div>
        <script>
            var ev = document.getElementByID('ev');
            window.addEventListener('click',function(){
                console.log('window captrue');
            },true)
            document.addEventListener('click',function(){
                console.log('document captrue');
            },true)
            document.documentElement.addEventListener('click',function(){
                console.log('documentElement captrue');
            },true)
            document.body.addEventListener('click',function(){
                console.log('body captrue');
            },true)
            ev.addEventListener('click',function(){
                console.log('ev captrue');
            },true)
        </script>
    </body>
</html>

最后事件捕获的顺序： window->document->html->body->div

（五）Event对象的场景应用

在触发DOM上的某个事件时，会产生一个事件对象event，这个对象中包含着所有与事件有关的信息。包括导致事件的元素、事件的类型以及其他与特定事件相关的信息。例如，鼠标操作导致的事件对象中，会包含鼠标位置的信息，而键盘操作导致的事件对象中，会包含与按下的键有关的信息。所有浏览器都支持event对象，但支持方式不同。

event.preventDefault

取消事件的默认行为

event.stopImmediatePropagation()

取消事件的进一步捕获或冒泡，同时阻止任何事件处理程序被调用

event.stopPropagation()

取消事件的进一步捕获或冒泡

event.target

事件的目标,当前被点击的事件

event.currentTarget

当前被绑定的事件，表示的是父级元素的事件

（六）自定义事件

var eve = new Event('custome');
ev.addEventListener('custome',function(){
    console.log('custome');
})
ev.dispatchEvent(eve);

自定义事件的代码：

<!---->这里是HTML的代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Event</title>
        <style>
            #ev {
                width: 300px;
                height: 100px;
                background: red;
                color： #fff;
                text-align: center;
                line-height: 100px;
            }
        </style>
    </head>
    <body>
        <div id="ev">
            目标元素
        </div>
        <script>
            var ev = document.getElementByID('ev');
            var eve = new Event('test'); // 实例化一个自定义事件
            ev.addEventListener('test',function(){
                console.log('test dispatch');    
            })
            ev.dispatchEvent(eve);
        </script>
    </body>
</html>