简单的on事件绑定

实现一个简单的on和off方法

介绍:

1. Event对象:

      funcList: {}, //保存delegate所绑定的方法   
      ieFuncList :{} //保存ie下的绑定方法

2. Event 对象中的 on, off 方法,主要调用
   Event.addEvent, Event.delegateHandle这两个方法

      Event.addEvent: 调用底层的addEventListener添加监听事件
      Event.delegateHandle: 当发生事件之后,随着事件的冒泡上升,判断存           在事件委托的元素,并执行对应的回调函数
     
   

3. addEvent / offEvent:

       obj.addEventListener(type, fn, false);
       obj.removeEventListener(type, fn, false);

代码-Event.js

/**
 * addEvent
 * author [e-mail]
 */
window.Event = {};
var Event = {

    funcList: {}, //保存delegate所绑定的方法   
    ieFuncList: {}, //由于保存在ie下绑定的方法


    on: function(obj, selector, type, fn) {
        if (!obj || !selector) return false;
        var fnNew = Event.delegateHandle(obj, selector, fn);
        Event.addEvent(obj, type, fnNew);
        /* 将绑定的方法存入Event.funcList，以便之后解绑操作 */
        if (!Event.funcList[selector]) {
            Event.funcList[selector] = {};
        }
        if (!Event.funcList[selector][type]) {
            Event.funcList[selector][type] = {};
        }

        Event.funcList[selector][type][fn] = fnNew;
    },

    off: function(obj, selector, type, fn) {
        if (!obj || !selector || !Event.funcList[selector]) {
            return false;
        }
        var fnNew = Event.funcList[selector][type][fn];
        if (!fnNew) {
            return;
        }

        Event.offEvent(obj, type, fnNew);
        Event.funcList[selector][type][fn] = null;
    },

    delegateHandle: function(obj, selector, fn) {
        /* 实现delegate 的转换方法，事件冒泡上升时, 符合条件时才会执行回调函数 */
        var func = function(event) {
            var event = event || window.event;
            var target = event.srcElement || event.target;
            var parent = target;

            function contain(item, elmName) {
                if (elmName.split('#')[1]) { //by id
                    if (item.id && item.id === elmName.split('#')[1]) {
                        return true;
                    }
                }
                if (elmName.split('.')[1]) { //by class
                    if (hasClass(item, elmName.split('.')[1])) {
                        return true;
                    }
                }
                if (item.tagName == elmName.toUpperCase()) {
                    return true; //by tagname
                }
                return false;
            }
            while (parent) {
                /* 如果触发的元素，属于(selector)元素的子级。 */
                if (obj == parent) {
                    return false; //触发元素是自己
                }
                if (contain(parent, selector)) {

                    fn.call(obj, event);
                    return;
                }
                parent = parent.parentNode;
            }
        };
        return func;
    },
    addEvent: function(target, type, fn) {
        if (!target) return false;
        var add = function(obj) {
            if (obj.addEventListener) {

                obj.addEventListener(type, fn, false);

            } else {
                // for ie
                if (!Event.ieFuncList[obj]) Event.ieFuncList[obj] = {};
                if (!Event.ieFuncList[obj][type]) Event.ieFuncList[obj][type] = {};
                Event.ieFuncList[obj][type][fn] = function() {
                    fn.apply(obj, arguments);
                };
                obj.attachEvent("on" + type, Event.ieFuncList[obj][type][fn]);
            }
        }
        if (target.length >= 0 && target !== window && !target.tagName) {
            for (var i = 0, l = target.length; i < l; i++) {
                add(target[i])
            }
        } else {
            add(target);
        }
    },


    offEvent: function(target, type, fn) {
        if (!target) return false;
        var remove = function(obj) {
            if (obj.addEventListener) {
                obj.removeEventListener(type, fn, false);

            } else {
                //for ie
                if (!Event.ieFuncList[obj] || !Event.ieFuncList[obj][type] || !Event.ieFuncList[obj][type][fn]) {
                    return;
                }
                obj.detachEvent("on" + type, Event.ieFuncList[obj][type][fn], false);
                Event.ieFuncList[obj][type][fn] = {};
            }
        }
        if (target.length >= 0 && target !== window && !target.tagName) {
            for (var i = 0, l = target.length; i < l; i++) {
                remove(target[i])
            }
        } else {
            remove(target);
        }
    },

};

代码-DEMO.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
</head>
<body>
<p>测试 Event </p>
<div id=content>
    <ul>
        <li><button id="btn1">1</button></li>
        <li><button id="btn2">2</button></li>
        <li><button id="btn3">3</button></li>
        <li><button id="btn4">4</button></li>
        <li><button id="btn5">5</button></li>
    </ul>

<button id="unbind">取消绑定</button>
</div>
<p id="text"></p>

<script src="addEvent.js"></script>
<script>
(function(){
    /* 演示demo*/
    var $id=function(id)
    {
        return document.getElementById(id) || id;
    }
    var outer = $id("content"),
        btn = $id("text");
    Event.on(outer,'button',"click",add);
    Event.on(outer,'#unbind',"click",remove);

    //动态添加一个按钮,查看是否有事件响应
    var newbtn = document.createElement("button");
    var node = document.createTextNode("new button");
    newbtn.appendChild(node);
    outer.appendChild(newbtn);

    function add(){
        var e = arguments[0] || window.event;
        var target = e.srcElement || e.target;
        console.log("target:",target);
        btn.innerHTML =  target.innerHTML + ' ' + e.type;
    }
    function remove(){
        Event.off(outer,'button',"click",add);
        Event.off(outer,'#unbind',"click",remove);
    }
})();
</script>
</body>
</html>