JS事件代理

参考：剑华一笑的博客          网址：http://blog.sina.com.cn/s/blog_65c2ec5e0101oddv.html

大家看完之后，帮忙点个赞！

1 事件代理是把事件处理器添加到一个父级元素上，这样就避免了把事件处理器添加到多个子级元素上。

2 事件代理用到了两个JS事件上常被忽略的特性：事件冒泡以及目标元素。

   事件冒泡为当点击一个元素上的事件时，同样的事件将会在那个元素的所有祖先元素上被触发。

   使用事件代理，我们可以把事件添加到一个元素上，等待一个事件从它的子级元素上冒泡出来，并且可以得知该元素是从那个元素开始的。

  事件代理，可以改善性能，如在10列，100行表格中，对点击某个表格做处理，如果把事件处理器加到这1000个单元格会产生一个很大的性能问题，并且有可能导致内存泄露甚至是浏览器的崩溃。相反地，使用事件代理，你只需要把一个事件处理器添加到table元素上就可以了，这个函数可以把点击事件给截下来，并且判断出是哪个单元格被点击了。

如何检测目标元素，比方说我们有一个table元素，ID是“report”，我们为这个表格添加一个事件处理器以调用editCell函数。

functiongetEventTarget(e) {

        e = e || window.event;

        return e.target || e.srcElement;

    }

e为事件对象，IE中srcElement属性中，而在其他浏览器中则是target属性

接下来就是editCell函数了，这个函数调用到了getEventTarget函数。一旦我们得到了目标元素，剩下的事情就是看看它是否是我们所需要的那个元素了。

function editCell(e){

            var target= getEventTarget(e);

            if(target.tagName.toLowerCase() =='td')  {

                // DO SOMETHING WITH THECELL

          }

    }

那些需要创建的以及驻留在内存中的事件处理器少了。这是很重要的一点，这样我们就提高了性能，并降低了崩溃的风险。

不是所有的事件都能冒泡的。blur、focus、load和unload不能像其它事件一样冒泡。事实上blur和focus可以用事件捕获而非事件冒泡的方法获得（在IE之外的其它浏览器中）。

实例：可以

<table id="test" >

  <tr><td>11</td></tr>

</table>

 

function $(id){

            returndocument.getElementByIdx_x(id);

        }

        function getEventTag(e){

            var e = e|| window.event;

            returne.target || e.srcElement;

        }

        function editCell(e){

            var target= getEventTag(e);

            if(target.tagName.toLowerCase() === 'td'){

                var _v = target.textContent|| target.innerText;

                console.log(_v);

            }

        }

        function bind(elem, type, fn){

            if(elem.attachEvent){

                elem.attachEvent('on' + type,fn);

            }

            if(elem.addEventListener){

                elem.addEventListener(type,fn, false);

            }

        }

bind($("test"), "click", function(e){

            editCell(e);

        });

或者参考自己写的：

  <div id="test">
    <a id="IDa" href="#">11</a>
    <a href="#">22</a>
    <a href="#">33</a>
    <a href="#">44</a>
    <a href="#">55</a>
  </div>    
    <script type="text/javascript">
    function getEventTarget(e){
        e=e||window.event;
        return e.target||e.srcElement;  //在IE中目标元素放在srcElement属性中，而在其他浏览器为target  
     }
    function editCell(e){
        var target=getEventTarget(e);
        if(target.tagName.toLowerCase()=='a'){
            var _v=target.textContent||target.innerText;
            console.log("选择了td元素="+_v);
            alert("You clicked a special link！");
        }
    }
    function bind(elem,type,fn){
        if(elem.attachEvent){
            elem.attachEvent('on'+type,fn);
        }else if(elem.addEventListener){
            elem.addEventListener(type,fn,false);
        }else{
            elem['on'+type]=fn;
        }
    }
var as=document.getElementsByTagName("a");
var par=as[0].parentNode; //选取其第一个元素
bind(par,"click",function(e){
    editCell(e);
});

</script>