论一次添加事件引起的思考

最近在写一个练习的时候,需要有点击事件,就是给li添加点击事件,因为li只有大概5个左右,所以就是用for循环给每一个li添加了点击事件.后来突然意识到 如果li很多呢?有个几十个的时候 难道要给每一个li都添加点击事件吗?答案肯定是no 于是就想到了用事件委托啊 多简单多优雅~~~

<div class="daili">
   <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <LI>6</LI>
   </ul>
</div>
<script type="text/javascript">
    var warp = document.getElementById("warp");
    warp.addEventListener("click",function(ev) {
        var ev=ev || window.event;
        var target = ev.target || ev.srcElement;
        if(target.tagName.toLowerCase() === 'li'){
            alert(target.innerHTML)
        }
    })
</script>

这样看似解决了,但是存在兼容性问题啊!!!
***addEventListener在ie8之前不能用哎***所以坐一下处理呗!为了使用方便我这里将这种兼容性的写法封装起来,这样就不用每次绑定事件都要判断

var warp = document.getElementById("warp");

/*obj 要添加事件的标签名  evName要添加的事件名  fn绑定事件的函数*/
function allAddevent (obj,evName,fn) {
    if(obj.attachEvent) {
       obj.attachEvent('on' + evName, fn);
    } else {
        obj.addEventListener(evName, fn, false);//false开启冒泡机制  ,true时开启下沉机制
    }
}
allAddevent(warp,'click',function(ev){
    var ev = ev || window.event;
    //ie支持ev.srcElement 
    var target = ev.target || ev.srcElement;
    if (target.tagName.toLowerCase() === 'li') {
        alert(target.innerHTML);
        console.log(this);//window
    }
})

这样基本就算完成了,而且很优雅,但是有一个小问题就是上面打印this的时候.在ie浏览器下 输出的是window this指针指向有问题.所以稍微的再修饰修饰!

最终代码如下

/*obj 要添加事件的标签名  evName要添加的事件名  callback回调函数*/
function allAddevent (obj,evName,callback) {
    if (obj.attachEvent) {
        obj.attachEvent('on' + evName, function() {
            //改变ie下this的指针指向    本来指的是window  改变后谁调用就指向谁
            callback.call(obj);
        });
    } else {
        obj.addEventListener(evName,callback,false);
        //false开启冒泡机制  ,true时开启下沉机制
    }
}

//这里不用ES6的箭头函数是因为  ie不兼容  为了兼容还需要将ES6转换为ES5   常用的是babel 
allAddevent(warp,'click',function(ev){
    var ev = ev || window.event;
    //ie支持ev.srcElement 
    var target = ev.target || ev.srcElement;
    if (target.tagName.toLowerCase() === 'li') {
        alert(target.innerHTML);
        console.log(this);//window
    }
})

好啦!新手小白白的表演到此结束~~~欢迎各位大神批评指教!!!