浏览器事件代理如何理解

事件流分为: 1.捕获阶段 2.目标阶段 3.冒泡阶段. 捕获阶段是从父元素到目标元素,冒泡阶段是目标元素到父元素. 当要对一系列的元素都添加响应事件时,可以只给父元素添加响应事件,然后利用事件冒泡对事件作出响应.

事件流

事件流描述的是从页面中接受事件的顺序。

IE的事件流是事件冒泡流

其他的事件流是事件捕获流

事件冒泡

事件冒泡，即事件最开始由最具体的元素(文档中嵌套层次最深的那个节点)接收，然后逐级向上转播至最不具体的节点(文档)。

事件捕获

事件捕获的思想是不太具体的节点应该更早接收到事件，而最具体的节点最后接收到事件。

事件处理程序

HTML事件处理程序 DOM0级事件处理程序 DOM2级事件处理程序 DOM2级事件定义了两个方法：用于处理指定和删除事件处理程序的操作：addEventListener()和removeEventListener()。它们都接收三个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值。 IE事件处理程序 attachEvent()添加事件 detachEvent()删除事件这两个方法接收相同的两个参数：事件处理程序名称与事件处理函数

事件对象

DOM中的事件对象 type 获取事件类型 target 事件目标 stopPropagation() 阻止事件冒泡 preventDefault() 阻止事件的默认行为 IE中的事件对象 type 获取事件类型 srcElement 事件目标 cancelBubble=true 阻止事件冒泡 returnValue=false 阻止事件的默认行为

事件代理

事件代理则是利用了DOM事件流的特性，通过绑定一个节点来影响子或父的节点。

例子如下：

<!--
HTML结构
-->
<ul id="list">
    <li class="item-1">1</li>
    <li class="item-2">2</li>
    <li class="item-3">3</li>
    <li class="item-4">4</li>
    <li class="item-5">5</li>
</ul>
<p id="text">文本</p>

<!--
javascript 代码
-->
<script>
    'use strict';
    list.addEventListener('click', event => {
        if (event.target.className.indexOf('item-') === 0) {
            text.innerHTML = event.target.innerHTML;
        };
    });
</script>

powerdong / myProblems