在JavaScript中，我们经常会遇到在列表中听多个li的情况。假设我们有如下列表：

复制代码如下： ul id=' list ' Li id=' item 1 ' item 1/Li Li id=' item 2 ' item 2/Li Li id=' item 3 ' item 3/Li Li id=' item 4 ' item 4/Li/ul

如果我们想实现以下功能：当鼠标点击某个li时，alert输出该li的内容，我们通常的写法如下：

当列表项很少时，会有许多onclick事件列表项直接添加到每个li中。在onload期间调用第一个方法来监听每个列表项既简单又直接，但是不建议在不考虑html和JavaScript分离的情况下使用它。第二种方法的代码如下：

复制代码如下：窗口。onload=function () {var UL节点=document。getElementByID(' list ')；var liNodes=ulnode . childnodes | | ulnode . children；for(var I=0；iliNodes.lengthi ){ liNodes[i]。addEventListener('click ')，函数(e){ alert(e . target . innerhtml)；}，false)；}}

从上面可以看出，如果连续删除或添加li，函数()就要不断变化，容易出错。因此，建议使用事件代理。在使用事件代理之前，让我们先了解事件阶段：

活动阶段：

当一个DOM事件被触发时，它不会只在其源对象上被触发一次，而是会经历三个不同的阶段。简而言之：事件从文档的根节点开始到目标对象(捕获阶段)，然后在目标方向触发(目标阶段)，再回到文档的根节点(冒泡阶段)，如图(图片来自W3C):

事件捕获阶段(捕获阶段)

事件的第一阶段是捕获阶段。事件从文档的根节点开始，随着DOM树的结构流向事件的目标节点。在途中，它通过不同级别的DOM节点，并触发每个节点上的捕获事件，直到到达时间的目标节点。捕获阶段的主要任务是简历传播路径。在冒泡阶段，时间将通过这个路径追溯到文档根节点。

复制代码如下：element。removeeventlistener(LTE event-name，callback，use-capture)；

我们使用上面的功能来设置对节点的监控，可以通过设置来实现；设置为true，为事件的捕获阶段添加侦听回调函数。在实际应用中，我们在捕获阶段没有很多监听的用例，但是通过在捕获阶段处理事件，我们可以防止像click这样的事件在特定的元素上被触发。

复制代码如下： var FORMAT=document . queryseltor(' FORMAT ')；form.addEventListener('click ')，函数(e){ e . stopperpagation()；}，真)；

如果不太了解这个用法，最好设置为false或者undefined，这样可以在冒泡的时候监控事件。

目标阶段；目标阶段

当事件到达目标节点时，事件进入目标阶段。事件在目标节点上触发，然后向后流动，直到到达最外面的文档节点。

对于多级嵌套节点，鼠标和指针事件通常位于最里面的元素上。假设您在一个div元素上设置了click listening函数，并且用户在div元素内部点击了p元素，那么此时p元素就是目标元素。事件冒泡允许我们监听这个div或更高级别的元素上的click事件，并在时间传播期间触发回调函数。

气泡阶段(气泡阶段)

在目标事件上触发事件后，它不会在此元素上终止。它将一层一层地与DOM树一起冒泡，直到到达最外面的根节点。也就是说，同一事件将在目标节点的父节点(父节点的父节点)上一次触发.直到最外面的节点。

大多数事件都会冒泡，但不是全部。请参阅：规格说明

从上面我们可以认为事件代理可以用来监控每一个li。代码如下：

复制代码如下：窗口。onload=function () {var UL节点=document。getElementByID(' list ')；Ulnode.addeventlistener ('click ')，函数(e){ if(e . target . nodename . touppercase()==' Li '){/*判断目标事件是否为Li */alert(e . target . innerhtml)；} }，false)；};

以上就是本文的全部内容，希望可以帮助大家熟悉javascript事件的委托和代理。

请花一点时间与你的朋友分享这篇文章或留下评论。我们将真诚感谢您的支持！