JS中的事件委托

一JS事件委托

JS事件委托是利用了事件冒泡的机制，将事件委托的父级元素去做，让父级元素触发时间。

二、好处：

1 提高效率

例如：鼠标移入的时候，给每个li增加背景颜色，移出的时候，去掉背景颜色

<script type="text/javascript">window.onload = function(){    var oUl = document.getElementById("ul1");    var aLi = document.getElementsByTagName("li");    for (var i = 0; i < aLi.length; i++) {        aLi[i].onmouseover = function(){            this.style.background = 'red';        }        aLi[i].onmouseout = function(){            this.style.background = '';        }    }}</script><ul id="ul1">    <li>1111</li>    <li>2222</li>    <li>3333</li>    <li>4444</li></ul>  

效果如下：

如果上面例子中，li的个数太多，会导致效率问题，将上面例子改造成ul的事件，通过父级来处理事件

使用父级，需要用到事件源。
事件源：是event对象的，不管在哪个事件中，只要你操作的那个元素就是事件源

可以通过以下方式进行获取事件源：
ie：window.event.srcElement
标准下：event.target

下面代码使用事件委托

<script type="text/javascript">window.onload = function(){    var oUl = document.getElementById("ul1");    var aLi = document.getElementsByTagName("li");    for (var i = 0; i < aLi.length; i++) {        oUl.onmouseover = function(ev){            //解决事件源存在兼容性问题            var ev = ev || window.event;            var target = ev.target || ev.srcElement;            target.style.background = 'red';        }        oUl.onmouseout = function(){            var ev = ev || window.event;            var target = ev.target || ev.srcElement;            target.style.background = '';        }    }}</script><ul id="ul1">    <li>1111</li>    <li>2222</li>    <li>3333</li>    <li>4444</li></ul>  

改造之后效果一样

上面程序中，有一个bug，
鼠标移动到左边空白处，会整个ul变红

通过target的nodeName可以找到当前元素的标签，这样就可以解决问题：

window.onload = function(){    var oUl = document.getElementById("ul1");    var aLi = document.getElementsByTagName("li");    for (var i = 0; i < aLi.length; i++) {        oUl.onmouseover = function(ev){            var ev = ev || window.event;            var target = ev.target || ev.srcElement;            if(target.nodeName.toLowerCase() == 'li'){                target.style.background = 'red';            }        }        oUl.onmouseout = function(){            var ev = ev || window.event;            var target = ev.target || ev.srcElement;            if(target.nodeName.toLowerCase() == 'li'){                target.style.background = '';            }        }    }}  

2 新增加的标签，也可以有之前的事件。

在第一个代码中，如果动态通过document来创建的标签，则无法有鼠标移入跟移出事件。而使用了事件委托给父级来实现，也解决了新增标签的问题。

这里就不举例了。可以在上面的第一个代码中，加入一个按钮。来动态增加li，就可以看出效果。