聊一聊JQ中delegate事件委托的好处

最新推荐文章于 2022-08-26 18:35:25 发布

xyphf_和派孔明

最新推荐文章于 2022-08-26 18:35:25 发布

阅读量2.3k

点赞数 1

分类专栏： DOM&BOM操作 Java全栈之路

本文链接：https://blog.csdn.net/xyphf/article/details/52729178

版权

DOM&BOM操作同时被 2 个专栏收录

64 篇文章 0 订阅

订阅专栏

Java全栈之路

55 篇文章 11 订阅

订阅专栏

下面举个例子
我们希望通过点击使得点击的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 );      
    }); 
});

xyphf_和派孔明

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
聊一聊JQ中delegate事件委托的好处

下面举个例子我们希望通过点击使得点击的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',functio
复制链接

扫一扫