jquery事件委托

最新推荐文章于 2024-10-06 15:00:00 发布

原创最新推荐文章于 2024-10-06 15:00:00 发布 · 492 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#jquery

jquery事件委托

1.什么是事件委托？
事件委托是利用事件冒泡，只指定一个事件处理程序来管理某一类型的所有事件。
通俗的讲，事件就是onclick，onmouseover，onmouseout，等就是事件，委托呢，就是让别人来做，这个事件本来是加在某些元素上的，然而你却加到别人身上来做，完成这个事件。

2.比如以下代码：

<div class="left">
    <ul>
        <li><a href="">菜单项01</a></li>
        <li><a href="">菜单项02</a></li>
        <li><a href="">菜单项03</a></li>
        <li><a href="">菜单项04</a></li>
        <li><a href="">菜单项05</a></li>
    </ul>
</div>
    <div class="right">
        <ul>
            
        </ul>
    </div>

    <script>
    $(function (){
 $('.left>ul>li').click(function (){
            $('.right>ul').append($(this))
        })

        $('.right>ul>li').click(function (){
            console.log("====");
            $('.left>ul').append($(this))
        })
        </script>

点击left里面的li元素添加到right里面，然后再点击right里面的li元素添加到left里面。（注意：right里面最开始是没有li元素的），所以从左边点到右边可以，可是从右边点到左边就不行。因为无法为还没有出现的元素绑定事件。
所以需要用到事件委托。

3.事件委托

 $('.right>ul').on('click','li',function(){
            $('.left>ul').append($(this))
        })

为right内的ul绑定事件，点击里面添加进来的li元素就可以转移到左边了。