javascript中的事件委托（代理）

来源：互联网发布：能看拳皇漫画的软件编辑：程序博客网时间：2024/05/16 17:06

—–事件委托的原理用到的就是事件冒泡和目标元素，把事件处理器添加到父元素，等待子元素事件冒泡，并且父元素能够通过target（IE为srcElement）判断是哪个子元素，从而做相应处理。

传统的事件处理：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head><body>    <ul>        <li>1</li>        <li>2</li>        <li>3</li>        <li>4</li>        <li>5</li>        <li>6</li>        <li>7</li>    </ul></body></html><script>    (function () {        var oli = document.getElementsByTagName("li");        for (var i = 0; i < oli.length; i++) {            oli[i].addEventListener("click",showCon,false);        }        function showCon() {            console.log(this.innerHTML);        }    })()</script>

事件委托

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head><body>    <ul>        <li>1</li>        <li>2</li>        <li>3</li>        <li>4</li>        <li>5</li>        <li>6</li>        <li>7</li>    </ul></body></html><script>    (function(){        var oul = document.getElementsByTagName("ul")[0];         oul.addEventListener('click',showCon,false);         function showCon(e) {            e=e||window.event;            var targetElement=e.target||e.srcElement;             if(targetElement.nodeName.toLowerCase()==="li"){               console.log(targetElement.innerHTML);               }        }})();</script>

事件委托的优点：
1.管理的函数变少了。不需要为每个元素都添加监听函数。对于同一个父节点下面类似的子元素，可以通过委托给父元素的监听函数来处理事件。
2.可以方便地动态添加和修改元素，不需要因为元素的改动而修改事件绑定。
3.JavaScript和DOM节点之间的关联变少了，这样也就减少了因循环引用而带来的内存泄漏发生的概率

阅读全文

1 0