事件委派

2019独角兽企业重金招聘Python工程师标准>>>

事件委派有的叫事件代理还有的叫事件委托

            var big=$(".big")[0]
			var smalls=$(".small")
			var create=$(".create")[0]
			
				big.onclick=function(e){
					var ev=e||window.event;
                    //兼容的获取事件对象,分为ie和现代浏览器
					var val=ev.srcElement||ev.target;
					// alert(val.className)    弹出来试试
					if(val.className=="small"){
						val.style.background="#000"
					}	
				}
			create.onclick=function(){
				var div=document.createElement("div")
				div.className="small";
				big.appendChild(div)
			}

：

    //css
    .big{
		width:500px;
		height:400px;
		background:blue;
	}
	.small{
		width:70px;
		height:70px;
		background:red;
		margin:5px;
		float: left;
	}
	.create{
		width:60px;
		height:30px;
	}

    //html
    <div class="big">
		<div class="small"></div>
		<div class="small"></div>
		<div class="small"></div>
		<div class="small"></div>
		<div class="small"></div>
		<div class="small"></div>
		<div class="small"></div>
	</div>
	<input type="button" class="create" value="创建">

1. 关于事件委派:
2. 获得目标事件源的的对象:
3. Ie:事件对象.srcElement
4. FF:事件对象.target
5. 事件对象.src||事件对象.target（目标源）

   jquery 里面的事件委派:
   /*******使用jquery里面的事件委托来实现以下事件委派********/
   			// 第一步先实现点击创建按钮会创建一个div添加到big div里面
   			$(".create").click(function(){
   			 	var big=$(".big")
   				$("<div class='small'></div>").appendTo(big);
   			 })
   			// 第一种方法通过给父元素加delegate方法
   			 $(".big").delegate(".small","click",function(){
   			 	$(this).css("background","black")
   			 })
               //在某些版本里面还是可以的
   
   
   
   
   
   			// 第二种方法通过live方法
   		
   			$(".small").live("click",function(){
   				$(this).css("background","red")
   			})
               //*经过测试在这个版本里面已经不支持live方法了
   			//在新版本里面不推荐使用bind方法和live 还有delegate方法了
   		
   
   
   
   		
   			//第三种用on的方法来解决事件委派的方法
   			$(".big").on("click",".small",function(){
   			   $(this).css("background","black")
   			})
   /*
   1.提高性能，如果没有事件委派就需要循环给每个元素绑定事件。通过事件委派只给父元素添加就可以
   2.后来追加的元素动态添加的元素也会有事件这点在ajax交互的时候经常用到
   */
   		

    

转载于:https://my.oschina.net/huangwenboweb/blog/785914