js事件代理

js事件代理

想象一下现在我们有一个美女图片的列表页，在这个列表页中有上千个美女的小图片。我们希望点击每一个美女小图片就跳到对应的美女的大图片页，如果把事件处理器加到这上千个美女的小图片的标签上会产生一个很大的性能问题，并且有可能导致内存泄露甚至是浏览器的崩溃。相反地，使用事件代理的话，你只需要把一个事件处理器添加到列表ul上就可以了，这个函数可以把点击事件给截下来，并且判断出是哪个单元格被点击了

  * 那些需要创建的以及驻留在内存中的事件处理器少了。这是很重要的一点，这样我们就提高了性能，并降低了崩溃的风险。
    * 在DOM更新后无须重新绑定事件处理器了。如果你的页面是动态生成的，比如说通过Ajax，你不再需要在元素被载入或者卸载的时候来添加或者删除事件处理器了。

<ul  id="beautityList" >
   <li >
     <a >
       <img _src="https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=473474780,244297065&fm=58" alt="" class="pic">
	</a>
	<p class="fan">范冰冰 <span class="age">1981</span></p>
	<p >fanbingbing<span></span><em class="bingbing"></em></p>
   </li>
   <li >
	 <a >
	   <img _src="https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=754874951,2913294364&fm=58" alt="" class="pic">
	</a>
	<p class="fan">李冰冰 <span class="age">1973</span></p>
	<p >libingbing<span></span><em class="bingbing"></em></p>
  </li>
			
   ....
</ul>

用js事件代理来实现上面跳到美女大图片的功能

$("#beautityList").click(function( e ){ 
    var e = e || window.event;  
	var Target = e.srcElement || e.target;      // srcElement这个只是支持firefox  
	if( Target.tagName.toUpperCase() == "IMG" || ((Target.tagName.toUpperCase() == "P")&&(Target.className == "fan")) || ((Target.tagName.toUpperCase() == "SPAN")&& (Target.className == "age")) ){
	   alert("点击了美女小图片");
	}
   if(Target.tagName.toUpperCase() == "EM" && Target.className == "bingbing"){
     alert("点击了bingbing标签");
   }
 }