通常，我们将这类事件的流程分为三个阶段。捕获阶段，目标阶段，冒泡阶段
捕获阶段是指事件响应从最外面的窗口开始，逐步向内移动到特定的事件目标元素。 在捕获阶段，不处理响应元素注册的鼓泡。 舞台是触发事件的底层元素，如上图所示。 鼓泡阶段与捕获阶段相反，事件的响应从最底层一级一级地向外传递到最外层的窗口。 DOM活动流程的三个阶段是先捕获阶段，然后是目标阶段，最后才是冒泡阶段正如我们经常在面试中说的，先捕获后发泡也来自于此。事件代理就是利用事件冒泡或事件捕获的机制把一系列的内层元素事件绑定到外层元素。
在事件鼓泡和事件捕获的实际操作中，可以使用element.addEventListener ()将元素的事件模型设置为鼓泡或捕获事件。
首先，让我们看看高级监听器函数的语法。
element.addeventlistener(type，listener，useCapture ) type
监听事件类型的字符串监听器
接收事件的回调函数，即在触发事件后处理的函数useCapture
默认值false表示事件会冒泡。 如果设置为true，则表示事件捕获事件冒泡示例的div id='a' style='width: 100%； 高： 300 px； ack ground-color : antique white；' a divid=' b ' style=' width :100 %； 高： 200 px； 背景色： burly wood；' BDI vid=' c ' style=' width :100 %； height: 100px； 背景色： corn flower blue；' c/div/div/divscriptvara=document.getelementbyid (a ' ) varb=document.getelementbyid ' ) varc=document泡沫)={console.log ) )冒泡a ) } ) b.addeventlistener ) ) click )，)={ consoner }注册()={console.log 鼓泡事件的执行顺序为c - b - a
事件捕获示例div id='a' style='width: 100%； 高： 300 px； ack ground-color : antique white；' a divid=' b ' style=' width :100 %； 高： 200 px； 背景色： burly wood；' BDI vid=' c ' style=' width :100 %； height: 100px； 背景色： corn flower blue；' c/div/div/divscriptvara=document.getelementbyid (a ' ) varb=document.getelementbyid ' ) varc=document捕获)={console.log ) '捕获a ) }，true ) b.addeventlistener ) )，click )={ } true (c.addevent listener (' click ) 捕获事件的执行顺序为a - b - c
事件代理(事件委托)事件代理是指利用事件冒泡和事件捕获机制将一组内部元素事件与外部元素联系起来
ulid=' item-list ' Li item1/Lili item2/Lili item3/Lili item4/Li/ul对于上述列表元素，我们希望打印用户单击了哪个item。 通常，可以在每个item中注册单击事件侦听器，但每个元素都需要注册事件侦听器，但是事件代理可以将多个事件侦听器减少到一个，从而减少代码的重复描述。
通过事件冒泡或事件捕获实现事件代理：
var items=document.getelementbyid (item-list )； //事件捕获是事件代理items.addeventlistener('click '，) e )={console.log )捕获： click '，e.target.iid true ) )//事件冒泡事件代理items.addeventlistener(click )，) e )={console.log冒泡： click )，e.
事件代理既可以通过事件冒泡来实现，也可以通过事件捕获来实现
http://www.Sina.com/http://www.Sina.com/http://www.Sina.com/3358 www.Sina.com /