聊一聊JQ中delegate事件委托的好处
来源:互联网 发布:能写出这样的句子 知乎 编辑:程序博客网 时间:2024/05/15 11:57
下面举个例子
我们希望通过点击使得点击的li标签变红
HTML
<body style="height:2000px;"><ul> <li>1111</li> <li>1111</li> <li>1111</li> <li>1111</li></ul></body>
普通写法
$(function(){ $('li').on('click',function(){ $(this).css('background','red'); });});
事件委托写法
$(function(){ $('ul').delegate('li','click',function(ev){ $(this).css('background','red'); });});
我们发现以上两种方法都可以使所点击的li标签变红,效果上没有区别,
但是普通写法on是将事件加到li标签上面,
而事件委托delegate写法事件并没有加到li上面,而是加到了ul的上面,是$(this)触发的时候指向了li;利用了冒泡原理。
事件委托的好处:
1、原本需要给多个元素添加,现在只需要给一个元素添加,性能上比较好些。
2、对后续创建生成的元素可以直接操作,而on事件不可用。
例如:
当点击按钮的时候,想ul里面创建一个li标签
<body style="height:2000px;"><input id="input1" type="button" value="添加"><ul> <li>1111</li> <li>1111</li> <li>1111</li> <li>1111</li></ul></body>
$(function(){ $('li').on('click',function(){ $(this).css('background','red'); });//对于新创建添加的li标签点击无变化 $('ul').delegate('li','click',function(ev){ $(this).css('background','red'); //$(ev.delegateTarget).css('background','red'); //委托对象ul $(ev.delegateTarget).undelegate();//取消委托 });//新创建添加的li标签也可以变红 //原因在于事件原本就不在li上面,新创建的和原本有的没有区别,真正的事件是在ul身上,只要ul不变,ul里面元素的事件都是可以触发的 $('#input1').click(function(){ var $li = $('<li>hello</li>');//创建li标签 $('ul').append( $li ); }); });
0 0
- 聊一聊JQ中delegate事件委托的好处
- jq中绑定事件bind(),live(),delegate(),on()的优缺点
- Javascript中事件委托(delegate)是如何运行的
- C#中Delegate委托事件详细介绍
- JavaScript的事件委托及好处
- C#的委托(Delegate)和事件(Events)
- JS的事件委托/代理(delegate)
- 事件和委托Delegate
- unity delegate事件委托
- 关于C#.Net中事件(event)、委托(delegate)和方法的一点理解
- 在Unity中使用事件/委托机制(event/delegate)进行GameObject之间的通信
- C++中delegate(委托)的实现
- C#中Delegate委托的使用
- iOS中delegate(委托)的使用
- C#中委托(Delegate)
- 事件(event)与委托(delegate)
- 委托(delegate)和事件(event)
- Delegate委托 和 Event事件
- JAVA进阶6.5——线程的让步与阻塞
- 10.3 弱校 D Parentheses 思维题
- 【软考】IP地址的分类以及子网的划分
- 玩转矩阵的C小加
- cv2.imread(path)读取图片时,中文路径引起错误
- 聊一聊JQ中delegate事件委托的好处
- 开始博客的第一天
- Hadoop(17) MR 决定Mapper数量因素
- Android官方开发文档Training系列课程中文版:线程执行操作之线程池操作
- 快速提高编程能力——一年时间可以改变很多事
- Android 开发中Layout_Margin与padding的区别以及Layout_gravity与gravity的区别
- Visual Studio 2015,换个环境,换种心情
- Java-IO之PrintStream(打印输出流)
- 回溯法 之 八皇后问题