JavaScript事件委托

js事件处理程序得意总结笔记来了

首先,为什么要用事件委托,用一段代码解释下:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>DOM</title>
    <style type="text/css">
        #con li{
            width: 100px;
            height: 50px;
            background-color: #1F747C;
            border-bottom: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <div>
        <ul id="con">
            <li id="list1">哈哈</li>
            <li id="list2">洗洗</li>
            <li id="list3">水水</li>
        </ul>
    </div>

</body>
</html>

如上面代码,如果要添加事件处理程序,我们一般做法是,给list1、list2、list3这个3个li元素分别添加事件处理程序,但是有没有想过,如果元素很多呢,我们还是一直用这样的方法添加吗?当然是不可能的,这样子,非累死程序员不可快哭了

这个时候事件委托就出现了,神一般的存在,解决了这一问题。

事件委托:利用事件冒泡这一特性,指定一个事件处理程序,管理这一类的所有事件,在他的父元素或更高元素设置事件处理程序,将子元素事件委托给父元素事件。达到省时省力的效果。

接下来用代码说明怎样使用事件委托

html代码:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>DOM</title>
    <script type="text/javascript" src="event.js"></script>
    <script type="text/javascript" src="deal.js"></script>
    <style type="text/css">
        #con li{
            width: 100px;
            height: 50px;
            background-color: #1F747C;
            border-bottom: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <div>
        <ul id="con">
            <li class="list">哈哈</li>
            <li class="list">洗洗</li>
            <li class="list">水水</li>
        </ul>
    </div>

</body>
</html>

event.js代码:

/**
 * Created by ys on 2015/5/11.
 */
//跨浏览器的事件处理程序
//调用时候直接用domEvent.addEvent( , , );直接调用
//使用时候,先用addEvent添加事件,然后在handleFun里面直接写其他函数方法,如getEvent;
//addEventListener和attachEvent---都是dom2级事件处理程序
var domEvent = {
    //element:dom对象,event:待处理的事件,handleFun:处理函数
    //事件名称,不含“on”,比如“click”、“mouseover”、“keydown”等
    addEvent:function(element,event,handleFun){
        //addEventListener----应用于mozilla
        if(element.addEventListener){
            element.addEventListener(event,handleFun,false);
        }//attachEvent----应用于IE
        else if(element.attachEvent){
            element.attachEvent("on"+event,handleFun);
        }//其他的选择dom0级事件处理程序
        else{
            //element.onclick===element["on"+event];
            element["on"+event] = handleFun;
        }
    },
    //事件名称,含“on”,比如“onclick”、“onmouseover”、“onkeydown”等
    removeEvent:function(element,event,handleFun){
        //removeEventListener----应用于mozilla
        if (element.removeEventListener) {
            element.removeEventListener(event,handleFun,false);
        }//detachEvent----应用于IE
        else if (element.detachEvent) {
            element.detachEvent("on"+event,handleFun);
        }//其他的选择dom0级事件处理程序
        else {
            element["on"+event] = null;
        }
    },
    //阻止事件冒泡
    stopPropagation:function(event){
        if(event.stopPropagation){
            event.stopPropagation();
        }else{
            event.cancelBubble = true;//IE阻止事件冒泡,true代表阻止
        }
    },
    //阻止事件默认行为
    preventDefault:function(event){
        if(event.preventDefault){
            event.preventDefault();
        }else{
            event.returnValue = false;//IE阻止事件冒泡,false代表阻止
        }
    },
    //获得事件元素
    //event.target--非IE
    //event.srcElement--IE
    getElement:function(event){
        return event.target || event.srcElement;
    },
    //获得事件
    getEvent:function(event){
        return event? event : window.event;
    },
    //获得事件类型
    getType:function(event){
        return event.type;
    }
};


deal.js代码:

/**
 * Created by ys on 2015/5/11.
 */
window.onload = function(){
    var ulList = document.getElementById('con');
    domEvent.addEvent(ulList,'click',function(event){
        event = domEvent.getEvent(event);
        var target = domEvent.getElement(event);
        switch (target.className){
            case 'list':
                alert('点击了我');
                break;
        }
    });
};
接下来,几时测试时间了,我分别在IE7以上,chrome,firefox都测试过,可以 大笑,nice,睡觉了。



你可能感兴趣的:(JavaScript事件委托)