首页 > 代码库 > 事件冒泡与捕获

事件冒泡与捕获

相信很多对javascript 不熟悉的人 ,对这两个概念很陌生,不知道是什么东西。

但我们用js写的没一句代码都离不开他,也就是它们一直是存在的 只是我们不知道而已。

首先事件我们都知道是什么意思,说白了就是用户的操作,比如 click mouseover 之类的,这叫做事件。

比如有个按钮 我们点击它之后,你以为你只是点击了这个按钮吗? 不是的,浏览器可能还认为你不光点了按钮  还点击了按钮所在的容器

甚至于整个html,但是他会匹配一个最具体的元素,从它开始 按DOM结构将这个单击事件向上传递,直到最顶端的document对象 (也有浏览器是window对象),

由于这个过程很像气泡一样逐渐向上升 所以就叫事件冒泡。

ok,事件冒泡至最顶端后冒泡事件就消失了,你不能只上去不下来啊  对吧。dom收到事件在原路传下来 这个过程叫捕获。你可以理解为是这个事件跑了一个来回趟。

可能还会有这样的可能,我点击了一个按钮 ,我只想让这个事件只在这个按钮上有效,不要他往上走了。这时候我们就可以阻止冒泡了

javascript提供了stopPropagation()方法 来阻止事件冒泡。用当前事件来调用 event.stopPropagation();

当然你也可以return false 这样连你自身的事件也阻止了。

阻止事件冒泡的用途一半是 怕某些元素的事件会影响到其他的事件。

举一个很形象的例子,比如你做了一个事件,就相当于你上诉了一个案子,先是向镇级反应,镇里不处理,继续向县级反应,又不处理,市里,省里,只至党中央,这是事件冒泡

党中央你不能再不管了吧,党中央处理完了,你得给个结果啊,然后这个结果在沿着省里 市里 县里 镇里 这样一级一级的下来 直到你手里,这是事件捕获。

如果在县里的时候 县里给你处理了 那你还需要往上反应吗,这时候就不需要了。也就是阻止冒泡了。

早期版本的的ie浏览器 和netpace 对冒泡的执行是相反顺序来的,是先从最上层开始 向下找。找到了然后冒泡上来,就像你往河里扔了块石头,先沉下去在冒个泡上来。

不过这种机制已经被淘汰了。

以上纯属个人理解,如有错漏,还请指正!

 

事件冒泡与捕获