JavaScript进阶（四十三）：捕获，srcElement

这篇博客，我们先来说说事件流这个东西。

首先，我们前面博客说的那个冒泡，它就是事件流里面的一部分。

然后除了冒泡以外，其实还有另一个东西，叫做捕获。

简单来说，冒泡是从下往上，从子级往父级。而捕获，是从上往下。

 

当然，正常的情况下，如果我们用 onclick 之类的去加东西，是看不到捕获的，只有在一种情况下能看到，就是在你去用 addEventListener 去做事件绑定的时候才能看到。

比如，我们现在有个 div，里面有个 button：

正常的情况下，我们知道应该是按钮点击完，事件传给父级 div，但是现在我们要做一个不一样的事。

首先，addEventListener 有三个参数：

第一个是事件名。

第二个是事件触发时执行的函数。

第三个参数，也就是我们平常给 false 的东西，它其实管的就是事件捕获还是事件冒泡。

 

false 就是很正常的冒泡，比如我们现在就来做个小例子：

然后当我们点击的时候，你可以看到，先有 button，再有 div，这个很正常。

然后反过来，我们给它一个 true：

那么有了 true 之后，你就可以看到，先有 div，再有 button。

当然，说的更直接一点，其实捕获和冒泡，它们两个是共存的。

什么意思呢？

比如下面图中的方块，就是一级一级的元素：

它是先从上往下走：

就是说，它是先经过一个捕获的流程。

然后捕获完了之后，再从下往上走：

它是有前后顺序的，说白了就是先捕获，再冒泡，所以这个东西其实有一个挺好玩的用处。

就是说，有的时候，比方说我需要在父级，去处理它里面所有的事件，这种情况是存在的，我在整个父级去处理它内部的事件。

那么在这种情况下呢，就会出现一个情况，就是说我父级把这事处理完了之后，子级其实是不需要知道这个事件的。

那么在这种情况下，我们就可以用这个事件捕获了。

不过这种情况，其实出现的比较少，所以说我们一般也不太会用到它。

 

然后接下来，我现在想做一个事，我希望只有 div 响应这个事件，button 不要得到这个事件。

那么这时候，我们会很自然的想到一个 cancelBubble：

可以看到，现在就只有 div 了。

所以尽管它的名字叫做 cancelBubble，但它也能用来取消事件捕获。

当然，stopPropagation 也是可以的，因为 Propagation 本身的含义翻译过来就是传播的意思，stopPropagation 也就是停止传播。

但是 cancelBubble 是全兼容的，所以我们可以直接忘掉 stopPropagation。

 

然后，比方说我想在 div 上来处理所有的事件，但是我还得知道一件事，到底用户点的是谁，我得知道才能去做事。

所以这时候，我还需要一个东西，就是 srcElement，意思就是最原本的，是谁在触发这个事件。

那么你可以看到，当我们点这个 div 的时候，它告诉我们是 button。所以，我们依然可以知道是谁在触发事件。

以及，我们有些时候 ，会在一个叫做事件委托的机制下去使用它，就会很方便，这样做的目的主要是为了优化性能。

你可以想象，如果我每个元素都加一堆事件，那这个时候开销会比较大。

而如果我在最顶层，比方说我们在最顶层的实例上加一个事件，事情就会变的很方便了。

 

本文地址：https://blog.csdn.net/weixin_43921436/article/details/107813266