用Javaｓｃｒｉｐｔ捕获/停止捕获、冒泡停止冒泡法
事件流描述了从页面接收事件的顺序，事件流的概念是IE和Netscape，但前者是我们常用的事件冒泡流，后者是事件捕获流。第一部分：事件泡沫。
那就是，事件开始在最具体的元素接收，然后向上传播到更多的非特定的节点（文件）。
下面是一个简单的例子：
泡沫
按钮{
背景：红色；
颜色：白色；
}
#第三{
宽度：50px；
身高：50px；
边界：薄而坚实的红色；
}
#二{
宽度：100px；
身高：100px；
边界：薄而坚实的红色；
}
#第一{
宽度：200px；
身高：200px；
边界：薄而坚实的红色；
}
事件冒泡
document.getelementbyid（按钮）。AddEventListener（单击
警报（）；
}，假）；
document.getelementbyid（第三）AddEventListener（单击。
警报（第三）；
}，假）；
document.getelementbyid（二）。AddEventListener（单击
警报（）；
}，假）；
document.getelementbyid（第一），AddEventListener（单击
警报（）；
}，假）；
在这一点上，我们只单击按钮元素，其效果如下：
可以看出，虽然我们只单击按钮元素，但第三、第二和第一个外部按钮上的事件从内部到外部触发，触发顺序从DOM树的底部到DOM树的顶部，所以称为气泡。
（注：虽然我使用DOM2级事件处理程序，并建立每一件泡沫阶段，即使我用做水平，结果都是一样的，泡沫是默认的。
但如果我们不想让事情发生泡沫呢那么如何阻止事件冒泡呢
事实上，该事件的对象有（）里面来阻止事件冒泡法。我们只需要在最后一个例子中修改按钮事件处理程序如下：
document.getelementbyid（按钮）。AddEventListener（单击
警报（）；
event.stoppropagation（）；
}，假）；
这样，单击按钮后，弹出窗口就会弹出，按钮就会显示出来。
注意：所有的现代浏览器都支持事件冒泡，但在实现上有一些差异。
第二部分：事件捕获
事件捕获和事件泡沫正好相反。事件捕获意味着一个不太特定的节点应该接收到较早的事件，最具体的节点最终应该接收到事件：
泡沫
按钮{
背景：红色；
颜色：白色；
}
#第三{
宽度：50px；
身高：50px；
边界：薄而坚实的红色；
}
#二{
宽度：100px；
身高：100px；
边界：薄而坚实的红色；
}
#第一{
宽度：200px；
身高：200px；
边界：薄而坚实的红色；
}
事件冒泡
document.getelementbyid（按钮）。AddEventListener（单击
警报（）；
}，真的）；
document.getelementbyid（第三）AddEventListener（单击。
警报（第三）；
}，真的）；
document.getelementbyid（二）。AddEventListener（单击
警报（）；
}，真的）；
document.getelementbyid（第一），AddEventListener（单击
警报（）；
}，真的）；
你可以看到这个例子。我刚修改addEventListener的第三个参数（）从前面的例子的正确方法，即通过捕捉模式按钮。
我们可以看到最外层的事件首先被触发，最后我们触发的按钮事件被触发，这就是事件捕获。
那么我们怎样才能阻止这一事件的发生呢你用event.stoppropagation（）方法答案是否定的，你知道的，这里面（）方法只能防止起泡的事件，而不是事件捕获。
但我们可以使用DOM3级新事件stopimmediatepropagation（）来防止事件的捕获方法，该方法也可以阻止事件冒泡。应用如下：
document.getelementbyid（二）。AddEventListener（单击
警报（）；
event.stopimmediatepropagation（）；
}，真的）；
通过这种方式，您可以停止在id中捕获事件以获得第二次。
注意：尽管这是由Netscape导航器提出的事件流，但是所有浏览器都支持这个事件流模型，但是因为旧浏览器不支持它，所以很少有人使用事件来捕获它们。
第三部分：DOM事件流
时间流中规定DOM2级事件由三个阶段组成：
事件捕获阶段
在目标阶段
事件冒泡阶段
注意：在DOM事件流中，实际的目标不会在捕获阶段接收到事件，而下一个阶段是在目标阶段，当事件被触发并最终进入冒泡阶段时，我们认为目标阶段是事件冒泡阶段的一部分。
以上是本文的全部内容，希望能对您有所帮助，希望大家多多支持。