下面举个例子
我们希望通过点击使得点击的li标签变红
HTML
|
1 2 3 4 5 6 7 8 |
<body style="height:2000px;"> <ul> <li>1111</li> <li>1111</li> <li>1111</li> <li>1111</li> </ul> </body> |
普通写法
|
1 2 3 4 5 |
$(function(){ $('li').on('click',function(){ $(this).css('background','red'); }); }); |
事件委托写法
|
1 2 3 4 5 |
$(function(){ $('ul').delegate('li','click',function(ev){ $(this).css('background','red'); }); }); |
我们发现以上两种方法都可以使所点击的li标签变红，效果上没有区别，
但是普通写法on是将事件加到li标签上面，
而事件委托delegate写法事件并没有加到li上面，而是加到了ul的上面，是$(this)触发的时候指向了li；利用了冒泡原理。
事件委托的好处：
1、原本需要给多个元素添加，现在只需要给一个元素添加，性能上比较好些。
2、对后续创建生成的元素可以直接操作，而on事件不可用。
例如：
当点击按钮的时候，想ul里面创建一个li标签
|
1 2 3 4 5 6 7 8 9 |
<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> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
$(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 ); }); }); |
