JS事件委托

目录

• 一、JS事件委托
• 二、好处：
  • 1 提高效率
  • 2 新增加的标签，也可以有之前的事件。

一、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，就可以看出效果。