jQuery 事件冒泡解释

官方解释：

在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。

草根解释：

当我们在某一个元素上去触发一个事件时，比如鼠标移动事件，该元素所绑定的事件也会影响到其子元素，或者是在某一元素上触发事件时，该元素绑定的事件也会影响到其父元素，甚至又可以能直接影响到顶级父元素，这种现象就叫做”事件冒泡“。之所以称之为事件冒泡是指事件的响应会像水泡一样上升至最顶级对象。

事件冒泡示例

如果我们在一个页面中定义了多个事件，比如鼠标点击事件，而且这些事件所绑定的元素是嵌套关系的话，就会出现事件冒泡的现象，具体代码如下：

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<script src="jquery.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				$("body").click(function(){
					alert("aaa");
				});
				$("div").click(function(){
					alert("bbb");
				});
				$("a").click(function(){
					alert("ccc");
				});
			});
		</script>
	</head>
	<body>
		<div>
			<a href="javascript:;">点击按钮</a>
		</div>
	</body>
</html>

上面代码中共有三个事件，分别是：body、div、a标签都绑定了点击事件，在页面中当单击a标签会连续弹出3个提示框，这就是事件冒泡引起的现象。弹框的顺序分别为：ccc、bbb、aaa，说明事件冒泡的过程是：a --> div --> body 。a冒泡到div冒泡到body。

事件冒泡的作用

事件冒泡允许多个操作被集中处理（把事件处理器添加到一个父级元素上，避免把事件处理器添加到多个子级元素上），它还可以让你在对象层的不同级别捕获事件。

阻止事件冒泡

说明：

本来在上面的代码中只想触发<a>元素的onclick事件，然而<div>,<body>事件也同时触发了。因此我们必须要对事件的作用范围进行限制。当单击<a>元素的onclick事件时只触发<a>本身的事件。由于IE- DOM和标准DOM实现事件对象的方法各不相同，导致在不同浏览器中获取事件的对象变得比较困难。如果想阻止事件的传递，我们可以用event.stopPropagation() 阻止事件的传递行为。

方法一：使用stopPropagation()函数

代码示例：

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				$("body").click(function(){
					alert("aaa");
				});
				$("div").click(function(e){
					alert("bbb");
					//阻止冒泡
					e.stopPropagation();
				});
				$("a").click(function(){
					//不阻止冒泡
					alert("ccc");
				});
			});
		</script>
	</head>
	<body>
		<div>
			<a href="javascript:;">点击按钮</a>
		</div>
	</body>
</html>

上面代码中，对<div>阻止了事件冒泡，点击超链接后，只会弹出显示ccc和bbb的弹框，说明事件冒泡到div层就被阻止掉了，不会再向外层继续冒泡。

方法二：使用return false阻止冒泡

代码示例：

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				$("body").click(function(){
					alert("aaa");
				});
				$("div").click(function(){
					alert("bbb");
					//阻止冒泡
					return false;
				});
				$("a").click(function(){
					//不阻止冒泡
					alert("ccc");
				});
			});
		</script>
	</head>
	<body>
		<div>
			<a href="javascript:;">点击按钮</a>
		</div>
	</body>
</html>

上面的代码效果和方法一是一样的，在jQuery中event.stopPropagation()和return false 两个方法对冒泡阻止效果是一样的。

mouseenter()与mouseover() 事件的区别

mouseenter 事件只在鼠标移动到选取的元素上时触发（不存在事件冒泡），mouseover 事件在鼠标移动到选取的元素及其子元素上时触发（存在事件冒泡）。
代码示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"> 
        <script src="jquery.min.js"></script>
        <script>
            x=0;
            y=0;
            $(document).ready(function(){
              $("div.over").mouseover(function(){
                $(".over span").text(x+=1);
              });
              $("div.enter").mouseenter(function(){
                $(".enter span").text(y+=1);
              });
            });
        </script>
    </head>
    <body>
        <div class="over" 
             style="background-color:lightgray;padding:20px;width:250px;float:left">
            <h3 
                style="background-color:white;">
                Mouseover 事件触发: 
                <span></span
             ></h3>
        </div>
        <div class="enter" 
             style="background-color:lightgray;padding:20px;width:250px;float:right">
            <h3 
                style="background-color:white;">
                Mouseenter 事件触发: 
                <span></span>
            </h3>
        </div>
    </body>
</html>

上面代码中，当鼠标移入Mouseover所在元素及其子元素时，就会触发mouseover事件，是存在事件冒泡的。而当鼠标移入Mouseenter所在的元素时，触发了mouseenter事件，但是鼠标移入其子元素<span></span>时，就没有触发mouseenter事件，证明是不存在事件冒泡的。

mouseleave()与mouseout() 事件的区别

mouseout 事件在鼠标离开任意一个子元素及选的元素时触发（存在事件冒泡），mouseleave 事件只在鼠标离开选取的的元素时触发（不存在事件冒泡）。
代码示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"> 
        <script src="jquery.min.js"></script>
        <script>
            x=0;
            y=0;
            $(document).ready(function(){
              $("div.over").mouseout(function(){
                $(".over span").text(x+=1);
              });
              $("div.enter").mouseleave(function(){
                $(".enter span").text(y+=1);
              });
            });
        </script>
    </head>
    <body>
        <div class="over" 
             style="background-color:lightgray;padding:20px;width:250px;float:left">
            <h3 
                style="background-color:white;">
                Mouseout 事件触发: 
                <span></span
             ></h3>
        </div>
        <div class="enter" 
             style="background-color:lightgray;padding:20px;width:250px;float:right">
            <h3 
                style="background-color:white;">
                Mouseleave 事件触发: 
                <span></span>
            </h3>
        </div>
    </body>
</html>

上面代码中，当鼠标移出Mouseout所在元素及其子元素时，就会触发mouseout事件，是存在事件冒泡的。而当鼠标移出Mouseleave所在的元素时，触发了mouseleave事件，但是鼠标移出其子元素<span></span>时，就没有触发mouseleave事件，证明是不存在事件冒泡的。

总结

事件冒泡是浏览器中的默认行为，比如触发一个元素绑定的事件，如果其父元素或子元素也有同样的事件绑定，那么事件就会一层一层的去执行，我们把这种行为称为”事件冒泡“。阻止浏览器事件冒泡可以使用event对象中的 event.stopPropagation() 方法或者是直接在事件的回调函数中返回false。

在使用鼠标移入移出事件时，根据业务的实际需求，来选择不同的事件方法。如果需要事件冒泡，就可以使用mouseover和mouseout事件，如果不需要事件冒泡，就可以使用mouseenter和mouseleave事件。

jQuery 事件冒泡