小米购物车
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<title>小米购物车</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
.shopCart{
position: absolute;
height: 50px;
width: 100px;
background: #ff6700;
cursor: pointer;
top:100px;
left: 500px;
text-align: center;
line-height: 50px;
}
.content{
position: relative;
height: 200px;
width: 500px;
background: #2aabd2;
display: none;
}
</style>
</head>
<body>
<div>
<div class="shopCart">购物车
<div class="content"></div>
</div>
</div>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function (e) {
/*
$('.shopCart').mouseenter(function (e) {
$('.content').stop().slideDown(500);
e.stopPropagation();
});
$('.shopCart').mouseleave(function (e) {
$('.content').stop().slideUp(500);
e.stopPropagation();
});
*/
// 合成事件 mouseenter mouseleave hover(funOver,funOut)
$('.shopCart').hover(function (e) {
$('.content').stop().slideDown(500);
e.stopPropagation();
},function (e) {
$('.content').stop().slideUp(500);
e.stopPropagation();
});
})
</script>
</body>
</html>
事件委托
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<title>事件委托</title>
<style type="text/css">
.Box{
position: absolute;
top: 100px;
left: 200px;
height:200px;
width: 300px;
background-color: #ff6700;
}
ul{
position:relative;
list-style: none;
}
li{
position:relative;
cursor: pointer;
top: 20px;
}
</style>
</head>
<body>
<div class="Box">
<button>添加</button>
<ul>
<li>晓钢</li>
<li>晓红</li>
<li>晓名</li>
</ul>
</div>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function (e) {
$('button').click(function (e) {
$('ul').append('<li>晓均</li>');
});
// 么有事件委托的情况下，当新增加元素li时，li不会绑定li的事件
/*
$('li').click(function (e) {
// e.stopPropagation();
alert($(e.target).text());
});
*/
// 用事件委托的情况下，当新增加元素li时，li会绑定li的事件 等于li的事件委托给了ul，
// 不论追加多少li，都会绑定这个委托的事件
$('ul').on('click',$('ul>li'),function (e) {
alert($(e.target).text());
e.stopPropagation();
});
})
</script>
</body>
</html>
