摘要：我们通过上面的这个函数来给节点设置监听，可以通过将设置成来为事件的捕获阶段添加监听回调函数。目标阶段当事件到达目标节点时，事件就进入了目标阶段。事件冒泡让我们可以在这个或者更上层的元素上监听事件，并且时间传播过程中触发回调函数。
在JavaScript中，经常会碰到要监听列表中多项li的情形，假设我们有一个列表如下：
- item1
- item2
- item3
- item4
如果我们要实现以下功能：当鼠标点击某一li时，alert输出该li的内容，我们通常的写法是这样的：
当列表项比较少时，直接给每个li添加onclick事件
列表项比较多时，在onload时就给每个列表项调用监听
第一种方法比较简单直接，但是没有顾及到html与JavaScript的分离，不建议使用，第二种方法的代码如下：
window.onload=function(){
var ulNode=document.getElementById("list");
var liNodes=ulNode.childNodes||ulNode.children;
for(var i=0;i
由上可以看出来，假如不停的删除或添加li，则function（）也要不停的更改操作，易出错，因此推荐使用事件代理，在使用事件代理之前，我们先来了解一下事件阶段(event phase)：
事件阶段：当一个DOM事件被触发的时候，他并不是只在它的起源对象上触发一次，而是会经历三个不同的阶段。简而言之：事件一开始从文档的根节点流向目标对象(捕获阶段)，然后在目标对向上被触发(目标阶段)，之后再回溯到文档的根节点(冒泡阶段)如图所示（图片来自W3C）：
事件捕获阶段(Capture Phase)事件的第一个阶段是捕获阶段。事件从文档的根节点出发，随着DOM树的结构向事件的目标节点流去。途中经过各个层次的DOM节点，并在各节点上触发捕获事件，直到到达时间的目标节点。捕获阶段的主要任务是简历传播路径，在冒泡阶段，时间会通过这个路径回溯到文档根节点。
element.removeEventListener(<event-name>,, );
我们通过上面的这个函数来给节点设置监听，可以通过将;设置成true来为事件的捕获阶段添加监听回调函数。在实际应用中，我们并没有太多使用捕获阶段监听的用例，但是通过在捕获阶段对事件的处理，我们可以阻止类似click事件在某个特定元素上被触发。
var form=document.querySeletor("form");
form.addEventListener("click",function(e){
e.stopPropagation();
},true);
如果你对这种用法不是很了解的话，最好还是将设置为false或者undefined，从而在冒泡阶段对事件进行监听。
目标阶段(Target Phase)当事件到达目标节点时，事件就进入了目标阶段。事件在目标节点上被触发，然后逆向回流，知道传播到最外层的文档节点。
对于多层嵌套的节点，鼠标和指针事件经常会被定位到最里层的元素上。假设，你在一个div元素上设置了click的监听函数，而用户点击在了这个div元素内部的p元素上，那么p元素就是这个时间的目标元素。事件冒泡让我们可以在这个div或者更上层的元素上监听click事件，并且时间传播过程中触发回调函数。
冒泡阶段(Bubble Phase)事件在目标事件上触发后，并不在这个元素上终止。它会随着DOM树一层层向上冒泡，直到到达最外层的根节点。也就是说，同一事件会一次在目标节点的父节点，父节点的父节点...直到最外层的节点上触发。
绝大多数事件是会冒泡的，但并非所有的。具体可见：规范说明
由上我们可以想到，可以使用事件代理来实现对每一个li的监听。代码如下：
window.onload=function(){
var ulNode=document.getElementById("list");
ulNode.addEventListener("click",function(e){
if(e.target&&e.target.nodeName.toUpperCase()=="LI"){/*判断目标事件是否为li*/
alert(e.target.innerHTML);
}
},false);
};
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/85568.html
摘要：原文地址事件代理和委托在中这个词经常出现，看字面的意思，代理委托。模型将事件处理流程分为三个阶段一事件捕获阶段，二事件目标阶段，三事件起泡阶段。事件目标当到达目标元素之后，执行目标元素该事件相应的处理函数。 原文地址：JavaScript 事件代理和委托 在javasript中delegate这个词经常出现，看字面的意思，代理、委托。那么它究竟在什么样的情况下使用？它的原理又是什么？在...
摘要：事件委托事件代理高级程序设计上解释事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。事件委托原理事件委托是利用事件的冒泡原理来实现的，事件冒泡就是事件从最深的节点开始，然后逐级向上传播事件。 js 事件委托 事件代理 JavaScript高级程序设计上解释：事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。 通过例子类比： 有...
摘要：开玩笑啦，提供一种方法叫做事件委托。途中经过各个层次的，并在各上触发捕获事件，直到到达时间的目标。懂得了事件冒泡的过程，就很容易明白事件委托的运作原理。 首先祝大家七夕快乐。。假如现在有一个的列表，里面可能会有若干个列表项。现在要为每一个列表项绑定相同的点击事件，现在你可能会有这几种做法： 手动为每一个列表项绑定事件； 在onload的时候，找到该列表，对其每一个子元素进行遍历，循环...
摘要：本文要解释一下事件的代理或者说委托的概念，首先直接上定义事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。这种委托父元素执行事件，并利用事件冒泡的原理执行子元素相应函数的方法就叫事件的代理，或者叫事件的委托。 本文要解释一下JavaScript事件的代理或者说委托的概念，首先直接上定义：事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的...
摘要：可选，布尔值，指定事件是否在捕获或冒泡阶段执行，默认冒泡。适用范围参数介绍必须，字符串，事件名称。必须，指定事件触发时执行的函数。事件冒泡事件冒泡与事件捕获恰恰相反，事件冒泡顺序是由内到外进行事件传播，直到根节点。 什么是事件 javascript与HTML之间交互就是通过事件实现的，事件就是文档或浏览器窗口中发生的一些特定的交互瞬间。事件在浏览器中是以对象的形式存在的，即event，...
阅读 2044·2021-09-07 10:14
阅读 1481·2019-08-30 15:53
阅读 2273·2019-08-30 12:43
阅读 2863·2019-08-29 16:37
阅读 755·2019-08-26 13:29
阅读 2002·2019-08-26 13:28
阅读 439·2019-08-23 18:33
阅读 3501·2019-08-23 16:09
