* 事件委托(事件代理)
* 利用事件的冒泡传播机制,如果一个容器的后代元素中,很多元素的点击行为(其它事件行为也是)都要做一些处理,此时我们不需要在像以前一样一个个获取一个个的绑定了,我们只需要给容器的CLICK绑定方法即可,这样不管点击的是哪一个后代元素,都会根据冒泡传播的传递机制,把容器的CLICK行为触发,把对应的方法执行,根据事件源,我们可以知道点击的是谁,从而做不同的事情即可
分类导航
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>购物车导航</title>
<link rel="stylesheet" href="css/reset.min.css">
<style>
.shop {
margin: 20px auto;
width: 200px;
height: 50px;
}
.shop .shopLink {
position: relative;
display: block;
height: 50px;
line-height: 50px;
background: lightblue;
text-align: center;
}
.shop .shopLink .shopList {
display: none;
position: absolute;
top: 50px;
left: 0;
width: 400px;
height: 100px;
line-height: 100px;
text-align: center;
background: lightcoral;
}
.shop .shopLink:hover .shopList {
display: block;
}
</style>
</head>
<body>
<div class="shop">
<a href="javascript:;" class="shopLink">
我的购物车
<!--基于CSS完成显示隐藏,需要保证列表是A的子元素,这样从A进入到列表不算离开A,这样列表就不会消失了-->
<div class="shopList">
购物车列表
</div>
</a>
</div>
</body>
</html>
分类菜单
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>分类菜单</title>
<link rel="stylesheet" href="css/reset.min.css">
<style>
html, body {
height: 100%;
overflow: hidden;
}
.menuBox {
margin: 20px auto;
width: 700px;
height: 270px;
border: 1px solid #000;
}
.navBox {
float: left;
width: 200px;
background: lightblue;
}
.navBox ul li {
height: 30px;
line-height: 30px;
}
.navBox ul li a {
display: block;
padding: 0 10px;
height: 100%;
font-size: 14px;
color: #555;
}
.navBox ul li a:hover {
background: lightcoral;
}
.detailBox {
display: none;
float: left;
width: 500px;
height: 100%;
background: #EEE;
font-size: 20px;
}
</style>
</head>
<body>
<section class="menuBox">
<nav class="navBox">
<ul>
<li><a href="#" target="_blank">导航1</a></li>
<li><a href="#" target="_blank">导航2</a></li>
<li><a href="#" target="_blank">导航3</a></li>
<li><a href="#" target="_blank">导航4</a></li>
<li><a href="#" target="_blank">导航5</a></li>
<li><a href="#" target="_blank">导航6</a></li>
<li><a href="#" target="_blank">导航7</a></li>
<li><a href="#" target="_blank">导航8</a></li>
<li><a href="#" target="_blank">导航9</a></li>
</ul>
</nav>
<div class="detailBox">导航1对应的详情内容</div>
</section>
<script src="js/jquery-1.11.3.min.js"></script>
<script>
//=>基于事件委托给最外层的盒子的MOUSE-OVER绑定方法,这样不管操作后代元素中的谁的MOUSE-OVER,这个方法都会执行
let $detailBox = $('.detailBox');
$(document.body).on('mouseover', function (ev) {
let target = ev.target,
tag = target.tagName,
$target = $(target),
$pars = $target.parents();//=>获取当前事件源的祖先元素
//=>如果事件源是NAV-BOX中的A或者LI(让DETAIL-BOX显示)
let flag = $pars.filter('.navBox').length > 0 ? true : false;//=>TRUE祖先中包含NAV-BOX,FALSE则相反
if ((tag === 'A' || tag === 'LI') && flag) {
let val = $target.text().match(/\d+/);
$detailBox.css('display', 'block').html(`导航${val}对应的内容`);
return;
}
/*//=>如果事件源是DETAIL-BOX或者是它的后代元素,不做处理
if ($target.hasClass('detailBox') || $pars.filter('.detailBox').length > 0) {
return;
}*/
$detailBox.css('display', 'none');
});
$detailBox.on('mouseover', function (ev) {
ev.stopPropagation();
});
</script>
</body>
</html>