jQuery 事件冒泡
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。
事件冒泡的作用
事件冒泡允许多个操作被集中处理（把事件处理器添加到一个父级元素上，避免把事件处理器添加到多个子级元素上），它还可以让你在对象层的不同级别捕获事件。
阻止事件冒泡
本来在上面的代码中只想触发元素的onclick事件，然而
方法一：使用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>
上面代码中，对
方法二：使用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>
上面代码中，当鼠标移入Mouseover所在元素及其子元素时，就会触发mouseover事件，是存在事件冒泡的。而当鼠标移入Mouseenter所在的元素时，触发了mouseenter事件，但是鼠标移入其子元素时，就没有触发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事件，但是鼠标移出其子元素时，就没有触发mouseleave事件，证明是不存在事件冒泡的。
总结
事件冒泡是浏览器中的默认行为，比如触发一个元素绑定的事件，如果其父元素或子元素也有同样的事件绑定，那么事件就会一层一层的去执行，我们把这种行为称为”事件冒泡“。阻止浏览器事件冒泡可以使用event对象中的 event.stopPropagation() 方法或者是直接在事件的回调函数中返回false。
在使用鼠标移入移出事件时，根据业务的实际需求，来选择不同的事件方法。如果需要事件冒泡，就可以使用mouseover和mouseout事件，如果不需要事件冒泡，就可以使用mouseenter和mouseleave事件。
- 点赞
- 收藏
- 关注作者
评论（0）