DOM事件流和事件委托

事件冒泡

IE的事件流叫做事件冒泡(event bubbling)，即事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收，然后逐级向上传播到较为不具体的节点(文档)。所有现代浏览器都支持事件冒泡，并且会将事件一直冒泡到window对象。

事件捕获

事件捕获的思想是不太具体的节点应该更早接收到事件，而最具体的节点应该最后接收到事件。事件捕获的用意在于在事件到达预定目标之前就捕获它。IE9+、Safari、Chrome、Opera和Firefox支持，且从window开始捕获（尽管DOM2级事件规范要求从document）。由于老版本浏览器不支持，所以很少有人使用事件捕获。
说白了事件捕获就是截获事件

DOM事件流

事件流又称为事件传播，DOM2级事件规定的事件流包括三个阶段：事件捕获阶段(capture phase)、处于目标阶段(target phase)和事件冒泡阶段(bubbling phase)。

首先发生的是事件捕获，为截获事件提供了机会。然后是实际的目标接收到事件，最后一个阶段是冒泡阶段，可以在这个阶段对事件做出响应。

简单来说就是事件执行的顺序流，DOM树中有大量的元素，元素之间出现嵌套时，给父子元素同时设置了事件，父子元素的事件执行会按照某种顺序执行，这就是事件流

DOM同时支持两种事件模型，捕获型事件流和冒泡型事件流

**冒泡型事件流:**事件船舶从特定的事件目标到最不特定的事件目标，即从叶到根（从下到上）

例子：

<style>
    .box1{
    
    width: 300px; height: 300px;background-color: red;}
    .box2{
    
    width: 200px; height: 200px;background-color: rgb(78, 62, 150);}
    .box3{
    
    width: 100px; height: 100px;background-color: rgb(39, 180, 150);}
</style>
<body>
    <div class="box1">
        <div class="box2">
            <div class="box3">

            </div>
        </div>
    </div>
</body>

当子元素被触发时，会依次向上触发所有父元素的相同事件

**捕获型事件流:**事件的传播是从最不特定的事件目标到最特定的目标，从根到叶(从上到下)

例子:

<body>
    <div class="box1">
        <div class="box2">
            <div class="box3">

            </div>
        </div>
    </div>
</body>
<script>
    var box1=document.getElementsByClassName('box1');
    var box2=document.getElementsByClassName('box2');
    var box3=document.getElementsByClassName('box3');
</script

事件委托和事件代理

事件委托

将事件委托给另外的元素。其实就是利用DOM的事件冒泡原理，将事件绑定到目标元素的父节点事件委托可以成为事件代理。

简单来说就是将原本绑定在子元素身上的事件委托给父元素，让父元素去监听事件，例子是事件冒泡和捕获

优点: 事件委托的优点：可以减少事件的注册，节省内存占用。也可以实现当新增对象时无需再次对其绑定事件

事件代理

事件代理口语化描述：有两个元素a和b, b将来要嵌套在a中，但b还不存在，将来再创建，这时想给b设置事件，而b此时不存在，无法设置事件，怎么办呢？b就委托a元素帮它设置事件，我们称事件委托。这是站在b的角度考虑问题时叫事件委托。站在a的角度考虑问题，a代理了b给b绑定了事件，称事件代理。所以事件委托和事件代理其实是一回事，只是站的角度不同而以

**区别：**事件委托一般应用在虚拟DOM场景下，即有些DOM元素还不存在，就想给它们绑定事件，需要借助它们的父元素帮它们绑定事件

DOM0级，2级，3级

DOM0级

DOM0级事件就是将一个函数赋值给一个事件处理属性

<button id="btn" type="button"></button>

<script>
    var btn = document.getElementById('btn');
    
    btn.onclick = function() {
    
    
        alert('DOM0级');
    }
    
     
</script>

DOM2级

在DOM0级事件的基础上弥补了一个处理程序无法同时绑定多个处理函数的缺点，允许给一个处理程序添加多个处理函数。

<button id="btn" type="button"></button>

<script>
    var btn = document.getElementById('btn');
    
    function showFn() {
    
    
        alert('DOM2级');
    }
    
    btn.addEventListener('click', i, false);
    
     
</script>

DOM3级

DOM3级事件在DOM2级事件的基础上添加了更多的事件类型，全部类型如下：
1.UI事件，当用户与页面上的元素交互时触发，如：load、scroll
2.焦点事件，当元素获得或失去焦点时触发，如：blur、focus
3.鼠标事件，当用户通过鼠标在页面执行操作时触发如：dbclick、mouseup
4.滚轮事件，当使用鼠标滚轮或类似设备时触发，如：mousewheel
5.文本事件，当在文档中输入文本时触发，如：textInput
6.键盘事件，当用户通过键盘在页面上执行操作时触发，如：keydown、keypress
7.合成事件，当为IME（输入法编辑器）输入字符时触发，如：compositionstart
8.变动事件，当底层DOM结构发生变化时触发，如：DOMsubtreeModified