jquery事件代理方法

之前写过原生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外部文件了。。


                                             
        0        0           
	
				
	
					   
jquery事件代理方法
	  	   
jquery 事件代理
	  	   
读懂jquery事件代理
	  	   
Jquery学习之事件代理
	  	   
jQuery事件代理的应用
	  	   
【jQuery 事件】事件 change() 方法
	  	   
原生js 事件代理方法
	  	   
JQuery-- 事件方法
	  	   
JQuery--事件方法2
	  	   
jQuery 事件方法
	  	   
jquery 事件方法总结
	  	   
jquery 事件方法总结
	  	   
jquery 事件方法总结
	  	   
jQuery 事件 - ready() 方法
	  	   
JQuery事件方法汇总
	  	   
jQuery 事件 - bind() 方法
	  	   
jQuery 事件 - die() 方法
	  	   
jQuery 事件方法
	     		  
	  	   
C++ const
	  	   
Ajax工作原理
	  	   
java wait()和sleep()的区别
	  	   
MFC界面库
	  	   
C#中操作Excel（5）—— 操作Excel的两种技术（一）--COM技术
	  	   
jquery事件代理方法
	  	   
印制线路板的制造原理简介
	  	   
自己的shell
	  	   
window开机 关机 记录日志
	  	   
HttpServlet源码
	  	   
dubbo 注解与spring 事务注解冲突完美解决方案
	  	   
velocity列表标签，velocity标签列表
	  	   
select2没有默认选择项
	  	   
【玩转SQLite系列】(四)通过Android提供的API操作SQLite数据库