事件委托

在一个小项目中遇到了一个问题：onclick事件需要点击三次才能触发？？
这个bug简直让人不能忍，然后我誓死要改好这个bug...
首先看看我的dom结构吧！

<ul>
<li>......</li>
<li>.......</li>
<li>......</li>
<li>.......</li>
..........
</ul>//就是ul里面有多个li

我所要实现的功能就是给每一个li添加相同的click事件
首先我的li 都是动态添加的，只需要写一个样式然后li里面的内容都是变量，然后循环打印。
react 里面有一个ref属性，通过给某个元素设置ref属性，然后通过refs来找到这个元素，可是我不能给这些li加这个属性，因为这样我所有动态添加的li都带上这个属性的话，最后相当于只能找到最后一个li。也就是每个元素的ref属性值不能相同，否则会覆盖。
那么，我就要换一种方式去找到我每次点击的哪个li啊。。。。
然后我就这样子去找每个点击的li。

var tips=this.refs.tip.getElementsByTagName("li");
         for(let i=0;i<dateAry.length;i++){
             tips[i].onclick=function(event){

                 var tip=this.getElementsByTagName("div")[1];
               if(tip.style.display=="none"){
                     tip.style.display='block';
                 }else{
                     tip.style.display='none';
                 }
                /!* var a=tip.style.display="none";
                 var b=tip.style.display='block';
                 tip.style.display=="none"?b:a;*!/
                 event.stopPropagation();
                 event.preventDefault();
            }
         }

也是因为这样导致我需要点击三下才能触发li的点击事件，通过测试我发现原因：
点击第一次找到了li,第二次给所点击的li添加属性 display:none 第三次改变属性display：block

一.什么是事件委托
事件委托是利用事件冒泡的原理 利用父级去触发子集的事件
如果不用事件委托，将每一个li都去添加click事件监听，非常麻烦。
另外就是如果通过js动态创建的子节点，需要重新绑定事件。
而利用事件委托的话，只需要给父级绑定一个事件监听，即可让每个li都绑定上相应的事件。

把上面的代码经过如下修改，解决了点击三次才触发li点击事件的bug!!!

  var ul=this.refs.tip;
       var target=event.target;
       var detail=null;
       if(target.tagName.toLowerCase() == 'div'){
            detail=target.parentNode.childNodes[1];
           if(detail.style.display=="block"){
               detail.style.display='none';
           }else{
               detail.style.display='block';
           }
       }else if(target.tagName.toLowerCase() == 'img'&& target.className.toLowerCase() == 'expand_img'){
           detail=target.parentNode.parentNode.nextSibling;
           if(detail.style.display=="block"){
               detail.style.display='none';
           }else{
               detail.style.display='block';
           }
       }

这里就写一下我的思路吧！
这里主要用到了事件代理的方式，我把点击事件绑定到ul上，然后利用event.target获取到事件源，也就是我点击了ul中的哪一个元素，因为我在li里放了上下两个div标签，上面是用户的名字，下面是用户的详细信息。在我点击用户名字的时候实现用户详细信息的而显示与隐藏。这里就得根据我所点击的事件源找到它所在li中的第二个div，也就是用户的详细信息所在的div,然后控制它的显示与隐藏。

重点就在我怎么去找这个div?
这些都在代码里，主要是通过事件源与目标div之间的关系去找及event.target的属性去筛选掉不希望触发事件的元素。

表述不太好！具体源码在：
http://www.jianshu.com/p/df695c788256