小米购物车
<!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>