09 jQuery事件委托小米购物车

小米购物车

<!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>

转载于:https://www.cnblogs.com/znyyy/p/11119681.html

09 jQuery事件委托小米购物车相关推荐

jquery事件委托_jQuery事件委托
jquery事件委托 jQuery使JavaScript中的事件处理变得容易. 但是,定义的事件处理程序越多,使用的内存就越多,最终可能会降低性能并导致UI变慢. 本文探讨事件委托如何帮助防止这种情况 ...
jquery 列表hover效果，css :hover ，jquery 事件委托，jquery hover()方法
jquery 列表hover效果 <ul class="list"><li class="item"><span>1< ...
html5 点击事件委托,jquery事件委托
一,.on( events [, selector ] [, data ], handler(eventObject) )// .on( events [, selector ] [, data ] ...
Jquery事件委托之Safari
什么是事件委托事件委托是Jquery中一种事件绑定的方式,不同于常见的事件绑定方式将事件绑定在目标元素上,而是将事件绑定在父级元素上通过事件冒泡来执行绑定函数. //常见的事件绑定(Jquery) ...
js原生事件委托写法，jquery事件委托写法
什么是事件委托: 事件委托--给父元素绑定事件,用来监听子元素的冒泡事件,并找到是哪个子元素的事件.(不理解冒泡的可以去百度下) 定义: 利用事件冒泡处理动态元素事件绑定的方法,专业术语叫事件委托. ...
jquery事件委托off与on连用无效的问题
问题引出: 事件委托是一种非常常用的事件解决方案,也是很多人推荐作为首选的解决方案(事件委托有什么好处,为何推荐,跟本文要说的内容无关,可自行百度).我们在事件处理的时候可能会这么用$selector ...
原生JS及jQuery中事件委托的写法
在绑定节点事件处理程序时遇到的问题: 每个函数都是对象,都会占用内存:内存中的对象越多,性能就越差. 其次,必须事先指定所有事件处理程序而导致的 DOM访问次数,会延迟整个页面的交互就绪时间. 采 ...
Mr.J-- jQuery学习笔记(十一)--事件委托
jQuery事件委托事件委托是利用事件冒泡,只指定一个事件处理程序来管理某一类型的所有事件. 为什么要用事件委托? 1.在JavaScript中添加到页面上的事件处理程序的个数直接关系到页面的整体运 ...
JQuery --- 第三期 (jQuery事件相关)
个人学习笔记 1.JQuery事件绑定 <!DOCTYPE html> <html lang="en"> <head><meta char ...

09 jQuery事件委托小米购物车

小米购物车

事件委托

09 jQuery事件委托小米购物车相关推荐

最新文章

热门文章