jquery事件代理方法

最新推荐文章于 2024-02-05 22:26:35 发布

木木格里

最新推荐文章于 2024-02-05 22:26:35 发布

阅读量7k

点赞数

分类专栏： jquery 文章标签： jquery

本文链接：https://blog.youkuaiyun.com/qq_36545656/article/details/53316054

版权

jquery 专栏收录该内容

13 篇文章

订阅专栏

本文介绍了如何在jQuery中使用事件代理，通过示例展示了如何为HTML列表项动态添加点击事件，从而实现高效和灵活的事件处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

之前写过原生js的事件代理，最近在用jquery写项目，自然少不了事件代理，所以今天就来写下jquery的事件代理：

例如下面的例子：用事件代理的方法给每个li都添加一个点击事件，

HTML代码：

<ul>
<li>one</li>

<li>two</li>




<li>three</li>



<li>four</li>
<ul>



实现功能：当点击每个子元素时，被点击的元素就会消失；

js代码：
$('ul').on('click','li',function(e){
      console.log(e.target);
      this.remove();
})




例子2：


为了减少代码冗余，重复写这段代码，我特意尝试将封装了一个事件代理，下次若再使用类似功能的事件代理，只用调用这个函数就可以；
如下：实现鼠标放在li上时，添加背景色：
CSS样式：
 *{margin:0;padding: 0}
        .rcmd{margin:50px 100px;position: relative}
        ul{
            position: absolute;
            top:30px;
            list-style: none;
            width: 100px;
            border:1px solid #e3e3e3;
            border-radius: 10px;
        }
        li{width: 80px; margin:10px;  text-align: center;  }
        span{
            display: inline-block;
            width: 100px;
            height: 30px;
            border-radius:5px;
            background: palevioletred;
            text-align: center;
            line-height: 30px;
        }





HTML代码：
<div class="rcmd">
          <span>Recommend</span>
          <ul class="rcmd-list" style="display:none;" >
               <li><a>Recommend</a></li>
               <li><a>Online</a></li>
               <li><a>Latest</a></li>
          </ul>
 </div>


JS代码：
 function evtagent(e){
        $(e).on('mousemove','li',function(e){
               console.log(e.target.parentNode);
            $(this).css({"background":"rgb(238,238,246)"});
        });
        $(e).on('mouseout','li',function(e){
            $(this).css({"background":"white"});
        });
    }
调用函数evtagent();

给div添加一个悬浮出现下拉列表的效果，当鼠标指针移动到列表里的子元素时，会给该子元素添加背景色；
 $('.rcmd').hover(function(){
        $('.rcmd-list').show('slow','linear',function(){
            //调用事件代理
            evtagent('.rcmd-list');
          
        });
    },function(){
        $('.rcmd-list').hide('slow','linear',function(){
        });
    });


运行不成功？是不是忘记引入jquery外部文件了。。