JS事件代理

来源：互联网发布：知乎英文新闻网站编辑：程序博客网时间：2024/06/06 18:58

参考：剑华一笑的博客网址：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>

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>

0 0