写过js的人我想应该都遇到过事件冒泡这个问题。那到底什么是事件冒泡呢?今天我用我的理解,通俗浅显的来讲一下我理解的jquery事件冒泡。
冒泡这个名词应该不陌生,见过水的人应该都有一个很直观的印象,就是气泡从水底向水面移动,并且越来越大,直到冒出水面破裂的过程。其实事件冒泡与此现象基本类似。
首先事件冒泡也是自下而上,不断扩大。简单的解释一下吧,就是在子元素和父元素上都定义了同一事件,比如click事件,当我们点击子元素的时候,会同时触发该元素以及拥有同一事件的该元素的所有父元素,并且会从该元素开始,向上一级一级的执行其定义的事件函数。
这里又涉及到两种情况:
默认事件,比如a标签
特殊事件,比如click
既然提到事件冒泡,我们不妨谈谈如何阻止事件冒泡吧,因为事实上它对我们的操作是有反作用的。
阻止事件冒泡的方式有三种:
event.stopPropagation();
这种处理方式,阻止了事件冒泡,但是不会阻止默认行为。也就是说可以阻止click等事件,但是不会阻止a这样的点击跳转的默认行为。
2. return false;
这种处理方式,既阻止了事件冒泡,也会阻止浏览器默认行为。也就是说click事件不会响应,a标签也不会跳转。
3.event.preventDefault();
这种处理方式,只阻止默认行为,不阻止特定事件。也就是说a不会跳转,click事件无法阻止。
不知道我讲得够不够清楚,不明白也不要紧,我会在后面以视屏的方式给大家演示加讲解来让大家更加明白事件冒泡的真正含义和阻止事件冒泡的方式以及不同方式所产生的实际效果的。
网友评论